Digital humanities

Maintained by: David J. Birnbaum ( [Creative Commons BY-NC-SA 3.0 Unported License] Last modified: 2015-11-05T19:29:54+0000

SVG assignment #3


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.

SVG assignment #2 also mentioned some optional Bonus tasks:

We’ve implemented some of the preceding, and more, in a JavaScript-enhanced presentation.

The task

Your task is to enhance your solution to SVG assignment #2 in two ways:

  1. 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.
  2. 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.