<oo>→<dh> Digital humanities

Maintained by: David J. Birnbaum (djbpitt@gmail.com) Last modified: 2021-12-27T22:03:54+0000

SVG assignment 2

The text

For this homework we will be working with a small list of Greek dramas, available at http://dh.obdurodon.org/greekDrama.xml. There is a <metaData> element at the top that carries the labels for the columns. The rest of the document consists of <play> elements, each of which lists the genre, author, title, year, id (an arbitrary number), and length (in words) of the play.

The SVG output

Your task is to write XSLT that will generate a graph to explore trends in word count over time. You should arrange the plays chronologically along the X axis and plot the word count on the Y axis. You should also attach a label to each point on the chart indicating the title and year of the play. Our initial output (see also the enhanced version below) looks like:

Our output consists of SVG <circle> and <text> elements. As with the stooge bar chart in class, we drew the image in the upper right quadrant my using negative y coordinates and then shifted everything down into the lower right quadrant with the @transform="translate(x,y)" attribute. To rotate the text we assigned an attribute transform="rotate(1 2 3)" to the <text> elements, where the first parameter in rotate() represents the number of degrees to rotate the text and the other two represent the X and Y coordinates around which to perform the rotation. Don’t type 1 2 3! Those are placeholders; you have to determine your own values based on how much you want to rotate the text and what you want to rotate it around. Experiment with different values to see the results. You can rotate anything, by the way, not just text; see, for example, http://www.svgbasics.com/rotate.html.

Feel free to tinker with the presentational details of your SVG as long as you are producing a comparable representation of the same information.

The XSLT

As with the stooge transformation we did in class, our XSLT consists of a single template rule for the document node, which contains a single <xsl:for-each> element that collects the plays for pull processing. We use <xsl:sort> to sort the set of plays by year, calculate the x and y coordinates, and draw a circle with a small radius at the appropriate position, along with the rotated title and year of the play.

For additional SVG practice

For additional SVG practice, you might want to draw the X and Y axes, label them (years on the x axis and word counts on the y), and perhaps draw faint horizontal lines at regular, periodic heights.

Addendum

Finding ourselves with time to kill, we enhanced the output in several ways. First, we added x and y axes, both with value labels, as well as horizontal grid lines. Note that the grid lines are gray, rather than black, which lets them fulfill their purpose (helping the user to identify the values of the dots) without being overly obtrusive. In our original image, above, we spaced the plays evenly along the X axis. This misrepresents the timeline because some plays were written in the same year and others are separated by a variable number of years, which means that in the first image, the horizontal spacing is not proportional to the chronological distribution of the plays. In the new image, below, we space the plays in a way that is proportional to the amount of time between the years when they were written. For example, the horizontal distance between Heracles (written in 422) and Hecuba (425), written three years apart from each other, is three times as large as the space between The suppliants (421) and Heracles (422), written one year apart from each other.

The change in graphing required, in turn, that we change the way we present the textual information about the play, since with multiple plays in the same year, the original display strategy would have produced overlapping (illegible) text. We opted to put the textual information in a tool tip instead of displaying it directly; if you mouse over one of the dots and hover there, the title, author, year, and word count will materialize. We also color-coded the dots: plays by Euripides are blue, those by Sophocles are red, and those by Aeschylus are green.

This solution is not ideal for at least three reasons: 1) the hover target is small and difficult to hit with the mouse cursor, 2) there is nothing analogous to mouseover or hover events on touch devices, and 3) tool tips fade on their own after a brief interval, which may require a user who hasn’t finished reading to mouse out and mouse in again. The graph could also be improved by generating the horizontal coordinates as percentages, rather than fixed values, which would enable the entire image to resize, rather than truncate, when the user resizes the browser window.

The new graph is:

The new graph seems to suggest that there may be a modest trend over time in favor of shorter plays. If that’s the case, an additional enhancement to the chart might be a statistical analysis of the apparent relationship between year of composition and length, and, if appropriate, the plotting of a regression line.