Zoomable Choropleth

Block-a-Day #11. Clicking on a state zooms the map to that state and shows county-level data.

Data Sources: BLS.

What I Learned: Trying out the new projection.fitExtent(). In the process, learned about adaptive resampling, which can break interpolation by changing the number of coordinates in a path at different zoom levels. Fixed the resulting bug by setting projection.precision() to 0, effectively turning off resampling.

What I'd Do With More Time: Finding a way to include Alaska and Hawaii is an obvious next step (albersUSA didn't immediately work with this technique). Could probably use more detailed county shapefiles.

Block-a-Day

Just what it sounds like. For fifteen days, I will make a D3.js v4 block every single day. Rules:

Ideas over implementation. Do something novel, don't sweat the details.
No more than two hours can be spent on coding (give or take).
Every. Single. Day.

Previously

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { background: #333; }
path { stroke: #333; stroke-width: 1; }
path:hover { stroke-width: 3; }
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960
var height = 600
var padding = 20

var color = d3.scaleThreshold()
    .domain([0.028, 0.038, 0.048, 0.058, 0.068, 0.078])
    .range(['#4d9221', '#a1d76a', '#e6f5d0', '#f7f7f7', '#fde0ef', '#e9a3c9', '#c51b7d'])

var projection = d3.geoAlbers()
    .precision(0)
    .scale(height * 2).translate([width / 2, height / 2])

var path = d3.geoPath().projection(projection)

var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height)

d3.queue()
    .defer(d3.csv, 'data.csv', function (d) {
        return {
            id: +(d.state + d.county),
            state: d.state,
            county: d.county,
            unemployment: +d.unemployment
        }
    })
    .defer(d3.json, 'us-states.json')
    .defer(d3.json, 'us-counties.json')
    .awaitAll(initialize)

function initialize(error, results) {
    if (error) { throw error }

var data = results[0]
    var states = topojson.feature(results[1], results[1].objects.states).features
    var counties = topojson.feature(results[2], results[2].objects.counties).features

states.forEach(function (f) {
        f.properties = data.find(function (d) { return d.id === f.id })
    })

counties.forEach(function (f) {
        f.properties = data.find(function (d) { return d.id === f.id }) || {}
    })

var statePaths = svg.selectAll('.state')
        .data(states)
        .enter().append('path')
        .attr('class', 'state')
        .attr('d', path)
        .style('fill', function (d) { return color(d.properties.unemployment) })
        .on('click', function (d) { stateZoom(d.id) })

function usZoom() {
        var t = d3.transition().duration(800)

projection.scale(height * 2).translate([width / 2, height / 2])

statePaths.transition(t)
            .attr('d', path)
            .style('fill', function (d) { return color(d.properties.unemployment) })

svg.selectAll('.county')
            .data([])
            .exit().transition(t)
            .attr('d', path)
            .style('opacity', 0)
            .remove()
    }

function stateZoom(id) {
        var state = states.find(function (d) { return d.id === id })
        var stateCounties = counties.filter(function (d) {
            return d.id > id && d.id < id + 1000
        })

var t = d3.transition().duration(800)

var countyPaths = svg.selectAll('.county')
            .data(stateCounties, function (d) { return d.id })

var enterCountyPaths = countyPaths.enter().append('path')
            .attr('class', 'county')
            .attr('d', path)
            .style('fill', function (d) { return color(d.properties.unemployment) })
            .style('opacity', 0)
            .on('click', function () { usZoom() })

projection.fitExtent(
            [[padding, padding], [width - padding, height - padding]],
            state
        )

statePaths.transition(t)
            .attr('d', path)
            .style('fill', '#444')

enterCountyPaths.transition(t)
            .attr('d', path)
            .style('opacity', 1)

countyPaths.exit().transition(t)
            .attr('d', path)
            .style('opacity', 0)
            .remove()
    }
}

</script>
</body>

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

https://d3js.org/topojson.v1.min.js