This document discusses data-driven graphics on the web using Scalable Vector Graphics (SVG). It provides examples of using SVG to create interactive population pyramids from underlying demographic data. Population pyramids can be animated over time and allow users to hover over age groups to view exact data and calculations. SVG offers advantages over static images by allowing graphics to be dynamically generated and manipulated from linked data sources, enabling interactivity and timely updates.

1. DATA DRIVEN GRAPHICS ON THE WEB
Michael Neutze, Federal Statistical Office of Germany
Summary
There is no doubt that visualising data helps conveying messages and is much more than
merely advertising our products. But visualisation is usually created with only paper as output
medium in mind. It is often meant for passive consumption only. This is to change rapidly as
we will truly embrace the internet as our main publishing platform.
In this paper the combined benefits of the internet as a dissemination medium, visualisation
techniques, interactivity, animation and underlying databases are presented for what we call
“data driven graphics”. This can either mean statistical diagrams within websites that are
dynamically drawn from data(bases) but can also include visual clues for data retrieval, e.g.
selecting areas on a map for further tabulation. Timeliness of publication with very little
incremental costs are key advantages of this approach.
Thematic mapping as well as animated population pyramids are prominent examples of
making huge amounts of data accessible. Here the understanding of underlying structures or
mechanisms benefits most from these visualisation techniques as standard desktop
applications are not able to produce those. Making these dynamic diagrams available on the
web encourages the user to interactively explore data in a playful way.
The core technology used for these data driven graphics is called Scalable Vector Graphics
(SVG), which is a an XML based open standard for drawing on the web. Roughly speaking,
SVG is for graphics what HTML is for text. It offers animation, interactivity and can be
linked to data in several ways. The presentation will show recent additions to the Federal
Statistical Office’s website as well as further proof of concepts.
Customer feedback already is very positive and developments have already been shared
between National Statistical Institutes (NSIs).
1. VISUALISING DATA
Why visualising data
It seems so obvious why we want to visualise data but nevertheless we should be clear about
the reasoning for it at first to fully understand the implications. Graphics are much more than
an entertaining aspect to otherwise boring data. Visualisation helps speeding up the
understanding of underlying structures and increases the memorizing of facts, the same way
that we are more likely to remember a face than a name.
To do this statistical graphics must reduce complexity. They tell a story that summarizes some
aspects of the data. Naturally there is an editorial process involved here for the data doesn’t

2. contain these stories in itself. Thus if we are talking about data driven graphics this does not
imply something that our spreadsheet software offers when it makes diagrams from any
selected data points.
In this paper we want to present some handcrafted statistical graphics in a sense that the
graphic was designed to best convey the story for the given topic. This applies to the
graphical design as well as to the interactivity and animation that will be added
programmatically. In contrast a pie chart wouldn't benefit anything from being animated.
Output media
There is sufficient literature available on statistical graphics with some basic ideas circling
around the thoughts of TUFTE (1983). But this school of thought is mostly limited to printed
media and stating the shortcomings of computer displays. On the other hand statistical
graphics can benefit vastly by applying animation, interactivity and database access. Until
recently due to a lack of suitable technology, animation, interactivity and database access was
difficult to implement. This is now to change and the case studies presented here should
prompt for new ideas in data visualisation.
Once interactivity is added to statistical graphics new expertise is needed. While visualisation
in itself is a cross-sectional duty involving statisticians and designers the additional expertise
needed is something like user interface design (see RASKIN 2000). Interactive diagrams share
some usability challenges that software applications face.
2. A NEW GRAPHICS FILE-FORMAT: SCALABLE VECTOR GRAPHICS
(SVG)
Graphics on the web
The way we know graphics on the web right now are pixel based files. Technically there is no
difference between a photograph and a statistical diagram. But unlike photos statistical
diagrams can be conceptualised much easier using vectors than using pixels. Thinking of a
time series with 12 data points e.g. for every month in a year, a statistical diagram depicting
this wouldn’t need much more than exactly these 12 “coordinates” plus some styling
information.
Graphics on the web have long suffered from the low resolution of computer screens as well
as the bandwidth constraints of internet connections. Typically you could either have more
detailed graphics invoking longer load times or you were forced to simplify your diagrams for
use on websites.
The importance of data driven Graphics
Most of the statistical diagrams we are using are based on data that is updated frequently.
Here the need arises to update the diagrams accordingly with as little human intervention as
possible. At the Federal Statistical Office we are for example using the SAS software package
to produce time series graphics for economic indicators. This is done in batch mode once the
data is updated and the graphics are than available from our website as static pixel based

