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

The width and height of the donut chart are both 350 pixels, and the radius
(that is, the center of the chart to the outer edge) is half the width, or 175
pixels. The fourth line specifies the arc scale. Here's how to read it. The
actual data is on a linear scale from 0 to the sum of all votes, or total votes.
This scale is then translated to the scale to that of the donut, which is from
0 to 2 π radians, or 0 to 360 degrees if you want to think of it in that way.
Next create a color scale. The more votes a category receives, the darker
the red it should be. In Illustrator, you did this by hand, but Protovis can
pick the colors for you. You just pick the range of colors you want.
var depthColors = pv.Scale.linear(0, 172).range(“white”, “#821122”);
Now you have a color scale from white to a dark red (that is #821122) on
a linear range from 0 to 172, the highest vote count. In other words, a cat-
egory with 0 votes will be white, and one with 172 votes will be dark red.
Categories with vote counts in between will be somewhere in between
white and red.
So far all you have are variables. You specified size and scale. To create
the actual chart, first make a blank panel 350 (w) by 350 (h) pixels.
var vis = new pv.Panel()
.width(w)
.height(h);
Then add stuff to the panel, in this case wedges. It might be a little confus-
ing, but now look over it line by line.
vis.add(pv.Wedge)
.data(data)
.bottom(w / 2)
.left(w / 2)
.innerRadius(r - 120)
.outerRadius(r)
.fillStyle(function(d) depthColors(d))
.strokeStyle(“#fff”)
.angle(a)
.title(function(d) String(d) + “ votes”)
.anchor(“center”).add(pv.Label)
.text(function(d) cats[this.index]);