Visualizing Proportions - Data Points: Visualization That Means Something - page 154

those three as an array of three arrays? That goes in layers() , where x and
y follow the scales that you already made.

For each layer, add bars using pv.Bar . Specify the fill style with fillStyle() .
Notice that we used a function that goes by this.parent.index . This is so
that the bar is colored by what layer it belongs to, of which there are three.
If you were to use this.index , you would need color specifications for every
bar, of which there are 39 (3 times 13). The width of each bar is the same
across, and you can get that from the ordinal scale you already specified.

The final three lines of the preceding code are what make the graph inter-
active. Using title() in Protovis is the equivalent of setting the title attri-
bute of an HTML element such as an image. When you roll over an image
on a web page, a tooltip shows up if you set the title. Similarly, a tooltip
appears as you place the mouse pointer over a bar for a second. Here
simply make the tooltip show the percentage value that the bar represents
followed with a percent sign ( % ).

Interaction in
Protovis isn't just
limited to mouse
over and out. You
can also set events
for things such as
click and double-
click. See Protovis
documentation for
more details.

To make the layers highlight whenever you mouse over a bar, use event() .
On “mouseover” the fill color is set to a dark gray (#555), and when the
mouse pointer is moved off, the bar is set to its original color using the
“mouseout” event.

To make the graph appear, you need to render it. enter this at the end of
our JavaScript.

vis.render();

This basically says, “Okay, we've put together all the pieces. Now draw the
visualization.” Open the page in your web browser (a modern one, such as
Firefox or Safari), and you should see something like Figure 5-14.

Mouse over a bar, and the layer appears highlighted. A tooltip shows up, too.
A few things are still missing, namely the axes and labels. Add those now.

In Figure 5-13, a number of labels are on the bars. It's only on the larger
bars though, that is, not the gray ones. Here's how to do that. Keep in mind
that this goes before vis.render() . Always save rendering for last.
bar.anchor(“center”).add(pv.Label)
.visible(function(d) d > 11)
.textStyle(“white”)
.text(function(d) d.toFixed(0));