The CrimeTimeline was created by the Cyber-Duck team as part of the Spring Hackathon, hosted on Google Campus in London. Within just 30 hours of programming, "Team Awesome" managed to plan, design and build a fully functional application which displayed crime levels throughout the UK, using an interactive heat map.
We created a web app that utilised the Police UK API, displaying levels of crime throughout the whole of the UK using heat maps. Including a scrolling timeline, users can see how volume of crimes and the crime severity fluctuated throughout the UK over the last 3 years.
For the user that wants a quick snap shot of the area, the app included the ability to open a pop up menu with a breakdown of all crimes within a 1 mile radius. The aim of the app was to educate the community on crime levels in their area.
The CrimeTimeline shows you the levels and severity of crime anywhere in the UK.
- Laravel 4 Beta
- jQuery 1.9.1
- HTML5 Boilerplate
- Police API
- Google Maps API
- Open Street Maps API
Within the allotted time limit of 30 hours there were numerous challenges we had to overcome. For instance, there were some APIs that we initially found ourselves unfamiliar with including the Police API and quickly had to learn how it worked. We also tried generating the heat map from downloading the Police UK API data using the CSVs but experienced some issues with rendering the vast amount of data when zoomed out on Google Maps. There was a steep learning curve we overcame when understanding how to overlay heat maps on top of the interactive Google Map. Finally, we decided we wanted to be able to provide an extra click or tap that would provide specific data about the type of crime in the form of visual nodes, which in itself was a complex feature to include.
How the app works
The data our team used to generate the heat map was asynchronously pulled from the Police UK API. This data is constrained by a bounding box which is defined by the current viewport of the Google map.
Team Awesome living up to our name!
Under the DuckLabs banner, Cyber-Duck are now in the process of making numerous improvements including enhancing the way users search through time by changing the labelling and the graphics on the horizontal slider so that all buttons are based on numerical values. We are planning on reviewing how the national data is processed as the user moves around the map, specifically to speeding up efficiency on client-side (web browser) processing. Further changes to the search results are also in the works where an auto-complete dropdown is presented. We are also in the process of approaching the police to see if they would be interested in promoting the project to the general public.