Digital humanities


Maintained by: David J. Birnbaum (djbpitt@gmail.com) [Creative Commons BY-NC-SA 3.0 Unported License] Last modified: 2020-04-16T20:52:06+0000


SVG test

The task

Your first SVG homework assignment asked you to create by hand an SVG bar chart that included the results of a Best stooge ever contest, and your second and third SVG homework assignments asked you to write XSLT to generate a bar graph of presidential election results. You may have figured out that we faked the data for the Best stooge ever contest, but for this assignment you will be using real data from Five Thirty Eight, mostly known for election predictions, but here turned to a much more useful research goal: what are the most popular Dungeons and Dragons classes? Some of the poll results can be represented in a bar graph, like the data from the stooge contest or the US presidential election. Your task for this test is to write an XSLT stylesheet to convert the XML results of the DnD character creation data (below) into an SVG bar graph. At a minimum, your graph should include the X and Y axes with labels (with whatever labels you consider appropriate), as well as bars for the percentage of votes for each class. You should upload only your XSLT to CourseWeb; we do not need either the XML or the SVG that your XSLT generates. But be sure to open your output SVG in <oXygen/> to verify that the SVG is valid, and also in a browser to ensure that it looks the way you think it should look.

In the XML below, each element contains the raw number of created characters (you have to use XPath to calculate the percentages) each class received.

<classes>
    <class type="rogue">11307</class>
    <class type="wizard">9855</class>
    <class type="bard">7804</class>
    <class type="cleric">9009</class>
    <class type="ranger">8887</class>
    <class type="druid">6328</class>
    <class type="paladin">8840</class>
    <class type="barbarian">9063</class>
    <class type="warlock">8711</class>
    <class type="monk">7892</class>
    <class type="fighter">13906</class>
    <class type="sorcerer">7587</class>
</classes>

You may find it helpful to use variables to calculate percentages and other values needed for proper placement of your SVG objects.

Bonus options

If you have time after completing the basic task, you may enhance your XSLT in some of the following ways:

Easy enhancements

  1. Add grid lines for reference at regular intervals (at 10%, 20%, 30%, etc.; or at 25%, 50%, 75%, and 100%).
  2. Specify a background color or add other decorative effects.

More challenging enhancements

  1. If you labeled the classes by using the values of the @name attribute, you’ll have noticed that they begin with lowercase letters. Modify your graph to render the names legibly, attractively, and in a way that is consistent with human expectations.
  2. Use <xsl:sort> to change the order of the bars from the order in the XML (random) to popularity.
  3. Because you know there are only twelve classes and that no class can get more than 100% of the total, you can let XPath calculate the length of the X and Y axes, instead of hard-coding fixed values. This poll could have included 15 classes (if we include homebrew), and the next edition might include 25 or 50 or some other number. To make your XSLT more general, flexible, and adaptable, modify it so that the size of the graph (that is, the lengths of the X and Y axes, and the positioning of objects) is calculated from the data, so that the same XSLT would work if you had more classes.
  4. Use XSLT to color the bars according to their value. For example, make the largest one red, the smallest one green, and the default, the ones in the middle, blue. Or make them all the same color, but with different shading or intensity, with a vivid color for the most popular and a pale color for the least popular. If this is to be comparable to something you might do in Real Life, though, the color has to be determined programmatically by the relative numerical value (largest, smallest, other). If CSS pushes your geek buttons, we’re fans of specifying color programmatically with HSL, which you can begin to read about in the HSL section of https://css-tricks.com/nerds-guide-color-web/.