protovis part 4: external data and animated labels

Not bad but all those labels make it hard to consume the information visually. Lets add some animation so that the population data lables only appear when the mouse rolls over a bar.

Add a new variable called activeBar and make it = 0. activeBar will refer to the index position of the data. The first position in an array is always 0, not 1 (because arrays use base-10 math). This setting means that the first bar will automatically highlight when the graphic loads.

Next, go to the new panel variable and add an event called "mousemove" to the entire panel. This is important because it sets up the animation for all the subsequent parts. We'll use a class called pv.Behavior.point to identify what the mouse pointing at. By default, the point area is an invisible circle beneath the mouse. We can expand this area to cover the entire panel by setting the point property to infinity. But we can simultaneously limit how pv.Behavior works. We really only care what the mouse is over as it moves up or down. Since there are no new objects to activate when the mouse moves horizontally, we can .collapse the "x" axis.

Next go to the original bar code and after the left property, add an event listener that will react to the mouse's "point" behavior. In this case, we're going to use a function to state that when the activeBar = this.index (the data element in the array), return a result for the race panel.