Skip to content

Instantly share code, notes, and snippets.

@NPashaP

NPashaP/.block

Created January 12, 2017 03:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save NPashaP/7b42c8e45a23bfa28546c975bcdcc2a6 to your computer and use it in GitHub Desktop.
Save NPashaP/7b42c8e45a23bfa28546c975bcdcc2a6 to your computer and use it in GitHub Desktop.
Download ZIP
US County Map - Joining Data
Raw
.block
license: gpl-3.0
Raw
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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment