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

This should look familiar. You did the same thing to make a donut chart
with Protovis. The only difference is that the title of the page is “Stacked
Bar Chart” and there's an additional <div> with a “figure-wrapper” id. We
also haven't added any CSS yet to style the page, because we're saving
that for later.
Now on to JavaScript. Within the figure <div> , load and prepare the data
(Obama ratings, in this case) in arrays.
<script type=”text/javascript+protovis”>
var data = {
“Issue”:[“Race Relations”,”Education”,”Terrorism”,”Energy Policy”,
“Foreign Affairs”,”Environment”,”Situation in Iraq”,
“Taxes”,”Healthcare Policy”,”Economy”,”Situation in Afghanistan”,
“Federal Budget Deficit”,”Immigration”],
“Approve”:[52,49,48,47,44,43,41,41,40,38,36,31,29],
“Disapprove”:[38,40,45,42,48,51,53,54,57,59,57,64,62],
“None”:[10,11,7,11,8,6,6,5,3,3,7,5,9]
};
</script>
You can read this as 52 percent and 38 percent approval and disapproval
ratings, respectively, for race relations. Similarly, there were 49 percent
and 40 percent approval and disapproval ratings for education.
To make it easier to code the actual graph, you can split the data and store
it in two variables.
var cat = data.Issue;
var data = [data.Approve, data.Disapprove, data.None];
The issues array is stored in cat and the data is now an array of arrays.
Set up the necessary variables for width, height, scale, and colors with the
following:
var w = 400,
h = 250,
x = pv.Scale.ordinal(cat).splitBanded(0, w, 4/5),
y = pv.Scale.linear(0, 100).range(0, h),
fill = [“#809EAD”, “#B1C0C9”, “#D7D6CB”];
The graph will be 400 pixels wide and 250 pixels tall. The horizontal scale
is ordinal, meaning you have set categories, as opposed to a continuous
scale. The categories are the issues that the polls covered. Four-fifths of