SVG assignment #3

Overview

SVG assignment #2 asked you to write XSLT to create
a bar chart representing the percentage of votes cast for Democratic candidates in each
state in the 2012 US presidential election. We have now also posted a discussion of some
possible solutions to that task.

You can create a stacked bar chart, with the percentages of other
candidates stacked on top of the Democrats, so that all bars top out at 100%. These
representations are usually easiest to read if you think first about how to arrange
the pieces. You probably want all of the parties in the same order in all of the
bars, and one choice is to pile the Republicans on top of the Democrats, with the
others above them in order of how large a part they played in the election. We found
it more useful to have the Democratic vote grow up from the baseline and the
Republican vote grow down from the top, with the other parties in the middle, in a
consistent order. That makes it easier to see the curve for the two largest
parties.

Once we add other parties, it seems natural to make the Democrats blue, the
Republicans red, and the Greens … well … green. The other colors are less obvious,
but http://en.wikipedia.org/wiki/United_States_presidential_election,_2012 used
yellow for the Libertarian party, purple for the Constitution party, and blue for
the Justice party. That page also lists, but does not assign color to, the Peace and
Freedom party and America’s party, so if you choose to include those, you’ll have to
choose your own colors.

The bar chart so far has represented only popular vote, but we can add another
dimension by exploiting the X axis to make the bars different widths, with the width
proportional to the electoral votes. For example, Utah, with 6 electoral votes,
would be twice as wide as DC, with 3. Once you do this, though, you have to deal
with questions of scale, and we can think of at least four possible strategies:

Let the bars get as wide as they need to be in order to make the differences
perceptible, with the understanding that users will have to resize the image
to make it all fit (which is what we did in the sample solution to the basic
assignment, above).

Let the bars get as wide as they need to be in order to make the differences
perceptible and implement a horizontal scroll bar (we can show you how to do
that). Users don’t generally like horizontal scrolling, which doesn’t mean
that it’s never the Right Answer, but we should be aware that it doesn’t
feel as natural to most users as vertical scrolling.

Shrink the width of all bars, keeping it proportional, so that it fits
across the screen without scrolling. This makes it easier to take in the
chart at a glance, but harder to see the differences among small values. You
can specify X positions as percentages, rather than pixels, which will cause
the image to contract and shrink proportionally as the user changes the
width of the window. We used this strategy at http://zatochnik.obdurodon.org/; if you view the source, you can
see the percentage values.

Swap the axes, so that the bars run horizontally instead of vertically,
exploiting the fact that users are generally more comfortable with vertical
scrolling than with horizontal scrolling. Gabi did this for her fairy-tale
speech chart (bottom chart, right column) at http://ft.obdurodon.org/reports/balance1.xhtml.

In addition to whatever axis and data labels you use, you might also want to include
a legend explaining your use of color.

The task

Make appropriate use of variables to improve the legibility and maintainability of
your code. Use reasonably self-documenting variable names, and further document your
use of variables in XML comments. Our posted solution to the earlier assignment
gives some examples of how to use variables, but if you see additional opportunities
where variables would clarify your code, you should incorporate them.

Add the other political parties to your output to create a stacked bar chart, as
described in the first of the Bonus tasks listed above. You will also need either to
color-code the bars, as described in the second of the Bonus tasks, or adopt some
other strategy for ensuring that viewers will distinguish the data for different
parties easily.

Especially if you already built a stacked bar chart as a bonus effort on the last
assignment, try the third of the tasks above, varying the width of the bars to represent
the number of electoral votes for each state. Since the point of the assignment is to
use XSLT to create SVG, don’t worry for now if your chart is too wide to fit in your
browser window, and concentrate instead on just creating the chart.