Built with blockbuilder.org
xxxxxxxxxx
<meta charset='utf-8'>
<title>NY Counties</title>
<style>
body {
margin: 0;
background-color: #eee;
}
.info {
position: absolute;
top: 20px;
left: 260px;
}
</style>
<div class="info"></div>
<svg width="960" height="500" stroke="#000" stroke-linejoin="round" stroke-linecap="round">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5"></feGaussianBlur>
</filter>
</defs>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>
// This demo modified slightly from https://bl.ocks.org/mbostock/4108203
var svg = d3.select("svg");
var defs = svg.select("defs");
// New York central state plane, EPSG: 2829
// (central meridian = - 76.5833..., latitute of origin = 40)
var projection = d3.geoTransverseMercator()
.rotate([76 + 35 / 60, - 40]);
var path = d3.geoPath()
.projection(projection);
var threshold = d3.scaleThreshold()
.domain([1, 10, 50, 200, 500, 2000, 8000, 30000])
.range(d3.schemeOrRd[9]);
// Configure the pie chart
var color = d3.scaleOrdinal(d3.schemeCategory10);
var radius = 80;
var pie = d3.pie()
.sort(null)
.value(function(d) { return d.value; });
var arcPath = d3.arc()
.outerRadius(radius)
.innerRadius(0);
var label = d3.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
svg.append("g")
.attr('id', "pie")
.attr('transform', 'translate(' + [radius + 60, radius + 40] + ')')
// Load the topojson and the population data
var counties = "https://raw.githubusercontent.com/umbcvis/classes/master/class-14/counties.json";
var population = "https://raw.githubusercontent.com/umbcvis/classes/master/class-14/population.json";
d3.queue()
.defer(d3.json, counties)
.defer(d3.json, population)
.await(ready);
// Wait for the data to arrive, then begin processing
function ready(error, us, population) {
if (error) throw error;
// Make the population data easy to query by FIPS code
var data = d3.map();
population.forEach(function(d, i) {
if (i === 0) return; // skip the first line in the population data
data.set(d[1] + d[2], +d[0]);
});
// Convert the topojson to an array of GeoJSON counties
var counties = topojson.feature(us, us.objects.counties);
// Get NY counties as array of GeoJSON features
var newyork = counties.features.filter(function(d) { return d.properties.STATEFP === '36' })
// Make the population & pie-chart data easy to query by FIPS code
var pieData = d3.map();
newyork.forEach(function(d, i) {
var pop = data.get(d.properties.GEOID);
var aland = d.properties.ALAND / 2589975.2356; // area in square miles
d.populationDensity = pop / aland; // population per square mile
d.population = pop; // population
d.land = aland; // land aread (square miles)
pieData.set(d.properties.GEOID, [{ key: "population", value: pop / 100 },
{ key: "land", value: aland },
{ key: "density", value: d.populationDensity }] )
})
projection.fitExtent([[10,10],[960 - 20, 500 - 20]], { type: "FeatureCollection", features: newyork });
// Inspect the data in the developer console
console.log('here is the population data:', population[0], population[1]);
console.log('here is one of the counties:', newyork[0]);
projection.fitExtent([[10,10],[960 - 20, 500 - 20]], { type: "FeatureCollection", features: newyork });
// Plot the boundary of the US
svg.append("path")
.attr("id", "nation")
.attr("d", path(topojson.merge(us, us.objects.counties.geometries)))
.attr("stroke-width", 2)
// Drop-shadow styling (this is blurred shadow)
svg.append("use")
.attr("xlink:href", "#nation")
.attr("fill-opacity", 0.2)
.attr("filter", "url(#blur)");
// Drop-shadow styling (this is white overlay)
svg.append("use")
.attr("xlink:href", "#nation")
.attr("fill", "#fff");
// Plot the state boundaries
svg.append("path")
.attr("stroke-width", 1)
.attr("fill", "none")
.attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a.properties.STATEFP !== b.properties.STATEFP; })));
// Plot the individual counties
svg.selectAll('path.county')
.data( newyork )
.enter().append("path")
.attr("d", path)
.attr("class", "county")
.attr("fill", "#fff")
.attr("stroke", "#aaa")
.attr("stroke-width", 0.5)
.on('mouseover', function(d, i) {
console.log('mouseover:', i, d);
d3.select(this).attr('fill', 'crimson');
d3.select(".info").html(d.properties.NAME + " County"
+ "<br>Population: "
+ d3.format(",d")(data.get(d.properties.GEOID)))
})
.on('mouseout', function(d) {
d3.select(this).attr('fill', '#fff');
d3.select(".info").html("")
});
}
</script>
https://d3js.org/d3.v4.min.js
https://unpkg.com/topojson-client@3
https://d3js.org/d3-scale-chromatic.v1.min.js