Population of Wisconsin.
Not totally satisfied with the result so far. Need to deal with coastlines and borders differently. Also there's a weirdly shaped lump on Stevens Point.
Inspired by Population Lines
xxxxxxxxxx
<html>
<head>
<style>
svg {
background-color: #ddd;
}
.line {
fill: none;
stroke: #666;
}
.area {
fill: #ddd;
}
</style>
</head>
<body>
<svg width="960" height="800"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var yOffset = 0.33;
function row(d) {
return {
x: +d.x,
y: +d.y,
population: +d.population
};
}
d3.queue()
.defer(d3.csv, 'population-grid.csv', row)
.defer(d3.json, 'wisconsin.json')
.await(ready);
function ready(error, data, wisconsin) {
if (error) throw error;
var svg = d3.select('svg'),
width = +svg.attr('width'),
height = +svg.attr('height'),
extent = [[0, 20],[width, height - 20]];
var projection = d3.geoIdentity()
.reflectY(true)
.fitExtent(extent, wisconsin);
var path = d3.geoPath()
.projection(projection);
svg.append('defs').append('clipPath').attr('id', 'wisconsin-border')
.append('path').datum(wisconsin)
.attr('d', path);
var tx = projection.translate()[0],
ty = projection.translate()[1],
k = projection.scale(),
x = function(d) { return (d * k) + tx; },
y = function(d) { return (d * -k) + ty; };
var dy = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.population; })])
.range([0, -height * yOffset]);
var curve = d3.curveCardinal.tension(0);
var line = d3.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return dy(d.population); })
.curve(curve);
var area = d3.area()
.x(function(d) { return x(d.x); })
.y0(dy(0))
.y1(function(d) { return dy(d.population); })
.curve(curve);
var lineData = d3.nest()
.key(function(d) { return d.y; })
.entries(data)
.reverse();
var lump = svg.append('g').attr('class', 'lumps')
.attr('clip-path', 'url(#wisconsin-border)')
.selectAll('.lump').data(lineData)
.enter().append('g')
.attr('class', 'lump')
.attr('transform', function(d) { return 'translate(0,' + y(+d.key) + ')'})
.datum(function(d) { return d.values; });
lump.append('path')
.attr('class', 'area')
.attr('d', area);
lump.append('path')
.attr('class', 'line')
.attr('d', line);
}
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js