[Image of Disney princesses]

Digital humanities


Maintained by: David J. Birnbaum (djbpitt@gmail.com) [Creative Commons BY-NC-SA 3.0 Unported License] Last modified: 2017-03-31T15:05:41+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: with the recent release of Disney's live action Beauty and the Beast, Buzzfeed polled its readers about their favorite Disney princess. The poll's 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 princess 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 princess. 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 princess received.

<results>
    <princess name="mulan">18400</princess>
    <princess name="ariel">24100</princess>
    <princess name="merida">5736</princess>
    <princess name="pocahontas">8621</princess>
    <princess name="aurora">9554</princess>
    <princess name="rapunzel">12900</princess>
    <princess name="cinderella">7537</princess>
    <princess name="elsa">6292</princess>
    <princess name="tiana">4512</princess>
    <princess name="belle">25800</princess>
    <princess name="snow_white">2824</princess>
    <princess name="anna">3756</princess>
    <princess name="jasmine">10500</princess>
</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 princesses by using the values of the @name attribute, you’ll have noticed that they begin with lowercase letters, that Snow White has an underscore in her 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 princess bars from the order in the XML (random) to either popularity (most to least popular) or alphabetical.
  3. Because you know there are only thirteen princesses 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 did not include Moana (a true injustice in our opinion!), so perhaps a future version of your graph will need to consider more princesses. And someday you may want to graph not percentages, but raw votes. 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 princesses and if you wanted to graph raw votes, rather than percentages.
  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 by the relative numerical value (largest, smallest, other). Consider assigning the fill based on the position of the princess as we did in class earlier this week.