We have created an SVG timeline with XQuery from the Digital Mitford letters collection stored in our eXist database. This is actually multiple timelines combined: One represents a total quantity of letters encoded in each year, and the others represent data about the timespans associated with specific correspondents in the collection.

We embedded this SVG in an HTML document, and associated it with CSS and JavaScript in order to control its layout and interactivity.

Step by step

Here is how we put the pieces together.

Details

XQuery to output HTML with SVG

Optimally, we want to generate our HTML page with SVG set within it, so that the same XQuery functions generate the entire page. This is a bit of a challenge for outputting code when working within multiple namespaces. Remember that we need to apply Q{} in XPath within code writtin in a different namespace, when you need to pull-process data from your project code.

CSS and JavaScript Walk-through

In your JavaScript you will likely be doing some familiar things you have already tried, but you will face new challenges, too. Think about what needs to happen in sequence: