block by NPashaP 7b42c8e45a23bfa28546c975bcdcc2a6

US County Map - Joining Data

Full Screen

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.state-border {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}
.counties {
  fill: #eee;
  stroke: #fff;
  stroke-width: .5px;
}
.county-border{
  fill: none;
  stroke:#fff;
  stroke-width:.5px;
}
.county-name text{
  font-family:Roboto;
  font-size: .6rem;
  text-anchor: middle;
  pointer-events:none;
}
.legend{
  font-size:14px;
}
.title{
  font-size:20px;
  text-anchor: middle;  
}
</style>
<body>
<svg></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="//vizjs.org/viz.v1.2.1.min.js"></script>
<script>

var width=960, height=840;
var dataCSVurl ="https://gist.githubusercontent.com/NPashaP/eb662c80cd213e9e2ce14913b16052c5/raw/95d76fadae95c5c3e4b161f1f25fc78f2e95d2ff/USCountiesDemographicProfile2010.csv";
 
d3.json(viz.maps.uscountyurl, function(error, uscjson) {
  if (error) throw error;	
  
  viz.maps.uscounties=uscjson;

  d3.csv(dataCSVurl, function(error, demdata) {
    if (error) throw error;	  
	  
  //color map for fill
	var fill = d3.scaleThreshold()
		  .domain([850, 900, 950, 1000])
		  .range([,"#fdae61","#fee08b","#e6f598","#abdda4"]);
		
    var counties = viz.uscs()
      .state('IA')
      .height(height)
      .width(width)
      .data(demdata)
      .countyFIPS(function(d){ return d.GEOID10;})
      .fill(function(d){ return fill(1000*d.DP0010039/d.DP0010020);});
	
    d3.select("svg")
		  .attr("width",width)
		  .attr("height",height)
		  .call(counties);
    
	// create title
	d3.select("svg")
		.append("text")
		.attr("class","title")
		.attr("x",width/2).attr("y",30)
		.text("Number of Females per 1000 Males in Iowa");
	
  //create legend
	var lg = viz.lg().width(600).height(18).rows(1)
		.data(["850-899", "900-949", "950-999", "1000-1100"])
		.fill(function(d){ return fill(+(d.key.split("-")[0]));});
	
	d3.select("svg").append("g")
		.attr("transform","translate(230,70)")
		.attr("class","legend").call(lg);

  });
}); 

// adjust the bl.ocks frame dimension.
d3.select(self.frameElement).style("height",height+"px").style("width",width+"px");  
</script>