D3 Examples - Utah Fluoride

xxxxxxxxxx
 
<!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: .85;
}
  
  h1 {
    text-align: center;
    font-size: x-large;  
        font-family: 'Helvetica', cursive;
  }
        
  body {
    font: 11px sans-serif;
  }
  
  svg {
    
    width="120" height="120"
    display: block;
    margin: auto;
    
  }
​
  div.tooltip {
    color: black;
    background-color: #ffffff;
    padding: .5em;
    font-size: medium;
    border-radius: 2px;
    opacity: 0.8;
    position: absolute;
   }
​
</style>
</head>
<body>
  
  <!-- The title for your page. Make sure your title matches the
  data shown on your map. -->
  
  <h1>Fluoride in Utah Public Water: Parts per Million by County </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.mercator()
                   .translate([width*8,6* height+10])    // translate to center of screen
                   .scale([3680]);          // 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 = "AVG mg/L";
  
var color = d3.scale.log()
              .range(["#ebffd1", "#2c7fb8"]);
var file_url = 'https://raw.githubusercontent.com/heillygalvez/Fluoridation/master/fluoride_csv.csv';
​
var json_url = "https://raw.githubusercontent.com/heillygalvez/Fluoridation/master/utah_counties.GeoJSON";
​
//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 counties data
d3.csv(file_url, function(data) {
  console.log(data);
    data.forEach(function(d){ 
      d["AVG mg/L"] = +d["AVG mg/L"];  
      });   
​
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 counties data
d3.json(json_url, 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 County Name
    var dataCounty = data[i].COUNTY;
  var dataValue = data[i][color_by];
​
    // Find the corresponding county inside the GeoJSON
    for (var j = 0; j < json.features.length; j++)  {
        var jsonCounty = json.features[j].properties.NAME;
    //console.log(jsonState);
​
        if (dataCounty == jsonCounty) {
​
            // Copy the data value into the JSON
            json.features[j].properties.ALAND = 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.ALAND;
​
    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 + ": " + Math.round(d.properties.ALAND*1000)/1000 + " ppm");
                })
                .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                });;
 
    });
​
});
</script>
</body>
</html>
​
    