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

the graph width will be used for the bars, whereas the rest is for padding
in between the bars.

P If you're not
sure what colors to
use, ColorBrewer
at http://
colorbrewer2.org
is a good place
to start. The tool
enables you to
specify the number
of colors you want
to use and the type
of colors, and it
provides a color
scale that you can
copy in various
formats. 0to255 at
http://0to255.com
is a more general
color tool, but I use
it often.

The vertical axis, which represents percentages, is a linear scale from 0 to
100 percent. The height of the bars can be anywhere in between 0 pixels to
the height of the graph, or 250 pixels.

Finally, fill is specified in an array with hexadecimal numbers. That's dark
blue for approval, light blue for disapproval, and light gray for no opinion.
You can change the colors to whatever you like.

Next step: Initialize the visualization with specified width and height. The
rest provides padding around the actual graph, so you can fit axis labels.
For example, bottom(90) moves the zero-axis up 90 pixels. Think of this
part as setting up a blank canvas.

var vis = new pv.Panel()
.width(w)
.height(h)
.bottom(90)
.left(32)
.right(10)
.top(15);

To add stacked bars to your canvas, Protovis provides a special layout
for stacked charts appropriately named Stack. Although you use this
for a stacked bar chart in this example, the layout can also be used with
stacked area charts and streamgraphs. Store the new layout in the “bar”
variable.

var bar = vis.add(pv.Layout.Stack)
.layers(data)
.x(function() x(this.index))
.y(function(d) y(d))
.layer.add(pv.Bar)
.fillStyle(function() fill[this.parent.index])
.width(x.range().band)
.title(function(d) d + “%”)
.event(“mouseover”, function() this.fillStyle(“#555”))
.event(“mouseout”, function()
this.fillStyle(fill[this.parent.index]));

Another way to think about this chart is as a set of three layers, one each
for approval, disapproval, and no opinion. Remember how you structured