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

The first line says that you're adding wedges to the panel, one for each
point in the data array. The bottom() and left() properties orient the
wedges so that the points are situated in the center of the circle. The
innerRadius() specifies the radius of the hole in the middle whereas the
outerRadius is the radius of the full circle. That covers the structure of the
donut chart.

Rather than setting the fill style to a static shade, fill colors are deter-
mined by the value of the data point and the color scale stored as depth-
Colors , or in other words, color is determined by a function of each point. A
white (#fff) border is used, which is specified by strokeStyle() . The circular
scale you made can determine the angle of each wedge.

To get a tooltip that says how many votes there were when you mouse over
a section, title() is used. Another option would be to create a mouseover
event where you specify what happens when a user places a pointer over
an object, but because browsers automatically show the value of the title
attribute, it's easier to use title() . Make the title the value of each data
point followed by “votes.” Finally, add labels for each section. The only
thing left to do is add May 2009 in the hole of the chart.

vis.anchor(“center”).add(pv.Label)
.font(“bold 14px Georgia”)
.text(“May 2009”);

P Visit http://
book.flowingdata
.com/ch05/donut
.html to see the
live chart and view
the source for the
code in its entirety.

This reads as, “Put a label in the center of the chart in bold 14-pixel Geor-
gia font that says May 2009.”

The full chart is now built, so now you can render it.

vis.render();

When you open donut.html in your browser, you should see Figure 5-10.

If you're new to programming, this section might have felt kind of daunting,
but the good news is that Protovis was designed to be learned by example.
The library's site has many working examples to learn from and that you
can use with your own data. It has traditional statistical graphics to the
more advanced interactive and animated graphics. So don't get discour-
aged if you were a little confused. The effort you put in now will pay off