Treemap Cartography for showing Spatial and Temporal Traffic Patterns
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
runApp.sh (for Mac/UNIX).
You may need to click on the applet to give it keyboard focus.
- Press 'c' to toggle between colouring by traffic volume (purple) and average speed (orange)
- Press '1' to show the data by grid square (default).
- Press '2' to show the data by grid square and vehicle type
- Press '3' to show the data by grid square, vehicle type and day of week
- Press '4' to show the data by grid square, vehicle type, day of week and hour of day
- Left drag to pan and right drag up/down to zoom
- Press '-' and '+' to fade in and out the base map.
- (See other more detailed instructions below)
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]