<oo>→<dh> Digital humanities

Maintained by: David J. Birnbaum (djbpitt@gmail.com) Last modified: 2022-11-10T23:58:51+0000

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:

<results>
    <stooge name="Curly">50</stooge>
    <stooge name="Larry">35</stooge>
    <stooge name="Moe">15</stooge>
</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. If, though, 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.