Skip to content

Instantly share code, notes, and snippets.

@luluwuluying
Created April 10, 2016 18:25
Show Gist options
  • Save luluwuluying/6ab61852d36fd4991ccfbda1a7eef34b to your computer and use it in GitHub Desktop.
Save luluwuluying/6ab61852d36fd4991ccfbda1a7eef34b to your computer and use it in GitHub Desktop.
<!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;
}
/* 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>
<h2>crash death rates per state, 2013</h2>
<p class="intro">A modified version of the <a href="http://www.iihs.org/iihs/topics/t/general-statistics/fatalityfacts/state-by-state-overview/2013">Insurance Institute for Highway Safety Highway Loss Data Institute</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(["#fef4f4", "#ed6b6b"]);
//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, "statedeath.csv")
.await(ready);
function ready(error, json, states, deaths) {
stateColor.domain(d3.extent(states,function(s) { return s.rate;}));
console.log(error, states, deaths);
states.forEach(function(state) {
var dataState = state.statename;
var dataValue = +state.rate;
json.features.forEach(function(j) {
var jsonState = j.properties.name;
if (dataState == jsonState) {
j.properties.rate = dataValue;
}
});
}); // 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.rate;
return stateColor(value);
})
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("display", null);
div.html("<p>Death rate per 100,000 population: " + d.properties.name + " " + d.properties.rate + " %"+ "</p>")
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.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("State Crash Death Rate")
.labelFormat(d3.format("1f"))
.scale(stateColor);
svg.select(".legendColors")
.call(legendColors);
} // end ready function
</script>
</body>
</html>
statename death rate
Alabama 852 17.6
Alaska 51 6.9
Arizona 849 12.8
Arkansas 483 16.3
California 3000 7.8
Colorado 481 9.1
Connecticut 276 7.7
Delaware 99 10.7
District of Columbia 20 3.1
Florida 2407 12.3
Georgia 1179 11.8
Hawaii 102 7.3
Idaho 214 13.3
Illinois 991 7.7
Indiana 783 11.9
Iowa 317 10.3
Kansas 350 12.1
Kentucky 638 14.5
Louisiana 703 15.2
Maine 145 10.9
Maryland 465 7.8
Massachusetts 326 4.9
Michigan 947 9.6
Minnesota 387 7.1
Mississippi 613 20.5
Missouri 757 12.5
Montana 229 22.6
Nebraska 211 11.3
Nevada 262 9.4
New Hampshire 135 10.2
New Jersey 542 6.1
New Mexico 310 14.9
New York 1199 6.1
North Carolina 1289 13.1
North Dakota 148 20.5
Ohio 989 8.5
Oklahoma 678 17.6
Oregon 313 8
Pennsylvania 1208 9.5
Rhode Island 65 6.2
South Carolina 767 16.1
South Dakota 135 16
Tennessee 995 15.3
Texas 3382 12.8
Utah 220 7.6
Vermont 69 11
Virginia 740 9
Washington 436 6.3
West Virginia 332 17.9
Wisconsin 543 9.5
Wyoming 87 14.9
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment