Skip to content

Instantly share code, notes, and snippets.

@boeric
Last active May 24, 2020 03:24
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save boeric/c1fe5650da3d6e790706 to your computer and use it in GitHub Desktop.
Save boeric/c1fe5650da3d6e790706 to your computer and use it in GitHub Desktop.
Mass Shootings in the US

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:

  1. The map can be dragged and zoomed with the mouse
  2. The circles on the map corresponds to the shooting events in the selected weeks. The larger the circle the higher the dead/injured count
  3. Click a circle to display the metadata of the corresponding event, including links to media reports
  4. The color coding means red for events where deaths occured and orange for events with injuries but no deaths
  5. 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
  6. The brush can be dragged sideways, or resized by dragging the brush "handles" at the right and left edge of the brush
  7. By clicking outside the brush, all weeks (153 in total) will be selected (at which point in time, the brush will be hidden)
  8. To re-engage the brush (and the weekly filter), simply drag across the bar chart with the mouse
  9. 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
  10. To animate the data week by week, use the Start Animation button on top of the bar chart.
  11. The animation can be stopped or resumed, single-stepped forwards or backwards, and the animation speed can be adjusted
  12. 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:

  1. 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
  2. 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)
  3. 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
  4. 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.

<!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 (http://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='http://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="http://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="http://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>
/* By Bo Ericsson, https://www.linkedin.com/in/boeric00/ */
/* eslint-disable no-console, no-restricted-globals, func-names, quotes, no-multi-spaces,
prefer-template, no-script-url, prefer-arrow-callback, no-param-reassign, no-use-before-define,
no-nested-ternary, max-len, no-shadow, no-multi-assign, no-plusplus, object-curly-newline
*/
/* global d3, crossfilter, L */
console.log("d3.version", d3.version);
console.log("crossfilter.version", crossfilter.version);
// variables
let chart;
// formats
const fmt = d3.format("02d");
const fmt1dec = d3.format(".1f");
const fmtM = d3.format(",d");
// ensure at least 700px height if running in an iframe (bl.ocks)
// http://bl.ocks.org/mbostock/1093025
d3.select(self.frameElement).transition().duration(500).style("height", "600px");
// build the map
const mapId = "boeric.omod7h1p"; // dark map
L.mapbox.accessToken = 'pk.eyJ1IjoiYm9lcmljIiwiYSI6IkZEU3BSTjQifQ.XDXwKy2vBdzFEjndnE4N7Q';
const map = L.mapbox.map("mapDiv", mapId).setView([33, -100], 4);
// create layer to hold shooting events
const shootingsLayer = L.geoJson(null, { pointToLayer: scaledPoint }).addTo(map);
// helper functions to set map marker attributes
function pointColor(feature) {
return feature.properties.Dead > 0 ? "red" : "orange";
}
function pointRadius(feature) {
return Math.max(feature.properties.Dead * 2, 6);
}
function scaledPoint(feature, latlng) {
// generate html for popup
let html = "<div class='marker-title'>Mass Shooting Event</div>";
html += "<div class='marker-description'>";
html += "Location: " + feature.properties.Location + '<br>';
html += "Date: " + feature.properties.displayDate + "<br>";
html += "Dead: " + feature.properties.Dead + "<br>";
html += "Injured: " + feature.properties.Injured + "<br>";
html += "References: <br>";
// generate an anchor element for each reference
feature.properties.References.forEach(function (d) {
// http://stackoverflow.com/questions/8498592/extract-root-domain-name-from-string
const matches = d.match(/^https?:\/\/([^/?#]+)(?:[/?#]|$)/i);
const domain = matches && matches[1];
html += "&nbsp;&nbsp;<a href='" + d + "' target='_blank' title='Opens in a new window'>" + domain + "</a><br>";
});
// return the marker
return L.circleMarker(latlng, {
radius: pointRadius(feature),
fillColor: pointColor(feature),
fillOpacity: 0.6,
weight: 0.5,
color: "darkred",
}).bindPopup(html);
}
// get reference to chart div
const chartDiv = d3.select(".chart");
// add a reset anchor element
chartDiv.select(".title")
.append("a")
.attr("href", "javascript:reset()")
.attr("class", "reset")
.text("Reset filter")
.style("margin-left", "10px")
.style("display", "none");
// get the data
d3.json("shootings.GeoJSON", function (error, data) {
// let featureCount = data.features.length;
// process the data
data.features.forEach(function (d) {
const c = d.properties.Date.split("/");
const year = +c[2] + 2000;
const month = +c[0] - 1;
const day = +c[1];
const date = new Date(year, month, day);
const week = d3.time.week(date);
const weekOfYear = d3.time.weekOfYear(week);
d.properties.date = date;
d.properties.displayDate = date.toString().substring(0, 16);
d.properties.week = week;
d.properties.weekNumber = fmt(weekOfYear);
d.properties.year = week.getYear() + 1900;
d.properties.weekBin = (week.getYear() + 1900) + "-" + fmt(weekOfYear);
});
// get extent (earliest/latest) dates
const dateExtent = d3.extent(data.features, function (d) { return d.properties.date; });
// add one week to extent
dateExtent[1].setDate(dateExtent[1].getDate() + 7);
// sort the features in date order
data.features.sort(function (a, b) {
if (a.properties.date > b.properties.date) return 1;
if (a.properties.date < b.properties.date) return -1;
return 0;
});
// init crossfilter
const cf = crossfilter(data.features);
// add week dimension
const week = cf.dimension(function(d) { return d.properties.week; });
// create groups from the week dimension
const countGroup = week.group(d3.time.week);
const deadGroup = week.group().reduceSum(function(d) { return d.properties.Dead; });
const injuredGroup = week.group().reduceSum(function(d) { return d.properties.Injured; });
// console.log("deadGroup.top()", deadGroup.top(Infinity))
// console.log("deadGroup.all())", deadGroup.all())
// console.log("injuredGroup.top()", injuredGroup.top(Infinity))
// add tracking dimension and group
const weekTracker = cf.dimension(function (d) { return d.properties.week; });
const countTracker = weekTracker.group(d3.time.week);
// add event handlers to toggle data series view (based on the groups defined above)
d3.selectAll("input[type=radio][name=view]")
.on("change", function () {
const elem = d3.select(this);
const value = elem.property("value");
const group = value === "count" ? countGroup : value === "dead" ? deadGroup : injuredGroup;
// rebuild the svg bar chart with the new data series
chart
.removeContents()
.brushDirty(true)
.group(group);
// refresh viz
renderAll();
});
// create the bar chart
chart = barChart()
.dimension(week)
.group(countGroup)
.round(d3.time.week.round) // ensures whole week
.x(d3.time.scale()
.domain(dateExtent)
.rangeRound([0, 5 * countGroup.all().length + 1]))
.filter([new Date(2014, 9, 5), new Date(2015, 9, 4)])
// .filter([new Date(2013, 1, 1), new Date(2013, 5, 1)])
// .filter(null)
.on("brush", function () { renderAll(); })
.on("brushend", function () { renderAll(); })
.enableBrush(true);
// init animator
const anim = animator()
.speed(1000)
.chart(chart)
.container(d3.select(".animControls"));
// start the animator
anim(countGroup.all());
// window.anim = anim; // uncomment this to get access to the animator object from the browser console
// called at init, by the brush event handlers and by filter reset "a" elem
function renderAll() {
// run the chart function (these three are equivalent functionally)
// d3.select(".chart").call(chart);
chartDiv.call(chart);
// chart(chartDiv)
// get the filtered data
const selected = week.top(Infinity);
// console.log("selected", selected)
// create geojson structure (needed for mapbox api)
const geoJson = {
type: "FeatureCollection",
features: selected,
};
// clear the shootings layer and add the new filtered data
shootingsLayer
.clearLayers()
.addData(geoJson);
// update info window
const totalEvents = selected.length;
const groups = countTracker.all();
const weeks = groups.reduce(function (p, v, i) { return groups[i].value > 0 ? p + 1 : p + 0; }, 0);
const deadInjuredCount = selected
.reduce(function (p, c, i) {
return { dead: selected[i].properties.Dead + p.dead, injured: selected[i].properties.Injured + p.injured };
}, { dead: 0, injured: 0 });
const avgDead = deadInjuredCount.dead / weeks;
const avgInjured = deadInjuredCount.injured / weeks;
// create html for info window
let html = "";
html += "<table>";
html += " <tr><td>Number of Weeks</td><td class='data'>" + weeks + "</td></tr>";
html += " <tr><td>Total Shootings</td><td class='data'>" + fmtM(totalEvents) + "</td></tr>";
html += " <tr class='dead'><td>Total Dead</td><td class='data'>" + fmtM(deadInjuredCount.dead) + "</td></tr>";
html += " <tr class='injured'><td>Total Injured</td><td class='data'>" + fmtM(deadInjuredCount.injured) + "</td></tr>";
if (weeks !== 1) {
html += " <tr class='dead'><td>Dead per Week</td><td class='data'>" + fmt1dec(avgDead) + "</td></tr>";
html += " <tr class='injured'><td>Injured per Week</td><td class='data'>" + fmt1dec(avgInjured) + "</td></tr>";
}
html += "</table>";
// set the html
d3.select(".infoDiv").html(html);
}
// initial render
renderAll();
// resets the week filter (driven by the bar chart brush)
window.reset = function () {
if (anim) anim.exit();
chart.filter(null);
renderAll();
};
// setup the bar chart (used to filter weeks)
function barChart() {
// TODO: remove this instance counter (in this viz, there is only one instance)
if (!barChart.id) barChart.id = 0;
let margin = { top: 10, right: 10, bottom: 20, left: 50 };
let x;
let y = d3.scale.linear().range([59, 0]);
const id = barChart.id++;
const axis = d3.svg.axis().orient("bottom");
const brush = d3.svg.brush();
let brushDirty;
let dimension;
let group;
let round;
let gBrush;
let enableBrush;
let theDiv;
// main bar chart function; will be called repeatedly by renderAll
function chart(div) {
// determine dimensions of svg
const width = x.range()[1];
const height = y.range()[0];
// update y scale domain
y.domain([0, group.top(1)[0].value]); // set y domain to max value in this group
// TODO: inefficient code; div is an array of one
div.each(function() {
const div = theDiv = d3.select(this);
let g = div.select("g");
// if g is empty, reubild the svg
if (g.empty()) {
// create svg and group
g = div.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.on("click", function () {
// exit the animator
if (anim) anim.exit();
// TODO: need to handle the case of mouse drag as well...
});
// reset the clip path to full width
g.append("clipPath")
.attr("id", "clip-" + id)
.append("rect")
.attr("width", width)
.attr("height", height);
// generate two paths, one background, one foreground
g.selectAll(".bar")
.data(["background", "foreground"])
.enter().append("path")
.attr("class", function(d) { return d + " bar"; })
// assign all the data in the group to the path
.datum(group.all());
// assign the clip path to the foreground bars
g.selectAll(".foreground.bar")
.attr("clip-path", "url(#clip-" + id + ")");
// Initialize the brush component with pretty resize handles.
if (enableBrush) {
gBrush = g.append("g").attr("class", "brush").call(brush);
gBrush.selectAll("rect").attr("height", height);
gBrush.selectAll(".resize").append("path").attr("d", resizePath);
}
// add the x-axis last (so it's drawn on top of brush)
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(axis);
}
// Only redraw the brush if set externally.
// at init, the date chart has an externally set brush
if (brushDirty) {
brushDirty = false;
g.selectAll(".brush").call(brush);
div.select(".title a").style("display", brush.empty() ? "none" : null);
if (brush.empty()) {
g.selectAll("#clip-" + id + " rect")
.attr("x", 0)
.attr("width", width);
} else {
const extent = brush.extent();
g.selectAll("#clip-" + id + " rect")
.attr("x", x(extent[0]))
.attr("width", x(extent[1]) - x(extent[0]));
}
}
// set the d attribute on the path
g.selectAll(".bar").attr("d", barPath);
});
// generate the bar chart path item
function barPath(groups) {
const path = [];
let i = -1;
const n = groups.length;
let d;
while (++i < n) {
d = groups[i];
path.push("M", x(d.key), ",", height, "V", y(d.value), "h4V", height);
}
return path.join("");
}
// generate pretty brush left and right "handles"
function resizePath(d) {
const e = +(d === "e");
const x = e ? 1 : -1;
const y = height / 3;
return "M" + (0.5 * x) + "," + y
+ "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6)
+ "V" + (2 * y - 6)
+ "A6,6 0 0 " + e + " " + (0.5 * x) + "," + (2 * y)
+ "Z"
+ "M" + (2.5 * x) + "," + (y + 8)
+ "V" + (2 * y - 8)
+ "M" + (4.5 * x) + "," + (y + 8)
+ "V" + (2 * y - 8);
}
}
// brush handlers
brush.on("brushstart.chart", function() {
// get the containing div
const div = d3.select(this.parentNode.parentNode.parentNode);
// remove the display property from the reset anchor elem
div.select(".title a").style("display", null);
});
brush.on("brush.chart", function() {
const g = d3.select(this.parentNode);
let extent = brush.extent();
// handle rounding of extent (only integers)
if (round) {
g.select(".brush")
.call(brush.extent(extent = extent.map(round))) // set a rounded brush extent
.selectAll(".resize")
.style("display", null); // remove the resize handles (why?)
}
// update clip rectangle
g.select("#clip-" + id + " rect")
.attr("x", x(extent[0]))
.attr("width", x(extent[1]) - x(extent[0]));
// update the filter
dimension.filterRange(extent);
});
brush.on("brushend.chart", function () {
if (brush.empty()) {
emptyBrush.call(this);
}
});
// function to sync UI and crossfilter to an empty brush
function emptyBrush() {
// console.log("emptyBrush", this);
if (!brush.empty()) {
console.error("brush not empty");
return;
}
// get reference to containing div
const div = d3.select(this.parentNode.parentNode.parentNode);
// hide the reset anchor element
div.select(".title a").style("display", "none");
// remove the clip rectangle
div.select("#clip-" + id + " rect")
.attr("x", null) // remove the x attribute which will render the clipRect invalid
.attr("width", "100%");
// reset the filter
dimension.filterAll();
}
// chart configuration functions
chart.margin = function (_) {
if (!arguments.length) return margin;
margin = _;
return chart;
};
chart.x = function (_) {
if (!arguments.length) return x;
x = _;
axis.scale(x);
brush.x(x);
return chart;
};
chart.y = function (_) {
if (!arguments.length) return y;
y = _;
return chart;
};
chart.dimension = function (_) {
// console.log("chart.dimension..." + _)
if (!arguments.length) return dimension;
dimension = _;
return chart;
};
chart.filter = function (_) {
if (_) {
brush.extent(_);
dimension.filterRange(_);
} else {
brush.clear();
dimension.filterAll();
}
brushDirty = true;
return chart;
};
chart.group = function (_) {
if (!arguments.length) return group;
group = _;
return chart;
};
chart.round = function (_) {
if (!arguments.length) return round;
round = _;
return chart;
};
chart.removeContents = function () {
theDiv.selectAll("svg").remove();
// theDiv.selectAll("a").remove();
// console.log("theDiv", theDiv)
return chart;
};
chart.brushDirty = function (_) {
if (!arguments.length) return brushDirty;
brushDirty = _;
return chart;
};
chart.enableBrush = function (_) {
if (!arguments.length) return enableBrush;
enableBrush = _;
return chart;
};
chart.clearBrush = function () {
// console.log("---", d3.select(".brush"))
d3.select(".brush").call(brush.clear());
emptyBrush.call(d3.select(".brush").node());
return chart;
};
chart.brushExtent = function (_) {
if (!arguments.length) return brush.extent();
// console.log("setting brush extent...", _, "current", brush.extent())
brush.extent(_);
d3.select(".brush").call(brush);
brush.event(d3.select(".brush"));
return chart;
};
// copy "on" event handlers from "brush" to "chart"
return d3.rebind(chart, brush, "on");
}
});
// animator object/function
function animator() {
let speed = 1000;
let currPos = 0;
let animating = false;
let data;
let ready = false;
let inTimeout = false;
let chart;
let container;
function main(_) {
data = _;
if (data.length > 0) ready = true;
// data good?
if (!ready) {
console.error("bad data");
return;
}
// container good?
if (!container) {
console.error("No animation control container provided");
return;
}
// event handlers
function startStop() {
this.blur();
const elem = d3.select(this);
const value = elem.attr("value");
// console.log("startStop...", this, value)
if (value === "start") {
// start the animation...
main.resume();
// change this button text
elem.text("Exit Animation").attr("value", "stop");
// show buttons
d3.selectAll(".anim2").style("display", "inline-block");
d3.selectAll(".anim4").style("display", "inline-block");
} else {
// stop the animation
main.stop();
// change this button text
elem.text("Start Animation").attr("value", "start");
// hide buttons
d3.selectAll(".anim").style("display", "none");
// ensure the halt/resume button says halt
d3.select(".anim2").text("Halt").attr("value", "halt");
}
}
function haltResume() {
this.blur();
const elem = d3.select(this);
const value = elem.attr("value");
// console.log("haltResume...", this, value)
if (value === "halt") {
// halt the animation
main.stop();
// change this button text
elem.text("Resume").attr("value", "resume");
// hide buttons
d3.selectAll(".anim4").style("display", "none");
// show buttons
d3.selectAll(".anim3").style("display", "inline-block");
} else {
// resume the animation
main.resume();
// change this button text
elem.text("Halt").attr("value", "halt");
// hide buttons
d3.selectAll(".anim3").style("display", "none");
// show buttons
d3.selectAll(".anim4").style("display", "inline-block");
}
}
function fasterSlower() {
this.blur();
const elem = d3.select(this);
const value = elem.attr("value");
// console.log("fasterSlower...", this, value)
if (value === "faster") main.faster();
else main.slower();
}
function forwardBackward() {
this.blur();
const elem = d3.select(this);
const value = elem.attr("value");
// console.log("forwardBackward...", this, value, this.value)
if (value === "forward") main.forward();
else main.backward();
}
function reset() {
this.blur();
main.reset();
}
// animation controls
const controls = [
{ text: "Start Animation", handler: startStop, id: "startStop", display: "inline-block", value: "start", class: "anim1", width: "110px" },
{ text: "Halt", handler: haltResume, display: "none", value: "halt", class: "anim anim2", width: "60px" },
{ text: "Backward", handler: forwardBackward, display: "none", value: "backward", class: "anim anim3" },
{ text: "Forward", handler: forwardBackward, display: "none", value: "forward", class: "anim anim3" },
{ text: "Faster", handler: fasterSlower, display: "none", value: "faster", class: "anim anim4" },
{ text: "Slower", handler: fasterSlower, display: "none", value: "slower", class: "anim anim4" },
{ text: "Reset", handler: reset, display: "none", class: "anim anim3 anim4" }
];
container.selectAll("button")
.data(controls)
.enter().append("button")
.attr("id", function (d) { return d.id ? "anim_" + d.id : null; })
.style("display", "inline-block")
.style("cursor", "default")
.style("width", function (d) { return d.width ? d.width : "70px"; })
.style("text-align", "center")
.attr("class", function (d) { return d.class; })
.style("display", function (d) { /* return "inline-block"; */ return d.display; })
.attr("value", function (d) { return d.value ? d.value : null; })
// .attr("class", "reset")
.text(function (d) { return d.text; })
.on("click", function (d) { /* console.log("adfads", d.handler); */ d.handler.call(this); });
// set index
currPos = data.length - 1;
setInterval(function () {
if (animating && !inTimeout) go(0);
}, 100);
function go(useSpeed) {
inTimeout = true;
setTimeout(function () {
if (animating) {
currPos++;
if (currPos === data.length) currPos = 0;
oneCycle();
}
if (animating) go(speed);
else inTimeout = false;
}, useSpeed);
}
}
function oneCycle() {
// console.log("oneCycle")
const dateExtent = [];
dateExtent[0] = new Date(data[currPos].key);
dateExtent[1] = new Date(data[currPos].key);
dateExtent[1].setDate(dateExtent[1].getDate() + 7);
chart.brushExtent(dateExtent);
}
// action functions
main.reset = function () {
speed = 1000;
currPos = 0;
oneCycle();
// animating = false;
};
main.resume = function () {
animating = true;
};
main.stop = function () {
animating = false;
};
main.exit = function () {
animating = false;
// change this button text
d3.select("#anim_startStop").text("Start Animation").attr("value", "start");
// hide buttons
d3.selectAll(".anim").style("display", "none");
// ensure the halt/resume button says halt
d3.select(".anim2").text("Halt").attr("value", "halt");
};
main.slower = function () {
speed = Math.min(4000, speed * 2);
};
main.faster = function () {
speed = Math.max(250, speed / 2);
};
main.forward = function () {
if (ready && !animating) {
currPos++;
if (currPos === data.length) currPos = 0;
oneCycle();
} else console.log("not ready");
};
main.backward = function () {
if (ready && !animating) {
currPos--;
if (currPos < 0) currPos = data.length - 1;
oneCycle();
} else console.log("not ready");
};
// configuration functions
main.speed = function (_) {
if (!arguments.length) return speed;
speed = _;
return main;
};
main.chart = function (_) {
if (!arguments.length) return chart;
chart = _;
return main;
};
main.container = function (_) {
if (!arguments.length) return container;
container = _;
return main;
};
return main;
} // end animator

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.

Please see README.md for more information

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.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment