Annimate Scatter Plot, in Time

[Marcin Tkaczyk]

Hi, 

I am working with financial data in R and wanted to animate the progression of a scatter plot, in time, using googleVis. For example, lets say I have a time series of 10 variables. Thus, for each day in the time series, I would like to scatter plot 10 data points on the y-axis, with the x-axis simply being an index from 1 to 10.  In addition, I would like the y-axis scaling to be fixed in time, so that not only is the shape of the line reflected, but it will also illustrate any "rising" or "dropping" of the line's level.

The following is a simple example with a short time series of 3 variables.

Date, Var1, Var2, Var3

01/01, 4, 5, 6

01/02, 4, 4, 4

01/03, 3, 3, 3

01/04, 3, 2, 1

In the above simple example, I would expect there to be 4 separate "frames" in the animation, with the following progression:

Scatter plot #1. upward sloping line, with the first point starting at 4

Scatter plot #2. zero slope line, with all points at 4

Scatter plot #3. zero slope line, with all points at 3 (i.e. if the y-axis is fixed, the line should appear to "drop")

Scatter plot #4. downward sloping line, with the first point starting at 3

The goal is to illustrate the evolution of the shape of a line, in addition to it's associated level on the y-axis (i.e. in the example above, the line "drops" from Scatter plot #2 to Scatter plot #3).

Thank you!

mar

[Daniel LaLiberte]

Marcin,

The kind of animation you want to do is not built in to the Google Charts capabilities given one data table. The Motion Chart (https://developers.google.com/chart/interactive/docs/gallery/motionchart) is close but it won't animate the line chart.

Instead, to animate changes in Google Charts, you need to repeatedly call the draw() method on a single chart, once for each frame, giving it different data each time.    A LineChart would make more sense than a scatter chart but either could work.   See the docs on how to use the LineChart here:   https://developers.google.com/chart/interactive/docs/gallery/linechart

The structure of the data, where you want a line between points, would be 10 rows (one for each variable), 2 columns, like this for the first frame:

var   value

1      4

2      5

3      6

...

And for the next frame:

var   value

1      4

2      4

3      4

...

I hope that gives you some ideas how to proceed.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Marcin Tkaczyk]

Thanks Daniel! 

I played around a bit and was able to get a scatter plot version of my graph to work using the bubbles in a motion chart.  I've attached a .csv with data and the following R code, if anyone is interested in a graph of WTI Crude Oil's futures price term structure, evolving in time, from 07/01/2014 through 01/14/2015 (Note: after the graph is rendered, I then manually change the "%Yield" to be on the y-axis, and "Months" on the xAxis...I assume I can do that in the script but haven't checked how quite yet :) ).

library(googleVis)
CL <- read.csv("C:/Example/CL_yld_weekly.csv")
CL$Date <- as.Date(as.character(CL$Date), format="%Y%m%d")
CL_motion <- gvisMotionChart(CL, idvar="Name", timevar="Date")
plot(CL_motion)

I appreciate the advice on draw(), I was actually wondering if that was an option!  My next move was to graph a series of Crude Oil Inventory over the same period.  That is, I was envisioning a single line chart that adds 1 data point at a time to give it motion...

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/jsTTWMVVm0c/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Daniel LaLiberte]

Glad you got it working, Marcin.  I should have also pointed you at the Animation page: https://developers.google.com/chart/interactive/docs/animation