protovis part 5: swap external data

Go down to the source label at the bottom of the code. There is some extra text that we no longer need since we added it to a variable at the top of the page. Delete the extra text that we already have in our source variable so that it looks like this:

Notice that when you mouse over your graphic the animation isn't smooth. That's because it only moves when the mouse is directly over a line. When your mouse moves off the line just a little bit the animation stops.

We're going to fix that by creating a parent panel to make the entire graphic react to the mouse. First scroll up to above the data lines and create a new comment that says gray line. Hit return and type techstocks.add(pv.Rule). Make sure to include the s at the end of techstocks.

Add a data property with the value stocks. Add a left property with the (function() leftMargin + xScale(this.index)). Add a bottom property with the value of bottomMargin. And add a linewidth property with a value of 5.

Finally, add a strokeStyle property with the value of (function() (activeBar == this.index) ? "#efefef" : "transparent");

Notice that we aren't adding an event here for the animation. Instead scroll all the way to the bottom. Above the render command, type a comment that says // animation panel. Hit return and type techstocks.add(pv.Panel).

Add an events property with the value all. Now add an event listener with the value ("point", function() {activeBar = this.index; return techstocks;});

Now if you scroll you mouse over the graphic the bar is used to create a smooth animation. But the bar interferes with the label text. To fix this scroll back up and after the gray line code add a comment that reads white box behind labels. We have to put this here so that it is above the gray line but behind the data lines.

Hit return and type techstocks.add(pv.Bar) Add a bottom property with the value labelYpos-140 Add a left property with the value labelXpos-20 Add a right property with the value width - labelXpos-150 And add a fillStyle with the value "white". Now when you mouse over the chart the white box covers the gray line.

Lets add some polish with tick lines and labels using the method from the second tutorial. Create a comment called tick lines then hit return and type techstocks.add(pv.Rule) Add a data property with the value (pv.range(0, dataRange, 10000)).

Add a bottom property with the (function(d) d /(height+27) * 2 + bottomMargin) Add a left property with the value of leftMargin - 5 and a right property with a value of 50. add a strokeStyle of lightgray.

Hit return and type .add(pv.Label) Add a text property with the value (function(d) "$" + ((d)/100)) Set the textAlign property to right Set the textBaseline to middle and set the textStyle to lightgray Add a font property with the value "7pt sans-serif".