Digital humanities


Maintained by: David J. Birnbaum (djbpitt@gmail.com) [Creative Commons BY-NC-SA 3.0 Unported License] Last modified: 2022-04-15T13:43:10+0000


Text #5: XSLT

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.

50% Proportion of Victims % Instances of Violence Song Settler Ambiguous Native THE BUFFALO HUNTERS THE COWMAN'S PRAYER HERE'S TO THE RANGER! TEXAS RANGERS SIOUX INDIANS THE OLD SCOUT'S LAMENT SCHUTZTRUPPENLIED

General guidelines

Required tasks

At minimum, your SVG must do the following:

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:

1 + 2 + 3 =

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

Bonus tasks