Digital humanities


Maintained by: David J. Birnbaum (djbpitt@gmail.com) [Creative Commons BY-NC-SA 3.0 Unported License] Last modified: 2018-04-02T21:20:00+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 for real: recently IMDb polled its readers about their favorite movie 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 movie 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 top-ten votes for each movie. You should upload only your XSLT to CourseWeb; we do not need either the XML or the SVG that your XSLT generates.

In the XML below, each element contains the number of raw votes each movie received.

<results>
    <src>http://www.imdb.com/poll/bXjZP5g0Kp4/results?ref_=po_sr</src>
    <movie name="the_godfather">281</movie>
    <movie name="pulp_fiction">197</movie>
    <movie name="gladiator">113</movie>
    <movie name="apocalypse_now">85</movie>
    <movie name="goodfellas">85</movie>
    <movie name="the_godfather_part_2">78</movie>
    <movie name="jaws">73</movie>
    <movie name="taxi_driver">69</movie>
    <movie name="wizard_of_oz">66</movie>
    <movie name="life_is_beautiful">55</movie>
</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 movies by using the values of the @name 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 (popularity) to alphabetical.
  3. When we alphabetize by title, we usually don’t include a leading definite article in the alphabetizing. Improve your sorting, above, so that it ignores a leading “The ”.
  4. Because you know there are only ten movies and that nobody can get more than 100% of the vote, you can code specific values to determine the length of the X and Y axes. This poll actually included 35 movies, and the next 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) are calculated from the data, so that the same XSLT would work if you had more movies.
  5. 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).