D3 Examples - West Nile Virus (simplified)

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<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;
}
        
body {
    font: 11px sans-serif;
}
​
</style>
</head>
<body>
<script type="text/javascript">
​
/*  This visualization was made possible by modifying code provided by:
​
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(["pink", "red"]);
​
//Create SVG element and append map to the SVG
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
​
// Load in my states data
d3.csv("WestNile.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;
  //console.log("value", value, color(value));
​
    if (value && color(value)) {
        return color(value);
    } else {
        return "white";
    }
});
 
    });
​
});
</script>
</body>
</html>
​
    