A D3 map of West Nile virus and Zika virus infections in the United States. The map is being used by GEAR UP Virginia (http://www.schev.edu/index/students-and-parents/resources/gear-up) at James Madison University as part of the "Bugs to Barcodes" project. This was built by modifying Michelle Chandra’s Basic US State Map - D3, which was built by modifying choropleth example code by Scott Murray, tooltip example code by Malcolm Maclean, and legend code example by Mike Bostock.
forked from michellechandra's block: Basic US State Map - D3
forked from scresawn's block: West Nile Virus
forked from scresawn's block: Virus chloropleth
forked from scresawn's block: Virus chloropleth
xxxxxxxxxx
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Gruppo" rel="stylesheet">
<meta charset="utf-8">
<script src="https://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 Zika 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
https://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
https://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
Mike Bostock, Pie Chart Legend
https://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("State data Zika 2016.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>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js