Joymap

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

<!DOCTYPE html>
<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);

</script>
</body>
</html>

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