Mapping the UK's teen murder toll

Published on 11 May 2009

This is a project about web and bbc.

Interactive charts, map and table visualising all the UK teen homicides and allowing exploration of the data.

A BBC News feature collating all the teenage homicides in the UK across a year. Data visualisations allowed the scale of the homicides to be investigated and compared using charts and maps. I created templates generating feeds and front-end HTML. I also built a flash charting component and infographic map that are populated via javascript with the data in the page.

Templates

I wrote several templates including:

  • HTML table of all victims
  • JSON feeds to support interactive map and charts

Infographic map

A simple infographic-style map that plots all the homicides in the UK geographically. The map uses the Modest Maps Flash library with a custom background image of the UK.

The map exposes a javascript API allowing the page to control which points are displayed. This enables the map to be changes as the data is filtered on the page.

Charts

Flash is used to draw the bar chart on the page.

The templates mentioned above initially generate the simple breakdown bar charts as static HTML and CSS. Javascript on the page then adds the ability to filter the data.

Table filter

Simple, re-usable class to allow the table to be filtered. View the code.