Monday, June 09, 2014

Using Google Maps with Crossfilter

Crossfilter.js is a JavaScript library for exploring multivariate datasets. Combine Crossfilter with the Google Maps API and it is possible to create mapped data visualizations with very powerful filtering options.

Last year Brendan Kenny of the Google Maps Developers Team created a useful video demonstration of how to connect Crossfilter to the Google Maps API. All the code used in the video is available on GitHub and you can also play with this example map to get an idea of how powerful the combination of Crossfilter and Google Maps can be.

Muyueh Lee has also used Crossfilter with Google Maps to create a visualization of traffic accidents in Hsinchu City, Taiwan. Traffic Accidents Hsinchu maps all traffic accidents in the city between January to October, 2013.

As well as the Google Map showing the location of the accidents the visualization includes a number of charts and graphs showing the accident data by month, day and hour. The result of binding Crossfilter to the Google Map is that the Traffic Accidents Hsinchu map can be filtered by month, day and hour.

Click on the charts and graphs and you can filter the data shown on the map. For example you can select individual days on the Accident Weekday bar chart to visualize the accidents shown on the map by individual day of the week. Or you could select Saturday and Sunday on the chart to view all the accidents that occurred at the weekend.

Crossfilter also includes tools to select a range of data. Click on the Accident Hour chart and you can select a range of hours to view the accidents on the map by hour(s) of the day.

No comments: