JavaScript and SVG Visualization Fun

[ebeshero]

Here's a JavaScript-animated SVG visualization of how several medieval source witnesses relate to one other. Each column represents a distinct manuscript edition, and the little rectangles inside represent specific segments that vary in order over the different editions:

http://repertorium.obdurodon.org/dev/test.xhtml?lg=bg

I suspect we may be able to do something similar to help summarize the major units of variation, something to help supplement @haggis78 's stemma graph. Warning: this will be some new JavaScript for all of us, but @djbpitt may be able to help us if we get stuck. :-)

[ebeshero]

Notice how the JavaScript works: Click a column, and try dragging it around the screen: You can choose to align any one witness against any of the others, and the SVG lines are redrawn to point to the corresponding units in the neighboring witnesses.

[djbpitt]

@ebeshero As you note, the JavaScript support is for drag and drop. To make it work, grab the little crosses at the tops of the columns and slide them left and right. The JavaScript handles the dragging and dropping, and also redraws the connecting lines when one column is dragged across another. The Good News for new learners is that the visualization doesn't depend on JavaScript; the original SVG was drawn entirely with XQuery, and it's quite useful as a tool for philological exploration even without the drag and drop.

When I first implemented it there was no such thing as XQuery, so I used XSLT to create the plectograms, and the images at that point were static, without drag and drop (and without JavaScript). My first publication about how we use the technology in research is available (pre-print) at http://obdurodon.org/djb/2003_ljubljana_paper.pdf; it was published in Scripta & e-Scripta, Vol 1 (2003), pp. 15–64.