3. images.
Although this is a possible way the diagrams aren't really linked to the data they are depicting.
To retrieve the exact values you have to navigate to the accompanying table. There is no
interactivity possible with this approach.
Scalable Vector Graphics (SVG)
For the basic understanding of the advantages SVG offers for data driven graphics, one can
think of it as “HTML for Graphics”. This means, it is a text based format that allows vector
drawings on web pages. Most importantly these vector drawings can be manipulated with
scripting languages like JavaScript which allows for interactivity. Like HTML Scalable
Vector Graphics is an official W3C recommendation. This means you can use the format for
free, write it with a text editor or programmatically from your workflow. As an open standard
your are not tied to a specific vendor and their licensing policy. As a text based format SVG is
searchable and well prepared for the demands of accessibility, something that gets more
important for official bodies every day.
SVG is XML based and integrates with all the current web technologies. Apart from scripting
the use of cascading style sheets should be mentioned in this context. This means that people
with some understanding of web technologies can adapt this technology easily. GIS software
like ArcView (from ESRI) and drawing software like Adobe Illustrator among others allow
the handling of the SVG file format. Nevertheless those applications usually only support
exporting static files into SVG while the interactivity and data connection that this paper will
discuss further is mostly hand coded.
Unlike HTML browsers don't have the ability yet to display SVG based graphics but have to
rely on an additional piece of software called plug-in. Currently the free SVG plug-in from
Adobe is the most advanced and most widely distributed. Nevertheless the distribution level
of the plug-in is low compared to similar technologies like Macromedia's Flash.
3. CASE STUDIES
Population Pyramids
Population pyramids serve as a perfect example for data driven graphics. First of all they are a
very efficient means of data visualisation. Even in their static form they usually represent 200
data points (100 age bands for men and women) and tell a very comprehensive story of the
demographic structure. This diagram type is not supported by ordinary office software and
usually requires specialised software or extensive manipulation with drawing software.
Moreover demographic changes or population projections can be best understood when using
a sequence of population pyramids which ideally form an animation. Population data is
usually available for comparatively long times series. So once you have established one data
driven population pyramid an animation can be achieved with only little extra work.
On the occasion of the 10th coordinated population projection in Germany in June 2003 the
Federal Statistical Office provided animated population pyramids on the web using Scalable
Vector Graphics. With data reaching back till 1950 and a projection target of 2050 a very

4. detailed picture of the demographic history and coming future of Germany could be drawn.
The basic version of these animated population pyramids allows the automated playback over
time in different speeds. The user may stop the animation at any given time or scroll back and
forth through time using a slider at the bottom of the pyramid. But these animated population
pyramids are much more than simply 100 pyramids shown one after the other. Since it is
really the data that changes the graph, the graph can also be used to reveal the exact
underlying data or even perform calculations with the data.
The first use of this is implemented with a mouse over event. When you hover over the
pyramid with the mouse, the age year you are hovering over will be highlighted and the
underlying data displayed (see fig. 1). From this data the birth year of this age group at the
displayed year will automatically be calculated. This is a much needed hint for interpretation
of relatively small or large age groups (typically the consequences of the wars or the effects of
the baby boomer generation come to mind).
Figure 1: Screenshot of the animated population pyramid
Furthermore sub-groups and their share of the overall population can be calculated and
displayed. The exact same dataset without further modifications allows to display the sex-
ratio, you can highlight surplus of men or women or the women of child bearing age. Finally
old-age dependency ratios for different age limits can be calculated and displayed (see fig. 2).

5. Figure 2: Old-age dependency ratio for different age limits
Thematic Mapping
Even higher information densities are associated with thematic maps. For the European
Election in June 2004 data for Germany was processed on a regional level of 439 areas
(“Kreise” and “kreisfreie Städte”). Here regional patterns und underlying structures are not
visible from mere tabulated data and drawing thematic maps usually requires some expertise
and often expensive GIS software.
Again with the use of SVG thematic mapping could be made available on the web for
everyone to explore regional data. Starting in March 2004 the Federal Returning Officer
published demographic and economic data on a regional level in preparation for the election.
With the interactive map (seen in fig. 3) variables like population density, percentage of
foreigners or unemployment rate can be displayed. Again with hovering over the map, the
name and value for the specific area will be shown plus the election result for the five biggest
parties. Since the data for this map is provided in an external CSV-like dataset (a text file)
updating the map is possible within minutes. When the election results were available in the
early morning hours after election day the updated map was available as well.
Thematic maps are easily understood but can also be very suggestive. The crucial factor is the
setting of data ranges. Also certain themes are associated with specific colour schemes. In a
map displaying unemployment with a green colour would usually be associated with low
values whereas in a map with an agricultural theme green might depict high values. As far as
the ranges are of concern methods of equal distances or quantiles can be used as mathematical
formulas but above all editorial choices might be useful. Here the interactivity of these maps

