Utah - cleaned Districts file

forked from anonymous's block: fresh block

forked from tomshanley's block: Utah - topojson merge

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <script src="https://unpkg.com/topojson-server@3"></script>
  <script src="https://unpkg.com/topojson-client@3"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <div id="choropleth"></div>
  <script>
    // Get target element's width and use aspect ratio to set height
var div_id  = "choropleth",
		width   = document.getElementById(div_id).clientWidth,
		height  = width*(2/3),
		center  = [-113.3010264, 39.7287941],
		// Set margins around rendered map
		margins = {"top": 0, "bottom": 0, "left": 0, "right": 0};

var projection = d3.geoMercator().scale(5000).center(center).translate([width/2.75, height/2.2]);
// Geo-paths take a GeoJSON geometry/feature object and generate an SVG path data string or render the path to a Canvas
var path = d3.geoPath().projection(projection);

function ready(error, utah, districts, suicide_rates){
	if(error) console.error(error);
  
  console.log(districts)
  
  var min = d3.min(suicide_rates, function(d){ return +d.rate_per_100k; }),
			max = d3.max(suicide_rates, function(d){ return +d.rate_per_100k; });

var color = d3.scaleQuantize()
								.domain([min, max])
								.range(d3.schemeReds[9]);

function color_fill(data){
		var element = suicide_rates.find(function(element){ return element.county == data.properties.name; });
		data.rate = element.rate_per_100k;
		return color(data.rate);
	}

// Select target element and attach <svg> and <g> elements
	var svg = d3.select("#" + div_id)
		.append("svg")
			// Set SVG element's top left corner and width/height attributes
			.attr("viewBox",margins.top + " " + margins.left + " " + (width - margins.right) + " " + (height - margins.bottom))
			// Supposed to make map responsive. Works sometimes.
			.attr("preserveAspectRatio", "xMidYMid meet")
			// Group together map paths and location markers	
		.append('g')
			.attr('class', div_id + "_group");

// Group together country shape paths and enter data
	svg.append("g")
		 .attr("class", div_id + "_counties")
		 .selectAll("path")
		 .data(utah.features)
		 .enter()
		 // Render and style map
		 .append("path")
			 .attr("d", path)
			 .attr("stroke", "#fff")
			 .attr("fill", function(d) { return color_fill(d); })
			 .attr("stroke-width", "0.5px")
		 .append("title")
			 .text(function(d) { return d.rate + "%"; });
  
  svg.append("g")
		 .attr("class", div_id + "_border")
		 .selectAll("path")
		 .data(districts.features)
  		.enter()
  		.append("path")
			 .attr("d", path)
			 .attr("stroke", "#fff")
			 .attr("fill", "none")
			 .attr("stroke-width", "3px")
   .attr("stroke", "black")

} // Close function ready(error, utah, suicide_rates){...

d3.queue()
	.defer(d3.json, "https://rawgit.com/becausealice2/FA-viz/master/suicide_rates/utah-counties.json")
	.defer(d3.json, "utah-districts.geojson")
	.defer(d3.csv, "https://rawgit.com/becausealice2/FA-viz/master/suicide_rates/suicide-by-health-district.csv")
.await(ready);

</script>
</body>

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

https://d3js.org/d3-scale-chromatic.v1.min.js

https://unpkg.com/topojson-server@3

https://unpkg.com/topojson-client@3