Interactive Data Visualization of Bicycle Accidents

This is an interactive data visualization that allows intuitively deep exploration of a dataframe on bicycle accidents in Chicago.

Day of Week, Time of Day, Severity of Accident, Hit and Run, and Month*, are both sub-plots and Interactive Filters that update a live Data Frame and Map.

For example, we can see easily that afternoon rush hour is twice as dangerous as the morning, and the majority of 12-4am accidents are on the weekends.

Visit the Exploratory Data Visualization

Yet without a bit of magic, it wouldn’t work very well. The cost of updating all the data and charts would prevent realtime interaction. Crossfilter.js’s magic is pre-calculating correlations, so what would be an expensive calculation at runtime is just a lookup table. Even so, I had to stick to mere 1500 records.**

I don’t expect this to work on mobile – furthermore, please ensure browser is 1200 px wide for best experience.

I enjoyed revisiting D3 and HTML5/CSS – I had not used it in a few years (finally ! 🙂 and it was a nice exercise while I was exploring bicycle safety for a different project.

Prior to HTML/JS, the data filtering was done in Python and some exploratory statistics in R.

HTML, Javascript, D3 = UI

R, Python = exploratory statistics & pre-processing

* For those keeping track, that’s 4 for 5 of LATCH taxonomy (Timeseries, Nominal, Part to Whole, and Geospatial).

** This result surprised me; webGL is far more efficient at plotting data than SVG/HTML. But in webGL one doesn’t get the expressive power of css/htmls interaction. So it’s a trade off ! (for the sheer power of WebGL, see David Li)