6. comes to its full potential. By choosing a map it will be instantly shown in a useful manner
with a preset of ranges and colours that fits the data according to decisions of an editorial
team. But from there the user can change these presets and thus get a deeper understanding of
the data or just fit the display to his or her viewing habits (e.g. colour deficiencies). Last but
not least the map can be zoomed for detailed analysis of only parts of the country.
Figure 3: Interactive map with unemployment rate.
This map currently provides 16 different variables to be mapped. The files needed for this
map have a size of 190kB altogether which can be downloaded even over slow internet
connections in a matter of seconds. The file size is mainly dependent on the detail of the map
boundaries, the dataset is only 20kB. Once the map is loaded, no internet connection is
necessary. All the interactivity is completely client side. Responsiveness of the application is
thus solely dependent on the performance of the user's PC.
To cater for situations where there is no internet connectivity we usually try to provide
versions of these interactive graphics for offline use. In the case of these thematic maps we
are providing them as interactive PDF files. The PDF format allows the inclusion of SVG
content (requires Version 6 of the free Adobe Reader).
4. OUTLOOK
Current project: Regional Statistics Atlas
The above mentioned case studies qualify for good examples of data driven graphics.
Nevertheless they are all standalone projects in that they rely on a static dataset that has to be
provided in a defined manner. For the above examples this is no major drawback since

7. population projections are published only every three years and European Elections are hold
every five years.
For larger datasets and more frequent updating obviously a connection to a database is
necessary. This is where our current project of a Regional Statistics Atlas is heading for. The
aim is to make available roughly 100 maps in its initial phase and make it easy for further
expanding. The technology described so far is perfectly suited for this. Instead of having all
the data available within the map the coming project (as seen in fig. 4) will query a MySQL
database.
Figure 4: Screenshot of the Regional Statistics Atlas (Prototype)
This online atlas will go live in October this year and will also provide advanced features for
data analysis e.g. a histogram as well as advanced mapping features like relief shading, rivers
and capital cities.
Proliferation and acceptance of SVG as a web technology
From what we have elaborated so far, Scalable Vector Graphics are perfectly suited to the
needs of statistical diagrams and can drive them to a new level. However it is still a rather
new technology and you must not assume that users have the correct plug-in installed. We
also see quite a lot of people failing to install the plug-in properly. This often leads to the
question of how to evaluate SVG in terms of user friendliness.
Users should get some idea of what to expect in an overview page that doesn’t yet require any
plug-in. If they then feel interested enough they should be provided with information what
this new technology is about, where they can get the plug-in and how to install it. Finally a
functional e-mail adress for technical support should be made available.

8. There is also no doubt that the SVG technology can only be used as an additional means of
visualisation on the web as the plug-in proliferation will probably remain low for some time.
It is not clear right now if native browser support for SVG will come one day or if a major
software company will promote SVG heavily. But the technology is easy to implement and
offers a lot of benefits for the time being. Already a lot of NSIs have adapted the population
pyramids to their data.
REFERENCES
Print
1. Cagle, Kurt : SVG Programming, APress 2002.
2. Laaker, M.: Sams teach yourself SVG in 24 hours, Indianapolis 2002.
3. Raskin, Jef: The Humane Interface, Boston 2000.
4. Tufte, Edward: The Visual Display of Quantitative Information, Connecticut 1983.
5. Watt, A.H./Lilley, C. et al.: SVG unleashed, Indianapolis 2002.
Internet
Overview
http://www.w3.org/Graphics/SVG/
http://www.carto.net
Discussion Group
http://groups.yahoo.com/group/svg-developers/
Examples
http://www.destatis.de/basis/e/bevoe/bev_svg2.htm
http://www.bundeswahlleiter.de/wahlen/europawahl2004/informationen/svg/index.html
http://www.bundeswahlleiter.de/wahlen/europawahl2004/informationen/ergebnisse/
http://www.statistics.gov.uk/about/methodology_by_theme/area_classification/default.asp
Feedback
michael.neutze@destatis.de