Mass Shootings in the US by boeric

Mass Shootings

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.

index.html

<!doctype html>
<html>
  <head>
  <meta charset=utf-8 />
  <title>Mass Shootings</title>
  <!-- Author: Bo Ericsson, https://www.linkedin.com/in/boeric00/ -->
  <!-- Based on crossfilter example (//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='//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="//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&nbsp;&nbsp;<span class="source"><a href="//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>

INTRO.md

## Mass Shootings

The visualization is using data from [www.shootingtracker.com](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.

Please see README.md for more information

LICENSE

MIT License

Copyright (c) 2020 Bo Ericsson

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

styles.css

body {
  margin: 0;
  padding: 0;
  font-family: "Lato";
}
#mapDiv {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 960px;
  max-height1: 700px;
}
.reset {
  padding-left: 1em;
  font-size: smaller;
  color: #ccc;
}
.ui-brusadfadsadsfah {
  background: #f8f8f8;
  position: absolute;
  bottom: 35px;
  right: 10px;
  left: 10px;
  height: 80px;
  opacity: 0.5;
}
.brush .extent {
  stroke: #fff;
  fill-opacity: 0.125;
  shape-rendering: crispEdges;
}
.chart {
  display: inline-block;
  height: 110px;
  margin-bottom: 10px;
  background: black; /*#f8f8f8;*/
  position: absolute;
  bottom: 25px;
  right: 10px;
  left: 10px;
  opacity: 0.8;
  padding: 10px;
  width: 920px;
}
.title {
  color: #fff;
}
path {
  shape-rendering: crispEdges;
}
.background.bar {
  fill: #ccc;
}
.foreground.bar {
  fill: steelblue;
}
.axis path, .axis line {
  fill: none;
  stroke: #fff; /*#000*/
  shape-rendering: crispEdges;
}
.axis text {
  /*font: 10px sans-serif;*/
  font-size: 10px;
  font-family: Lato;
  fill: #fff;
  stroke: none;
}
.brush rect.extent {
  fill: steelblue;
  fill-opacity: .125;
}
.brush .resize path {
  fill: #eee;
  stroke: #666;
}
.select {
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
  margin-top: 15px;
}
.select label {
  display: block;
  color: #fff;
}
.animControls {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 600px;
  height: 25px;
}
.animControls button {
  display: inline-block;
  cursor: default;
  background-color: black;
  border: 1px solid gray;
  border-radius: 4px;
  text-align: left;
  padding: 2px 4px 2px 4px;
  margin-right: 15px;
  font-size: 13px;
  color: #ccc;
  font-family: Lato;
}
.titleDiv {
  position: absolute;
  top: 0px;
  margin: auto;
  width: 960px;
  font-family: Lato;
  color: white;
}
.titleDiv h1 {
  text-align: center;
  font-weight: normal;
  margin-bottom: 0px;
}
.titleDiv h4 {
  text-align: center;
  font-weight: normal;
  margin-top: 5px;
}
.infoDiv {
  position: absolute;
  bottom: 190px;
  left: 10px;
  color: white;
  border-radius: 4px;
  background: black;
  opacity: 0.9;
  padding: 10px;
}
.infoDiv table {
  width: 200px;
}
.infoDiv .dead {
  color: red;
}
.infoDiv .injured {
  color: orange;
}
.infoDiv .data {
  text-align: right;
}
.source a {
  color: gray;
}