Stirring XML: Visualisations in SVG

Jung, B., Brohan, J., Maher, R., O'Shea, L.J., Lynch, P.J., Wade, V.
Department of Computer Science
Trinity College Dublin, Dublin/Ireland

"A picture says more than a thousand words" (ancient proverb)

XML vocabularies aren't much good for human viewing and navigating; they shouldn't be and that is good so. The idea of separating content from its presentation information was one of the key aspects in developing XML and its supporting technologies such as e.g. XSL. Nevertheless, most of today's XML vocabulary visualisations are intra-media transformations, e.g. from a text-based format to a text-based format. Future transformations will include inter-media types, e.g. from text-to-graphic or text-to-audio. What role can SVG play in these scenarios?

This paper presents four assignments related to visualisations in SVG. They were undertaken in the last two years at the Department of Computer Science, Trinity College Dublin, Ireland and submitted as BSc Final Year Thesis's.


screenshot CALS2SVGThe availability of highly functional text-processors and spreadsheets offers dynamic and on-the-fly conversion of tabular data into diagrams "at our fingertips". Changes within the table are reflected immediately in the charts; Chart-types, -orientation and additional information such as axes and data captions can be altered by a click. But, tabular data is often kept in a proprietary format, which makes data exchange only possible by ex- and import of the table structure, formulas and values. The open and widely accepted SGML/XML vocabulary CALS (Computer Aided Logistic Support, Continuous Acquisition & Life-Cycle Support) has been in use since a long time, firstly in combination with SGML and more recently with XML documents. Nevertheless, a graphical representation of tabular data in CALS format is not known of.

The CALS2SVG application creates instant SVG images from tables using the CALS vocabulary. A number of user-specific properties can be set before the conversion process. Due to the complexity of generating charts from a CALS tabular file format, the author decided in favour of a Java Transformation Engine (JTE) rather than a plain XSLT transformation.


screenshot BioML2SVGData from Genetics projects such as the Human Genome Project are publicly available from databases worldwide. Navigating the DNA sequences by means of the raw data files, which are offered in a number of XML vocabularies, is nearly impossible without the help of graphical representations and/or dedicated user interfaces. The use of XML and related technologies from the XML family imposes alternatives to proprietary GENOM viewers.

The BioML2SVG XSL transformations generate (two-dimensional) SVG images from a BioML data file. Using the accompanied Java application, the user can select a specific gene and DNA fragment for conversion. Each image can be customised with additional information such as location numbers, secondary structure elements (e.g. alpha helix), amino acid properties and 3D structural elements (e.g. disulfide bonds).


screenshot MusicML2SVGPhysically separating content from its presentation information is one often referenced advantage for multi-media visualisation support. This concept supports the idea of an centralised storage container for the content and a number of transformation files to create customised user- and/or application specific representations of the content. In the world of music, the content is hold in a document containing descriptions of the composition (e.g. MusicML), which could be visualised by sheet music (e.g. SVG) or converted into an audio format (e.g. MPEG).

The MusicML2SVG project investigated the first step, the use of XSL transformations in the process of converting files from a non-proprietary XML vocabulary for music notation (MusicML) into sheet music visualisations (SVG). It turned out that the layout and physical placement of musical components (e.g. notes, measures and key-signatures) are very difficult and mathematically challenging. A small set of XSL transformations were developed to showcase results and feasibility.

User Interfaces in SVG

screenshot UserInterfacesInSVGRecent developments show that SVG is more than a graphics format. Its powerful features, but especially the strong scripting functionality, categorises SVG as superior to images. Some go further in describing it as a platform- and system-independent client or even a stand-alone application. Undoubtedly, flexible SVG user-interfaces will sooner or later replace operating-system proprietary application front-ends, but hasn't it already started on the web?

Park-Pay-Go is a web-based server-client application to locate and pay parking spaces in Dublin/Ireland. The server-side implementation includes technologies such as databases and scripts/servlets for business logic and data access. The client is written entirely in SVG, i.e. all static and dynamic user-interface-screens as well as simple business logic is contained within the image.

Valid XHTML 1.1!