Digital humanities

Maintained by: David J. Birnbaum ( [Creative Commons BY-NC-SA 3.0 Unported License] Last modified: 2021-04-16T15:57:54+0000

Test #7: SVG

The task

Your second SVG assignment asked you to generate a graph of presidential election results, by using an XSLT document to transform XML to SVG. This task is similar, except the input is XML from the Edgar Allan Poe project, completed for this course in Spring 2019. The input XML is available at The team marked up Poe’s corpus for parts of speech, with attributes denoting whether words refer to opening or closing, as in the excerpt below.

    <lb/>I stand amid the roar
    <lb/>Of a surf-tormented shore,
    <lb/>And I hold <prep value="closed">within</prep> my hand
    <lb/>Grains of the golden sand--
    <lb/>How few! yet how they creep
    <lb/>Through my fingers to the <noun value="closed">deep</noun>
    <lb/>While I weep--while I weep!
    <lb/>O <noun value="open">God</noun>! can I not <verb value="closed">grasp</verb>
    <lb/>Them with a <adj value="closed">tighter</adj<; <noun value="closed">clasp</noun>?
    <lb/>O <noun value="open">God</noun>! can I not save
    <lb/>One from the pitiless wave?
    <lb/>Is all that we see or seem
    <lb/>But a dream <prep value="open">within</prep> a dream?

The possible tags for parts of speech are <prep>, <verb>, <noun>, <adj>, <ref>, and <adv>. Each of these has a @value attribute with a value equal to either "open" or "closed". For the main task, we’re asking you to create a bar graph displaying the total number of "open" words, no matter their part of speech, broken down by poem.

Required output features

Your SVG must be valid and contain the following:

  1. Bars for each of the five poems in the input XML, whose heights corresponds to the number of "open" words in each of them. Bars must grow up from the X axis, not down from the top.
  2. Labels! We should know what we’re looking at when we see your output, so be sure to label the graph itself and the X and Y axes. Bars should also be labeled with the name of the corresponding poem. (Hint: The input <title> element contains the full title of the poem in a legible format. For long titles, try rotating the text using @transform or displaying the title from top to bottom, instead of left to right.) Don’t be this person:!
  3. Ruling lines with corresponding values listed along the Y axis. These lines should somehow look different from the axes (i.e., a different color, a dashed line instead of a solid line, etc.).

Bonus tasks

You can make these enhancements to your graph to earn extra credit:

  1. Incorporate bars for the "closed" words into this same graph. You can do that in a number of ways, including a stacked bar chart and a grouped bar chart. What’s important is that you show both sets of data on the same graph; don’t just make a separate one!
  2. Style the SVG using different fonts, background colors, fill colors, etc. If you tried the preceding bonus task, be sure to style open and closed data so that they’re visually distinguishable, and incorporate a legend that indicates which color refers to "open" values and which to "closed".
  3. Use <xsl:sort> to order the bars according to the date of the poem. (In the XML input, the poems are in alpabetical order according to title.)