Utah Fluoride

A choropleth of Water Fluoridation levels in the state of Utah.

<!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>
  
  
  
  <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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js