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:
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:
See the visualization in action here. See the project at Github Gist here, and Github here.
xxxxxxxxxx
<html>
<head>
<meta charset=utf-8 />
<title>Mass Shootings</title>
<!-- Author: Bo Ericsson, https://www.linkedin.com/in/boeric00/ -->
<!-- Based on crossfilter example (https://square.github.io/crossfilter/) and API (https://github.com/square/crossfilter/wiki/API-Reference), and MapBox examples and API (https://mapbox.com) -->
<!--<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />-->
<script src='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.css' rel='stylesheet' />
<link href='https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://square.github.io/crossfilter/crossfilter.v1.min.js"></script>
<link rel="stylesheet" href="styles.css">
<script src="index.js" defer></script>
</head>
<body>
<div>
<div id="mapDiv"></div>
<div class="titleDiv">
<h1>Mass Shootings in the US</h1>
<h4>January 2013 - December 2015 <span class="source"><a href="https://shootingtracker.com/wiki/Main_Page" target="_blank" title="Opens in a new window">(Source)</a></span></h4>
</div>
<div class="infoDiv"></div>
<div class="chart">
<div class="title">Mass Shootings by Week</div>
<div class="select">
<label><input type="radio" name="view" value="count" checked>Events</label>
<label><input type="radio" name="view" value="dead">Dead</label>
<label><input type="radio" name="view" value="injured">Injured</label>
</div>
<div class="animControls"></div>
</div>
</div>
Modified http://square.github.io/crossfilter/crossfilter.v1.min.js to a secure url
https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.js
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js
https://square.github.io/crossfilter/crossfilter.v1.min.js