Digital humanities

Maintained by: David J. Birnbaum ( [Creative Commons BY-NC-SA 3.0 Unported License] Last modified: 2016-03-12T17:34:15+0000

SVG assignment #2


Those who haven’t grown up with the US political system often have trouble understanding the Electoral College, which seems to undermine the principle of one person, one vote and imbue not individuals, but states, with control of national elections, a result that some find self-evidently anti-democratic. Whether one endorses it or not, the Electoral College was created for a reason, and you can read about the details at a page maintained by the National Archives and Records Administration (NARA). The most important detail for our purposes is that electoral votes are allocated on a winner-take-all basis, which means, for example, that a candidate who carries a state by 51% to 49% wins 100% of that state’s electoral votes, rather than just 51% of them. (There are two states that in principle allocate electoral votes proportionately, but in the last [2012] presidential election their votes went entirely to one candidate, so we can simplify our task by regarding them as winner-take-all states, too.)


The data for this assignment are at and consist of an XML representation of the voting in the 2012 presidential election. The data set (scraped from,_2012) contains entries for each State (plus DC) that controls electoral votes, in the form:

<state name="Pennsylvania" acro="PA" elec="20">
    <candidate party="Democrat">2925786</candidate>
    <candidate party="Republican">2641387</candidate>
    <candidate party="Libertarian">49094</candidate>
    <candidate party="Green">20849</candidate>

There are many ways to visualize this information, the parameters of which include popular vote (raw and percentage) and electoral vote. For example, at, the image is organized around a vertical axis in the middle. The X axis stretches left and right from 0 (in the middle) to 100 (at the left and right edges), and the horizontal length of a bar indicates the margin of victory of the winning candidate. You can see, for example, at the bottom of the chart that the Democrats had a margin of victory of between 80% and 90% in DC and the Republicans of between 40% and 50% in Utah, and the skinniest bars, at the top represent the swing states, the ones with very narrow margins of victory. The height of the bars indicates the number of electoral votes they carry; DC is worth 3 electoral votes and Utah is worth 6, so the bar for Utah is twice as tall as the one for DC. The axes are labeled (X = margin of victory and Y = electoral votes), as are the states, and there are regularly spaced numbers on the axes for orientation, but no data labels with exact numbers of votes (raw or percentage, popular or electoral).

This particular graph was drawn in Inkscape, an SVG drawing application. If you view the source, you can see the raw SVG, but it isn’t the sort of SVG you would want to create yourself. In particular, it isn’t very legible because it uses the SVG <path> element; if we were generating this graph by using XSLT to transform the raw XML data into SVG, we would have used <rect> instead, which is both easier to program and easier to read.


You do not have to produce the chart discussed above! Your task is much simpler: you should write an XSLT program to generate an SVG bar chart of percentage of the popular vote cast for the Democratic party candidate in each state. We’ve posted some sample output at (your results don’t have to look exactly like ours, of course, as long as you include the necessary information in a legible form).

Some things to consider:

Bonus tasks

Given the Democratic victory in both the popular and electoral voting, a representation of votes cast for the Democrats is probably the most important information, and you can stop there, if you’d like. You can, though, enhance the chart in several ways:

For a very ambitious, JavaScript-enhanced presentation, see