Digital humanities


Maintained by: David J. Birnbaum (djbpitt@gmail.com) [Creative Commons BY-NC-SA 3.0 Unported License] Last modified: 2022-04-07T16:41:55+0000


SVG assignment #3

Overview

In SVG assignment #2 we asked you to create a bar chart representing popular votes cast for Democrats in the 2012 election. As a bonus task, you could have also represented the electoral votes by varying the widths of the bars. This assignment asks you to create a different type of election results visualization, one that represents both the popular and electoral votes for candiates of all parties in presidential elections from 1900 to 1912. The raw data, scraped from https://www.britannica.com/topic/United-States-Presidential-Election-Results-1788863, is below, and you can copy and paste it into an XML document so that you can transform it to SVG:


    
        William McKinley
        William Jennings Bryan
    
    
        Theodore Roosevelt
        Alton B. Parker
        Eugene V. Debs
    
    
        William Howard Taft
        William Jennings Bryan
        Eugene V. Debs
    
    
        William Howard Taft
        Woodrow Wilson
        Theodore Roosevelt
        Eugene V. Debs
    
]]>

The task

Choosing the correct visualization for the data we want to represent is important and sometimes challenging, and the choice starts with questions about the number and type of variables. We’re asking you to represent four variables here: election year, political party, electoral votes, and popular votes (we are not going to include the candidates’ names in the SVG). Some variables, such as electoral and popular votes, are countable; others, like political party, are not. (Years are sort of countable; they are ordered and expressed in numbers, but the year 2000 is not twice as large as the year 1000 because the year 0 starting point doesn’t have the same type of absolute, real-world meaning as receiving 0 votes in an election does.) One reason you don’t see a lot of bar graphs with variable-width bars is that bar graphs are not very well suited to representing so many variables.

We’re going to use a bubble chart to visualize these four variables, and before you do anything else, navigate to https://datavizcatalogue.com/methods/bubble_chart.html) to learn why bubble charts are a good choice for for visualization more than two variables, some countable and some not. A bubble chart has an X (in our graph, the election year: 1900, 1904, 1908, or 1912) and Y axis (in our graph the count of electoral votes won by a candidate, which ranges, in this data set, from a low of 0 to a high of 435), and it lets us also use the area of circles to represent a third variable (in our graph, percentage of popular vote, which you’ll have to compute using XPath, see below) and color to represent a fourth (in our case, political party). Your bubble chart should look something like the following:

Candidates’ electoral and popular votes Election Year Electoral college votes Republican Democrat Third party 50% of popular vote 51.7 45.5 1900 56.4 37.6 1904 51.6 43.0 1908 23.2 41.8 27.4 1912 0 100 200 300 400 500

Working with circles in SVG

You may have worked only with <rectangle>, <line>, and <text> elements in SVG so far. Circles are similar to the first two in that they are empty elements that use attributes to specify their position and size: @cx (X-value of center), @cy (Y-value of center), and @r (radius). For example:

]]>

will draw a circle with a radius of 50px centered at x = 100 and y = 100. The color of a circle is set with a @fill attribute. We set the @opacity attribute to .25 to make the circles partly transparent, since they may overlap (see especially the 1912 results). The low opacity isn’t a perfect solution because the visualization in case of complete overlap will change depending on which circle is drawn first, so it’s best to draw larger circles before smaller ones. For this exercise you can assume that third-party candidates always get fewer electoral votes than major-party candidates, so you can just draw them last (and they’re listed last in the input XML, so you don’t have to do anything special to control when they’re drawn), but a more professional strategy would sort the data for each election by electoral vote before drawing any of the circles for that election.

Because some of the popular vote percentages are so close that the differences in the size of the circles are not easy to see, we’ve added labels for the percentages. Those labels are a bonus task that we encourage you to undertake, but they aren’t required. See below.

Here is how to think about the four data variables:

Remember to draw the SVG in the upper right quadrant of the coordinate space, using negative Y values, and use @viewBox to make the graph visible in the view port. If you need a refresher on @viewBox, refer to our Viewbox tutorial: an introduction to the SVG coordinate space.

Bonus tasks

The required part of the assignment is the bubble chart with all of the labels on the X axis (years plus general label) and Y axis (electoral vote counts plus general label). You are not required to include a legend, but as bonus tasks you may:

What to submit

Submit only your XSLT; do not submit the SVG file. We’ll run the transformation ourselves.