2016 Zika Total Cases Per 100,000 People

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 anonymous's block: Virus chloropleth

<!DOCTYPE html>
<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>
  
  
  
  <h1>Total Zika Virus Cases Per 100,000 People 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 per 100000 people";
  
var color = d3.scale.log()
			  .range(["aqua", "deeppink"]);

//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("zika stats 2016.csv", function(data) {
  console.log(data);
    data.forEach(function(d){ 
      d["States"] = +d["States"]; 
      d["symptomatic disease cases"] = +d["symptomatic disease cases"]; 
      d["total cases/capita"] = +d["total cases/capita"]; 
      d["total cases per 100000 people"] = +d["total cases per 100000 people"]; 
      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