Digital humanities

Maintained by: David J. Birnbaum ( [Creative Commons BY-NC-SA 3.0 Unported License] Last modified: 2021-04-14T01:52:30+0000

SVG assignment #3

The task

Your task for this assignment is to write XSLT that creates an SVG chart or graph from real XML input that is part of your own project. The specific input data and the specific type of graph or chart you create as output are up to you; the output does not have to be SVG that you intend to include in your project site (although it can be), but it must use your data. This is an individual assignment, so while it’s fine (and natural) for just one member of your team to create SVG for the site, all students should create something for this assignment.

Your input can be either a single XML file from your project or multiple files, and if you want to aggregate data from multiple files, you can read them into a variable by using the XPath collection() function. If you’d like to do that and need help getting started with collection(), post an inquiry in Slack and we’ll be happy to walk you through it. But working with a single XML file is fine, too, so nobody is obligated or expected to use collection() unless they want to.

What type of chart of graph should I create?

You’re welcome to create a bar chart (regular, compound, stacked, etc.), which is probably going to be the easiest type of visualization because you’ve already practiced creating bar charts. But some other common types include that can be made with SVG elements you’ve already practiced are:

Where should I Look Stuff Up?

The Visualization section of our main course page has links to visualization galleries, if you’d like to browse for additional types of charts or graphs that you think might be useful in your project. Choose a visualization, whether a common one like a bar graph or something exotic, based on the type of data you want to represent (how many variables? are they numeric or textual? etc.).

w3schools is a good basic reference, but for more detailed SVG information we usually turn to Jakob Jenkov’s SVG tutorial pages and the SVG section of the Mozilla Developer Network.

What to submit

You should upload the XSLT you write and the XML that you use as input. Do not upload the SVG created by your XSLT; we will run the transformation ourselves.

What to watch out for