Technical description and commentary on the making of the interactive document

Technical description and commentary on the making of the interactive document
“The population of the regions of Russia in the 2002 census”

This document was also intended to demonstrate the possibilities of interactive cartography on the Internet using the Scalable Vector Graphics (SVG) format. Interactive cartography has been chosen here not only for its capacity to display cartographic analysis, but also to provide the accessible and reusable means for instantaneous, automatic cartography and for the exploration of data. The format chosen for this example - SVG - is the standard, recommended by the World Wide Web Consortium for interactive vectorial graphics on the Internet, in other words, theoretically a natural choice for online cartography. The standard is well implemented today; the most common Internet browsers offer SVG compatibility - currently, through the use of free plug-ins (cf. annexed list and addresses). Practically speaking, an SVG file is read by the browser, which then interprets the commands in it to illustrate graphics on the screen and implement the given interactive functions. It must be specified that the resulting document was inspired by the demonstration document created by Andreas Neumann (Institute of Cartography, ETH Hoenggerberg, CH-8093 Zurich) on Vienna, picking up where it left off and developing it further. This document is a wonderful example of interactive cartography in SVG format, from which we have reworked certain of the interactivity scripts. This example is included in the projects presented on the site www.carto.net, dedicated to online cartography and full of useful resources - in particular, an article specifying the contributions of SVG format as compared to other distribution formats on the Internet.

Organisation of the document

The document is located in an SVG file of 114 KB to facilitate online viewing (around twenty seconds loading time for a 56k-modem connection). The file is in fact a compressed SVG file (free Gzip compression), originally weighing 490 KB. The interactivity functions were put together in a separate ECMAscript file to make it easier to examine them. The SVG format being a text format, it can be compressed easily, and the work may be done simply with the help of an advanced word processor (that accepts Unicode alphabets for the Cyrillic), like Jext (www.jext.org), an excellent programme . Both the Gzip compression and Jext are licensed under GPL.

This SVG file in fact groups together the following items:

  • a graphic document in XML-SVG format made up of:
    • map layers
      • background map (©RECLUS)
      • administrative boundaries of the Russian regions (©RECLUS)
      • administrative boundaries of the federal autonomous districts (for the simplified navigation map, ©RECLUS)
    • layout items (framed legends, interactivity)
  • a set of scripts in the ECMAscript language (standardised version of JavaScript), which ensures:
    • the storage of statistical data
    • the interactivity functions in the interface
    • the functions for cartographic processing (classification, calibrating symbol size)

The background maps, originally in an Adobe PostScript© format, have been transformed, adapted and adjusted using a vectorial drawing programme (Illustrator©). This same programme then converted them into SVG format. The programmes for editing directly in SVG are still rather rare, though we can for the moment cite some interesting OpenSource projects such as Sodipodi and InkScape (cf. References). The statistical data, provided in OpenOffice format, have been integrated as text directly into the ECMAscript tables in the following form:

var da1011 = ['Republic of Karelia', 'Республика Карелия', 8.17, -9.51, -2.12, 732.2, 792, 716.7, 59.8, -75.3, -15.5];

One goes about finding the regions as in a GIS programme - that is, by using geographic codes. This way, the layers of the SVG map is in fact coded and the cartography scripts can review the data contained in the tables, calculate the classifications or size of the symbols and then adapt the map accordingly.

Automatic cartography

This document was created with the intention of keeping it rather flexible, with the possibility of adapting it to two different types of data (absolute and relative), as well as to the map layers whose composition vary depending on the year or the period observed. The true avantage of the SVG format here is to be able to directly integrate a script-type programming language, which allows the graphics document to independently manage its interactive functions. This helps us by gaining space and simplicity but above all, by facilitating the development process. In this document, the analyses are thus conducted in real time, in response to the user's requests and directly based on gross statistical data. The data being of two types - relative or absolute - cartography has had to depend on choroplethic (in coloured areas) and symbolic analyses. The production of choroplethic maps implies the need to analyse the represented variable in order to determine a sufficient classification. Andreas Neumann's original script was based on the technique of quantiles, which had to be replaced by a new algorithm, based on successive averages in order to account for the large discrepancy between values and to better represent extreme values, thus remaining flexible enough to take into account every potential statistical distribution. The function of cartography of absolute data, in symbols, was created thanks to the functions inherent in the SVG format for browsing/resizing items in the map layer. A script converts the raw values into symbol surfaces (possibly equipped with a zoom factor). It then renders visible and resizes the layer of proportional circles, which are subsequently sorted in descending order. The illustrated circles are also sensitive to the movement of the mouse, and descriptive values pop up as it passes over them.

Interactivity

Functions for exploring the document also benefit from the advantages inherent in SVG: the movement of the mouse over the document is detectable, and its position can be located to then go find the corresponding geocode in the data tables, resulting in the display of the relevant data on the interface. Similarly, interface items are in vectorial graphics form and react to the hovering or clicking of the mouse as dictated by scripted functions. One of the main advantages of this system is that the document is produced with a supposedly optimal size in mind, but can be automatically adapted to fit the size of the browser window at any given moment. In the same way, the main frame of the document possesses a zoom/exploration function, based on an enlargement coefficient and on the coordinates of vertical and horizontal movements. The SVG format thus offers undeniable advantages for interactive online cartography, not only due to its graphic characteristics or to its interactivity, but also due to its accessibility (immediate readability and editing with the use of free programmes).

Available SVG plugins and editors

Plugins:

Native editors:

Moreover, many vectorial drawing programmes can export graphics in SVG format.

An exhaustive and regularly updated list of SVG format implementations is available on the W3C site:
http://www.w3.org/Graphics/SVG/SVG-Implementations.htm8