One thousand billions of... maps (with SVG and Cocoon)

We present here an application of SVG to the on-line production of maps for the analysis of results of elections. We use Cocoon -from the Apache foundation- to facilitate this production. The used method is easily generalizable for different data source.


We wanted to supply a Web site ( which allows every guest to produce his own spatial analysis of the results of the presidential elections 2002 in France. For each of 36000 French administrative divisions (municipalities), we have the percentage obtained by every candidate, the percentage of voters, the percentage of abstentions, the percentage of blanks or invalids votes. We authorize all the combinations of these results to produce a map. Furthermore, the proposed method can be easily modified to process other data.

sample generated map

The most difficult part of the process is to get the data. Then, the only step in our process which is not easily generalizable is the initial production of the data in our XML format. However, the necessary converters are rather simple to produce.


The interface is a simple form which allows:

Base Maps

Every map mainly consists of a path by municipality. A sample of SVG code for a municipality is:

<path id="C04006-1" fill="rgb(0,0,0)" onmouseover="zin('C04006')" onmouseout="zou('C04006')" d="M414 299 L418 289L427 293L429 298... L414 299z"/>

The 'id' field allows to do the link

Base maps were once prepared for every geographic zone. A possible evolution consists in putting the coordinates of the municipalities in a geographic database and to build the map on demand according to a request in the database.

Mixing data and maps

The results of the calculation defined by the form are calculated. So a value is associated to every municipality of the selection. We sort out the municipalities following this value. We separate the municipalities in N classes having the same number of municipalities. For every class, we get the minimum and maximum value. This interval is going to serve us for choosing a colour: cold colours for the negative values, warm colours for the positive values; colours poorly saturated near zeros, colours darker and\or more saturated far from zero. Once a colour is linked to each class and knowing the value associated to every municipality, we make an XSLT transformation to give the good value to the 'fill' field in the path associated with each municipality.

How Cocoon help us

Cocoon parse the calling URL to choose some processing to do to generate a document as the URL response.

Cocoon allows us quite easily:

For our maps, we have the following chain of processing:

- data of the chosen geographic zone are processed by an XSLT transformation to apply them the chosen calculation; it gives an XML representation of the results of the calculation,

- a transformation is then applied which allocates a class to every municipality, a color is associated with each obtained class,

- results of the calculation, classes/colours association and the SVG 'source' map are aggregated,

Every stage produces an XML representation, which move from step to step by SAX events. So, an XML file is not really created for each step. A file is created only if it could be used in the cache.

The XSLT transformations are compiled once during their first use.

Cocoon allows to benefit from a powerful caching mechanism. Cocoon allows us to internationalize easily our maps generation by using a list of all textual messages shown on a map contained in an XML file for each supported language.


Afterward, we have planed to::

- generalize the method and make it accessible (WebService?),

Valid HTML 4.0!