The Visual Display of Quantitative XML

• Number and type of hits registered in a server log;
• Percentage of sales by an individual on an annual sales report;
• Number of technical books vs. the total book count in a book list (almost every XML book in the world has that example);
• Proportion of annotations per paragraph in a DocBook article

While quantitative XML data is everywhere, a less common thing to find is examples of effective ways to display such information. Most resources will merely show you how to use XSLT to convert XML data to HTML, which is often not nearly enough when you need to explain complex or large sets of data (see Figure 1). This article discusses the creation of useful graphical presentations of quantitative XML data using XSLT and SVG.

Figure 1: Outer Planet Orbits -- sometimes graphics are the only way to rapidly consume complex and/or large information.

By using the Scalable Vector Graphics (SVG) language, we can create effective, attractive, and reusable visual representations of quantitative data for the Web. In what follows I discuss the principles and implementation of XSLT stylesheets that generate SVG output based on XML input, using as my example the location of establishments in an imaginary city.

A number of important technical graphic design principles are discussed along the way, but previous experience in the field isn't required, just a basic knowledge of XSLT. All examples include links to code commented in greater detail.

The principles of graphic excellence in this article are not new and certainly not my invention. They are a small subset adapted to the XSLT-SVG world, mainly from Edward Tufte's The Visual Display of Quantitative Information. I recommend you check the references provided if you are interested in this subject.

Setting up the Development Environment

You'll need an XSLT engine to transform the source data and an SVG viewer so that you can see the fruits of your work. There are several options for each and the examples will work with any compliant tool (see Antoine Quint's article on SVG tools for a list of current SVG viewers). For this article I will be using Xalan as the XSLT engine and the Adobe SVG viewer plug-in.

Night and the City

Post your questions or comments here in our forum.

Post your comments

Online City guides often give their users quantitative data about restaurants and clubs in the form of text. A typical result page includes information such as the address and name of the club, plus an average user review. While this information is very useful for direct searches, an individual page per place with such data is not the best tool when you don't know your destination, or when you want to ask questions like "which areas have a higher concentration of highly-rated bars?"

Some of the most useful graphics are those that present many variables simultaneously so I have chosen for our exercise the problem of representing the location, popularity, name, type of establishment, address, and rating of the night-time attractions in a hypothetical city.

Our goal is to display multiple variables in an accessible and economic manner. The graphic most show position, type, name, and popularity information for over a dozen places in a 290 x 210 pixel area, plus enhance the original data by providing easy visual comparisons and answers to questions like that above. The final SVG result is shown in Figure 2 (make sure you have the Adobe plug-in).

This example is meant to illustrate the first rule for creating graphics from XML data: avoid superfluousness. Graphics are a great way to manipulate and show data, but they are no better than a table or text if the data is not worth a diagram. Sometimes you have to mix text and graphics, but sometimes you have to drop graphics altogether, if they add no value.

Before we start coding a transformation, let's see the data we will be using as a source for our graphic, in listing 1.

Listing 1. A Peek Into The Source Data

(full source)

<?xml version="1.0"?>



<!-- This document summarizes data information

about the popularity and average occupancy during

weekends for the restaurants and clubs in the west

side of Boggenburgh. (this information, including

the name of the city, is of course fictitious -->



<night_attractions>

  <head>

   <city>Boggenburgh</city>

   <neighborhood>North West Side</neighborhood>

   <month>06</month>

   <year>2002</year>

  </head>

  <entries>

    <attraction type="bar">

      <name>Moe's</name>

      <abbrev_address>

         <number>2900</number>

         <street quad="NW">8</street>

      </abbrev_address>

      <average_rating>4</average_rating>

      <average_occupants>70</average_occupants>

    </attraction>



    <attraction type="restaurant">

      <name>Lou's Tavern</name>

      <abbrev_address>

         <number>2803</number>

         <street quad="NW">8</street>

      </abbrev_address>

      <average_rating>5</average_rating>

      <average_occupants>70</average_occupants>

    </attraction>

   </entries>

  <!-- many more entries here -->

</night_attractions>

Now that we have data worthy of be shown as a graphic, we will decompose each part of the solution into an SVG component and see how to generate it using XSLT.

[1] [2] [3] [4] Next