protovis part 3: variables and animation

Perfect. Now let's animate this chart.

Go to the protovis web site at vis.stanford.edu/protovis

There is a lot of code and documentation here that you are free to use, so don't be shy. We're going to the documentation area to borrow some sample code.

Click on Documentation on the top. on the resulting page, click on wedges in the left column. This takes us to a page with all the documentation for the wedge chart. scroll down to the very bottom until you the see a chart that animates when you move your mouse over it.

Look at the code on the left and find the line near the top that starts with .def. Copy this entire line.

Return to TextMate and paste it above the .data property in the original wedge code. This code essentially declares a variable on the fly. "o" will be whatever the mouse is over. The -1 is the position in the array. Because it's negative number, it's used to turn the animation off when the mouse moves away from the chart.

Go back to the protovis site and select everything from the .left property down to and including the .event property. Make sure to get it all then copy it.

Return to text mate and select the left and bottom properties in the original wedge. Take note of the values. We'll need them in a minute. Delete these then put your cursor at the end of the linewidth line but before the semicolon. Hit return and paste.