|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<link href="https://fonts.googleapis.com/css?family=Gruppo" rel="stylesheet"> |
|
<meta charset="utf-8"> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<style type="text/css"> |
|
|
|
/* On mouse hover, lighten state color */ |
|
path:hover { |
|
fill-opacity: .9; |
|
} |
|
|
|
h1 { |
|
text-align: center; |
|
font-size: xx-large; |
|
font-family: 'Gruppo', cursive; |
|
} |
|
|
|
body { |
|
font: 11px sans-serif; |
|
} |
|
|
|
svg { |
|
display: block; |
|
margin: auto; |
|
} |
|
|
|
div.tooltip { |
|
color: orange; |
|
background-color: #686868; |
|
padding: .5em; |
|
font-size: medium; |
|
border-radius: 2px; |
|
opacity: 0.9; |
|
position: absolute; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
|
|
<!-- The title for your page. Make sure your title matches the |
|
data shown on your map. --> |
|
|
|
<h1>Total West Nile Virus Cases in 2016</h1> |
|
|
|
<script type="text/javascript"> |
|
|
|
/* This visualization was made possible by modifying code provided by: |
|
|
|
Michelle Chandra’s Basic US State Map - D3 |
|
http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922 |
|
|
|
Scott Murray, Choropleth example from "Interactive Data Visualization for the Web" |
|
https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html |
|
|
|
Malcolm Maclean, tooltips example tutorial |
|
http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html |
|
|
|
Mike Bostock, Pie Chart Legend |
|
http://bl.ocks.org/mbostock/3888852 */ |
|
|
|
|
|
//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 |
|
|
|
/* set color_by variable to column header you want to display */ |
|
|
|
var color_by = "Total cases"; |
|
|
|
var color = d3.scale.log() |
|
.range(["aqua", "midnightblue"]); |
|
|
|
//Create SVG element and append map to the SVG |
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
var tooltip = d3.select('body').append('div') |
|
.attr('class', 'hidden tooltip'); |
|
|
|
// Load in my states data |
|
d3.csv("west nile.csv", function(data) { |
|
console.log(data); |
|
data.forEach(function(d){ |
|
d["Neuroinvasive Disease Cases"] = +d["Neuroinvasive Disease Cases"]; |
|
d["Non–neuroinvasive Disease Cases"] = +d["Non–neuroinvasive Disease Cases"]; |
|
d["Total cases"] = +d["Total cases"]; |
|
d["Deaths"] = +d["Deaths"]; |
|
d["Presumptive viremic blood donors"] = +d["Presumptive viremic blood donors"]; |
|
}); |
|
|
|
color.domain([d3.min(data, function(d) { return d[color_by] || Infinity;; }),d3.max(data, function(d) { return d[color_by]; })]); // setting the range of the input data |
|
|
|
//console.log([d3.min(data, function(d) { console.log("color",d[color_by]); return d[color_by] || Infinity;; }),d3.max(data, function(d) { return d[color_by]; })]) |
|
|
|
// Load GeoJSON data and merge with states data |
|
d3.json("us-states.json", function(json) { |
|
|
|
// Loop through each state data value in the .csv file |
|
for (var i = 0; i < data.length; i++) { |
|
//console.log("i", i, data[i][color_by]); |
|
|
|
// Grab State Name |
|
var dataState = data[i].State; |
|
var dataValue = data[i][color_by]; |
|
|
|
// Find the corresponding state inside the GeoJSON |
|
for (var j = 0; j < json.features.length; j++) { |
|
var jsonState = json.features[j].properties.name; |
|
//console.log(jsonState); |
|
|
|
if (dataState == jsonState) { |
|
|
|
// Copy the data value into the JSON |
|
json.features[j].properties.cases = dataValue; |
|
//console.log(jsonState,json.features[j].properties.cases); |
|
|
|
// Stop looking through the JSON |
|
break; |
|
} |
|
} |
|
} |
|
|
|
// 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("stroke", "#353535") |
|
.style("stroke-width", "1") |
|
.style("fill", function(d) { |
|
|
|
// Get data value |
|
var value = d.properties.cases; |
|
|
|
if (value && color(value)) { |
|
return color(value); |
|
} else { |
|
return "white"; |
|
} |
|
}) |
|
.on('mousemove', function(d) { |
|
console.log(d); |
|
var mouse = d3.mouse(svg.node()).map(function(d) { |
|
return parseInt(d); |
|
}); |
|
tooltip.classed('hidden', false) |
|
.attr('style', 'left:' + (mouse[0] + 15) + |
|
'px; top:' + (mouse[1] + 50) + 'px') |
|
.html(d.properties.name + ": " + d.properties.cases); |
|
}) |
|
.on('mouseout', function() { |
|
tooltip.classed('hidden', true); |
|
});; |
|
|
|
}); |
|
|
|
}); |
|
</script> |
|
</body> |
|
</html> |
