luluwuluying · April 9, 2016 05:10
diff --git a/index.html b/index.html
 <!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(["#e6d0d3", "#a64b57"]);


 //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.death;})); // setting the range of the input data
    console.log(error, states, deaths);
    // Loop through each state data value in the .csv file - 
    // add the deaths data to the geojson data.
    states.forEach(function(state) {
        // Grab State Name
        var dataState = state.statename; // name
        // Grab data value
        var dataValue = +state.death; // number

        // 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.death = dataValue;
            // 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) {
            // Get data value for visited
            var value = d.properties.death;
            return stateColor(value);
        })
        .on("mouseover", function(d) {
            div.transition()
               .duration(200)
               .style("display", null);
            div.html("<p>Fatality: " + d.properties.name + "  " + d.properties.death + "</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("State Crash Death Number")
    .labelFormat(d3.format("1f"))
    .scale(stateColor); // our existing color scale

    svg.select(".legendColors")
    .call(legendColors);


 } // end ready function

 </script>
 </body>
 </html>
diff --git a/statedeath.csv b/statedeath.csv
diff --git a/us-states.json b/us-states.json
	<!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(["#e6d0d3", "#a64b57"]);


	//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.death;})); // setting the range of the input data
	console.log(error, states, deaths);
	// Loop through each state data value in the .csv file -
	// add the deaths data to the geojson data.
	states.forEach(function(state) {
	// Grab State Name
	var dataState = state.statename; // name
	// Grab data value
	var dataValue = +state.death; // number

	// 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.death = dataValue;
	// 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) {
	// Get data value for visited
	var value = d.properties.death;
	return stateColor(value);
	})
	.on("mouseover", function(d) {
	div.transition()
	.duration(200)
	.style("display", null);
	div.html("<p>Fatality: " + d.properties.name + " " + d.properties.death + "</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("State Crash Death Number")
	.labelFormat(d3.format("1f"))
	.scale(stateColor); // our existing color scale

	svg.select(".legendColors")
	.call(legendColors);


	} // end ready function

	</script>
	</body>
	</html>
	statename	death
	Alabama	852
	Alaska	51
	Arizona	849
	Arkansas	483
	California	3,000
	Colorado	481
	Connecticut	276
	Delaware	99
	District of Columbia	20
	Florida	2,407
	Georgia	1,179
	Hawaii	102
	Idaho	214
	Illinois	991
	Indiana	783
	Iowa	317
	Kansas	350
	Kentucky	638
	Louisiana	703
	Maine	145
	Maryland	465
	Massachusetts	326
	Michigan	947
	Minnesota	387
	Mississippi	613
	Missouri	757
	Montana	229
	Nebraska	211
	Nevada	262
	New Hampshire	135
	New Jersey	542
	New Mexico	310
	New York	1,199
	North Carolina	1,289
	North Dakota	148
	Ohio	989
	Oklahoma	678
	Oregon	313
	Pennsylvania	1,208
	Rhode Island	65
	South Carolina	767
	South Dakota	135
	Tennessee	995
	Texas	3,382
	Utah	220
	Vermont	69
	Virginia	740
	Washington	436
	West Virginia	332
	Wisconsin	543
	Wyoming	87