The visualization is using data from www.shootingtracker.com and covers the period January 2013 through early December 2015. The event data (comprised of over 1000 shooting events) has been grouped into weeks.
Notes:
- The map can be dragged and zoomed with the mouse
- The circles on the map corresponds to the shooting events in the selected weeks. The larger the circle the higher the dead/injured count
- Click a circle to display the metadata of the corresponding event, including links to media reports
- The color coding means red for events where deaths occured and orange for events with injuries but no deaths
- The bar chart at the bottom is interactive. There is a rectangular area called brush on the bar chart which is used to select the weeks of interest. When starting up, the visualization has preselected the weeks in the range of October 2014 to October 2015
- The brush can be dragged sideways, or resized by dragging the brush "handles" at the right and left edge of the brush
- By clicking outside the brush, all weeks (153 in total) will be selected (at which point in time, the brush will be hidden)
- To re-engage the brush (and the weekly filter), simply drag across the bar chart with the mouse
- When starting up, the visualization has selected the shooting event count per week as the data source for the bar chart. To change the data source to either dead or injured, use the "radio" buttons on the left of the bar chart
- To animate the data week by week, use the Start Animation button on top of the bar chart.
- The animation can be stopped or resumed, single-stepped forwards or backwards, and the animation speed can be adjusted
- The animation cycles through each week and when reaching the end, will restart at the first week
Technically, the visualization is using D3.js, Crossfilter.js and Mapbox's API, and is partially based on a great crossfilter example here and a variety of Mapbox examples here. The map source is Mapbox and Open Streetmaps.
Open Issues:
- The Mapbox popup windows are currently not rendered on top of visualization stack, which means that they could be rendered below the title of the visualization. The fix is to change the z-index of the popup window
- When multiple events have occured in the same place in the selected period, only the top most circle/event is visible and clickable. The fix is to display metadata for all events at the particular location in the popup window (and not just the topmost event)
- The events have been geo located using the Google geocoder. Due to issues in the raw data (where not all events have clean City/State identifiers), some events have been incorrectly located
- When the animation is running, clicking in the bar chart will terminate the animator (as designed). However, click-dragging (which will reengage the brush) will currently not terminate the animator. The fix is to kill the animator upon click-dragging in the svg, in addition to simple clicks
See the visualization in action here. See the project at Github Gist here, and Github here.
