Digital humanities


Maintained by: David J. Birnbaum (djbpitt@gmail.com) [Creative Commons BY-NC-SA 3.0 Unported License] Last modified: 2019-04-10T20:47:34+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 this one is much more serious than stooges: Best Pasta of All Time. 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 pasta poll (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 pasta. 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 number of raw votes (you have to use XPath to calculate the percentages) each pasta received.

<pasta_poll_results>
    <pasta type="angel_hair">390</pasta>
    <pasta type="elbow_macaroni">10</pasta>
    <pasta type="farfalle">80</pasta>
    <pasta type="fettuccine">200</pasta>
    <pasta type="fusilli">80</pasta>
    <pasta type="linguine">200</pasta>
    <pasta type="pappardelle">180</pasta>
    <pasta type="penne">190</pasta>
    <pasta type="rigatoni">100</pasta>
    <pasta type="spaghetti">130</pasta>
</pasta_poll_results>

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 pastas by using the values of the @type attribute, you’ll have noticed that they begin with lowercase letters, that most have an underscore in the name instead of the space that humans expect, and that placing the names may be awkward because of their length. 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 (alphabetical) to popularity.
  3. Because you know there are only ten pastas and that no pasta can get more than 100% of the vote, 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 pastas, and the next pasta poll 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 pastas.
  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/.