SVG assignment #1

Overview

In a three-way election for Best Stooge Ever, each candidate (Curly, Larry, Moe) wins
between 0% and 100% of the votes. Assume that all votes are cast for one of the three
candidates (no abstentions, write-ins, invalid ballots, etc.), which means that when you
add the percentages for the three candidates, the result must be exactly 100%. Assume
also that we’re recording percentage of the vote, not raw votes, and that the
percentages are all integer values. (In Real Life we’d probably record the raw count and
calculate the percentages, but in real life we wouldn’t be voting for Best
Stooge Ever in the first place!) Here are the results:

Your task is to use the data from that contest to draw (by typing the angle
brackets; no fair using Inkscape or other visual editors) an SVG bar chart of the
results. For your bar chart, you’ll want to draw an x axis and y axis
(using the SVG <line> element), three bars of different colors (using
the SVG <rect> element), and labels on the axes or the bars for the
stooges and the numerical values of their vote counts (using the SVG
<text> element).

Dealing with the oddities of the SVG coordinate space

The SVG y axis grows larger as one moves down from the origin
and smaller as one moves up. This is contrary to the way we’re used to
graphing, and it means that if you draw the chart using positive y values, it
will be drawn correctly, except that the height will grow down, rather than up. For
example, if you have two bars of different heights, you’d like them to sit on the same
baseline. But if you give them the same y coordinate and different positive
heights, their tops will be aligned, instead of their bottoms.

One way to deal with this is to start them at different positions. For example, if you
have two bars, one of height 25 and one of height 50, and you want them to sit on the
same baseline, give them respective heights of 25 and 50, but start the shorter one at a
y position that is 25 units greater (and therefore lower on the
screen) than the longer one. For example, the longer bar might run from 0 to 50 (start
at Y position 0 with a height of 50) and the shorter one from 25 to 50 (start at Y
position 25 with a height of 25). You may find this easier to visualize if you draw the
bar graph on graph paper with a pencil and label the values. There are other ways to
manage this peculiarity of the SVG coordinate space, but for this exercise we’d like you
to try the approach described here.

In Real Life, you won’t draw bar charts by hand. Instead you’ll use XSLT or XQuery to
transform the information in your source XML into SVG. For now, though, you should use
the skills you practiced in class to draw the chart by hand.