<oo>→<dh> Digital humanities

The task

You’ll be working with data from the Songs of Colonization project, which we’ve edited for the purposes of this test. You can download the XML from http://dh.obdurodon.org/colony-all-songs.xml. Your task is to create a stacked bar chart of instances of violence in the songs, represented in the markup by <violence> elements, which have @victim attributes. @victim can take one of three values: "settler", "native", and "ambiguous". Your chart should show the proportion of each of those values to the total instances of violence in each poem.

Your final SVG will look something like the graph below. Three distinct colors show the percentages of settler victims, ambiguous victims, and native victims.

General guidelines

• Before you submit your work, make sure both the XSLT and the SVG that it produces are valid. Open the output SVG in <oXygen/> and a browser, checking that all elements are visible in the viewport, and that nothing is getting cut off. If your graph does look clipped, double check the attribute value of @viewBox (see below).

• We recommend drawing your graph in the upper right quadrant (that is, with negative Y values) and using the @viewBox attribute on the <svg> element to make it visible. For a refresher on @viewBox, what it is, and how to use it, see http://dh.obdurodon.org/coordinate-tutorial.xhtml. (If you prefer to draw directly in the lower left you may do so, but we don’t recommend it. Although this may not seem to be the case initially, using @viewBox makes the arithmetic easier.)

• Make use of variables to avoid hard-coding values whenever that’s reasonable. You’ll end up with some hard-coded values, but if a value occurs multiple times throughout the document or if other values depend on it, place it in a variable. For example, because the length of the X axis will depend on the width of each individual bar, you’ll want to declare the bar width as a variable and refer to that variable when you compute the length of the axis. That way if you decide to change the bar width, the axis length will adjust itself automatically to match.

Required tasks

At minimum, your SVG must do the following:

• Every song must be represented on the graph.

• Not all three parts (settler, ambiguous, native) will be present in all bars, but the parts that are present need to be in a consistent order. In our example above (this is easiest to see with The buffalo hunters, since that’s the only bar with all three parts) the native proportions grow up from the X axis, settler proportions grow down from the top of the graph, and ambiguous proportions are situated in between. When stacked on top of each other, these bar segments will always reach the top of the graph, with no gaps or overlap, since the segments for each song (however many there may be) always total 100%.

• Use distinct colors for the rectangle that represent each of the three types of @victim values. These colors should have enough contrast to be clearly distinguishable from one another, especially because their edges will touch.

• Use attractive proportions. That’s a matter of personal taste, but as a guideline you’ll want to avoid extremely large or extremely small heights or widths.

• Labeling:

  • Give the graph a title. In our example above we labeled the graph Proportion of Victims.

  • Label each of the axes. In our example above we labeled the X axis Song and the Y axis % Instances of Violence.

  • Label each bar, that is, each song. Since the labels won’t fix horizontally, you can rotate the text 90º, write vertically, or rotate them more or less than 90º to slant them (which is what we did in the example above).

  • Plot X and Y axes plus a ruling line marking 50% on the Y axis. (We use just one ruling line because we measure both upward and downward on the Y axis, depending on the bar segment, but 50% is at the same position in both directions.)

How to approach placing ambiguous bars

We’ve asked that you position the bar segments in a consistent order, and in our example above our "native" bars rest at the bottom (that is, growing upwards) and the "settler" bars hang from the top (that is, growing downwards). Those are relatively easy to place, since you know the exact Y position of either the bottom (native) or top (settler) of those two bar segments. How about the middle bar segment, the "ambiguous" one? How do you know where it begins and ends?

You can take advantage here of the fact that SVG objects are rendered in the order in which they’re drawn. If you draw the ambiguous part of the bar first and make it the full height of the entire bar (that is, don’t compute the actual height of just the ambiguous portion; instead make it the full height of the entire bar), you can then draw the settler and native bars after it. Those other bars will mask the the overly long ambiguous bar where they overlap, and the ambiguous bar will be visible only where nothing is masking it. The process (steps 1 to 3, from left to right, should produce the result after the equal sign) is like:

Do a sanity check, though, and make sure that what you see looks consistent with what you expect!

Bonus tasks

• Create a key or legend that tells the viewer which attribute value each color corresponds to.
• Currently, every song title is rendered entirely in upper-case lettering, which combination of the upper-case(), lower-case(), and substring() functions to standardize the capitalization.
• Vary font size based on importance. For example, you could make the general graph title the largest text on the page and the song titles the smallest.