Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Terrorism in the United States 2000-2016
<!DOCTYPE html>
<! A mod of Michelle Chandra's block: http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922 -->
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
/* On mouse hover, lighten state color */
path {
stroke: gray;
stroke-width: 1;
}
circle {
fill: orange;
fill-opacity: .8;
}
p.intro {
width: 500px;
}
p.credit {
width: 500px;
font-size: 10px;
}
/* Style for Custom Tooltip */
div.tooltip {
position: absolute;
text-align: center;
min-width: 100px;
height: 30px;
padding: 2px;
font: 12px sans-serif;
background: white;
border: 1px orange solid;
border-radius: 5px;
pointer-events: none;
}
.tooltip p {
margin: 5px;
}
/* Legend Font Style */
body {
font: 11px sans-serif;
}
/* Legend Position Style */
.legend {
position:absolute;
left:800px;
top:350px;
}
</style>
</head>
<body>
<h1>Terrorism in the United States, 2000-2016</h1>
<p class="intro">The map below shows a summary of terrorist incidents from 2000-2016 (as of February). This dataset was acquired via <a href="http://www.johnstonsarchive.net/terrorism/wrjp255a.html">Johnston's Archive</a></p>
<p class="credit">A modified version of the <a href="http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922">block by Michelle Chandra</a>.</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.js"></script>
<script type="text/javascript">
//Width and height of map
var width = 960;
var height = 500;
// D3 Projection
var projection = d3.geo.albersUsa()
.translate([width/2, height/2]) // translate to center of screen
.scale([1000]); // scale things down so see entire US
// Define path generator
var path = d3.geo.path() // path generator that will convert GeoJSON to SVG paths
.projection(projection); // tell path generator to use albersUsa projection
// Define linear scale for output
var stateColor = d3.scale.linear()
.range(["#ffffff", "#f83600"]);
//Create SVG element and append map to the SVG
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// Append Div for tooltip to SVG
var div = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("display", "none");
queue()
.defer(d3.json, "us-states.json")
.defer(d3.csv, "us_terrorism.csv")
.await(ready);
function ready(error, json, states, incidents) {
stateColor.domain(d3.extent(states,function(s) { return s.count_inc;})); // setting the range of the input data
// Loop through each state data value in the .csv file -
// add the visits data to the geojson data.
states.forEach(function(state) {
// Grab State Name
var dataState = state.state_name; // name
// Grab data values
var dataValue = +state.count_inc;// number
var dataKilled = +state.killed;
// Find the corresponding state inside the GeoJSON
json.features.forEach(function(j) {
var jsonState = j.properties.name;
if (dataState == jsonState) { // assumes the names will match...
// Copy the data value into the JSON
j.properties.terrorism = dataValue;
j.properties.killed = dataKilled;
j.properties.sname = dataState;
// Stop looking through the JSON
}
});
}); // ends data merge
// Bind the data to the SVG and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d) {
var value = d.properties.terrorism;
return stateColor(value);
})
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("display", null);
div.html("<p>" + "<b>" + d.properties.sname + "</b> <br/>" + "# of Persons Killed in Terrorist Attacks:" + " " + d.properties.killed + "</p>")
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
// fade out tooltip on mouse out
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("display", "none");
});
// svg.selectAll("circle")
// .data(cities)
// .enter()
// .append("circle")
// .attr("cx", function(d) {
// return projection([d.lon, d.lat])[0];
// })
// .attr("cy", function(d) {
// return projection([d.lon, d.lat])[1];
// })
// .attr("r", function(d) {
// return Math.sqrt(d.killed) * 4;
// })
// .on("mouseover", function(d) {
// div.transition()
// .duration(200)
// .style("display", null);
// div.html("<p>Total Number of Persons Killed" + d.killed + ".</p>")
// .style("left", (d3.event.pageX + 10) + "px")
// .style("top", (d3.event.pageY - 28) + "px");
// })
// // fade out tooltip on mouse out
// .on("mouseout", function(d) {
// div.transition()
// .duration(500)
// .style("display", "none");
// });
svg.append("g")
.attr("class", "legendColors")
.attr("transform", "translate(800, 300)"); // where we put it on the page!
var legendColors = d3.legend.color()
.shapeWidth(20)
.title("Terrorist Incidents")
.labelFormat(d3.format("1f"))
.scale(stateColor); // our existing color scale
svg.select(".legendColors")
.call(legendColors);
} // end ready function
</script>
</body>
</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
state_name count_inc killed injured
Alabama 2 12 7
Alaska 1 0 0
Arizona 1 6 13
Arkansas 1 1 1
California 7 20 43
Colorado 1 12 58
Washington DC 8 18 14
Connecticut 1 28 3
Delaware 0 0 0
Florida 2 1 11
Georgia 1 0 0
Hawaii 0 0 0
Idaho 0 0 0
Illinois 3 0 0
Indiana 0 0 0
Iowa 0 0 0
Kansas 2 4 0
Kentucky 0 0 0
Louisiana 2 2 23
Maine 0 0 0
Maryland 7 8 2
Massachusetts 3 5 266
Michigan 3 2 4
Minnesota 1 10 7
Mississippi 1 7 8
Missouri 0 0 0
Montana 0 0 0
Nebraska 0 0 0
Nevada 2 10 7
New Hampshire 0 0 0
New Jersey 2 1 0
New Mexico 0 0 0
New York 14 2777 8707
North Carolina 1 0 9
North Dakota 0 0 0
Ohio 4 1 4
Oklahoma 1 1 2
Oregon 1 0 0
Pennsylvania 6 52 8
Rhode Island 0 0 0
South Carolina 1 9 1
South Dakota 0 0 0
Tennessee 2 8 9
Texas 10 27 88
Utah 0 0 0
Virginia 9 228 219
Vermont 0 0 0
Washington 4 4 5
Wisconsin 0 0 0
West Virginia 0 0 0
Wyoming 1 7 4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment