Skip to menu | Skip to content |

giCentre - Department of Information Science

Treemap Cartography for showing Spatial and Temporal Traffic Patterns

This interactive application is based upon a recent Journal of Maps article. It was developed by Aidan Slingsby, Jason Dykes and Jo Wood at the giCentre of City University London.

Slingsby, A., Wood, J. and Dykes, J. (2010) Treemap Cartography for showing Spatial and Temporal Traffic Patterns, Journal of Maps, v2010, 135-146. 10.4113/jom.2010.1071 [download | demo].

What it shows

It shows a spatial and temporal summary of courier traffic based on 42 million GPS points that represent the positions of eCourier vehicles. It allows patterns in traffic volume and average speed to be detected across a 98km2 area of central London by vehicle type, by day and by hour. The data were retrieved from from eCourier's public API.

Visualising such datasets is challenging because of the multivariate nature and the high spatial density. We present a novel approach to doing this using dimensional-stacking and well-designed map interactions.

How to run it

The applet is below. It requires a large amount of memory and runs out of memory in some browsers. It does not give visual feedback when it runs out of memory - it either does not appear or hangs and outputs an error message in the Java console. If you encounter this problem, please download it as an application and run runApp.bat (for Windows) or (for Mac/UNIX).

You may need to click on the applet to give it keyboard focus.

This browser does not have a Java Plug-in.
Get the latest Java Plug-in here.

How to use it

This map is based on a spatial treemap with fixed-size elements. The different aspects of the datasets are displayed using dimensional-stacking which works by creating a false hierarchy from these aspects - we use gridSquare-modeOfTransport-dayOfWeek-hourOfDay - and then nesting these within each other in the display.

Initially, only the first level is shown (gridSquare). This is a 1km raster map of central London. '-' and '+' can be used to fade in a street map of the area. The purple colour (ColorBrewer Rd-Pu colour scheme) represents traffic volume on a logarithmic scale. Pressing 'c' will change the colouring to average speed (orange, using the ColorBrewer Yl-Or-Br colour scheme).

Pressing '2' will show the data by vehicle type in each grid square. Drag the map to zoom and pan to see detail and press 'r' to reset the zoom. The positions of vehicles in each grid square are consistent. 4 wheeled vehicles are at the top (large van on the left and van on the right) and 2-wheeled vehicles at the bottom (large motorbike, motorbike and bicycle from left to right). Once this layout is learnt, comparisons between vehicle types can be made across space. For example, bicycles ('pbike') are only in use west of the centre.

Pressing '3' will show the day of the week for each vehicle type (and for each grid square) as vertical bars ordered from Sunday (left) to Saturday (right).

Pressing '4' will show the hour of the day for each day (and each vehicle type and each grid square). This is the entire hierarchy. Hours of the day are ordered temporally from midnight vertically within each day.

This provides a rich summary of the dataset which is facilitated by the consistent small-multiple-like arrangement. The zooming and panning can be used to study the data in more detail. The interactive legend (use '[' and ']' to rebin and mouseover to highlight relevant parts of the map) allows patterns to be identified and explored. 'l' will turn the legend into a frequency barchart and the minimum and maximum values for the colour scaling can be changed interactively.

Switching and reordering the false hierarchy would allow the data to be explored more comprehensively. This is not implemented in this example (but see our house prices work).

How we did it

The visual design is informed by work that we have written up (listed below). PHP was used to retrieve the data from eCourier's API, PostgreSQL was used to store the GPS points and query the data, TreeMappa was used to generate the layouts and Processing (Java) was used to build the interactive applet.


Slingsby, A., Wood, J. and Dykes, J. xxxx. Treemap Cartography for showing Spatial and Temporal Traffic Patterns. Journal of Maps [under review]

Slingsby, A., Dykes, J. and Wood, J. 2009. Configuring Hierarchical Layouts to Address Research Questions. IEEE Transactions on Visualization and Computer Graphics 15 (6), Nov-Dec 2009 [in press | pdf | video]

Wood, J., Dykes, J., Slingsby, A. and Radburn, R., (2009), "Flow trees for exploring spatial trajectories", "Proceedings of the GIS Research UK 17th Annual Conference" , (Fairbairn, D., Eds.), pp. 229-234, University of Durham, Durham, UK. [pdf]

Slingsby, A., Dykes, J., Wood, J. and Crooks, A. 2009. The Role of Layout and Order in Treemaps for Showing Spatial and Temporal Variation in House Prices. Abstract for the GeoViz Hamburg Workshop, Hamburg, Germany. [demo | pdf]

Slingsby, A., Dykes, J. & Wood, J., 2008. Using treemaps for variable selection in spatio-temporal visualisation. Information Visualization 7 (3-4), 210-224. [pdf]