Using XML data to visualize the component types and ratios of content within a lesson
Conceptual goals
For this exercise I modified an existing XML file containing data on lessons within online course content for ALPECOLe (a SVC project at the University of Zürich for which I am working). The course includes mandatory and optional content. I wished to create a visualization of the proportion of mandatory vs. optional content using SVG and XSLT.
Technical goals
- Create a visualization of XML data using SVG and XSLT
- provide a simple graphical way of displaying the make up of each lesson
Process
Design:
The actual ALPECOLe course contains 30 lessons. For the purpose of this exercise I had to modify (add data) to the XML file, so I reduced it to 6 lessons. I opted for a simple bar showing the percentages of the mandatory vs. optional components of each lesson.
For the overall look I adopted the colour scheme from the ALPECOLe course to allow the users to recognize the interface as part of the course development environment.
Technical:
As a starting point I used the news example from DKS's presentation slides on SVG-XSLT. I adapted the corresponding xsl file adding rectangles, removing some unnecessary (for my purposes) variables and adapting the graphical elements.
Not being familiar enough with the XPath functions possible and the expressions used to access the desired data, I spent quite a bit of time trying calculations with the parameters I did know. With the help of DKS's forum answer and O'Reilly's online XML reference site, I was able to count the number of nodes in each <tree> element and the number of nodes that contained an attribute="circle" (= optional content pages). With the remaining nodes being mandatory, it was simple arithmetic to find the percentage of mandatory vs. optional components of each lesson and assign variables for each calculation ($perComp and $perOpt respectively).
I also had some difficulty with where to place the declaration and definition of the parameters I used, so that they could be accessed by the appropriate xsl template. Through some trial and error I finally figured out that parameters are declared within the template where they will be used and defined when the template is called.
Nesting an xsl:foreach element calling the node template that retrieved the values for $Ncircles and $Nnodes within an xsl:foreach element that in turn calls the tree template, provides the two loops necessary to get the values of each node, carry out the necessary calculations, pass the values to the SVG included in the tree template, and display each lesson's data.
To make the result cross-browser friendly, I used DKS's php script to process XSLT and generate SVG server-side. (One mildly gratifying part of the exercise was opening the resulting SVG file in Adobe Illustrator and finding a fully editable vector graphic file.)
Documents
welcome.html, percent.php (source), percent.xml, percent.xsl, percent.svg
References
- O'Reilly xml.com
- DKS's online presentation documents: Génération de graphismes vectoriels avec XSLT
- SVG examples at TECFA