Gooey Exploding Scatterplot

Block-a-Day #10. In this Gapminder recreation, continents can be exploded into their constituent countries with a paintball-splatter-like effect.

Data Sources: Gapminder.

What I Learned: I've wanted to build something with this technique ever since I saw Nadieh Bremer's demonstrations of it. My addition is to create a separate filter definition for each continent, enabling them to be individually transitioned. For more details, check out her original blog post and follow-up.

What I'd Do With More Time: The explosions have to wait until the next year tick. I'd like to be able to explode them immediately, but I'm not aware of a way to do this with d3.transition alone, so it would probably require a custom animation loop.

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

forked from cmgiven's block: Gooey Exploding Scatterplot

forked from maritrinez's block: Gooey Exploding Scatterplot

<!DOCTYPE html>
<meta charset="utf-8">
<style>
text { fill: #333; }
text.year {
    font-family: monospace;
    pointer-events: none;
}
#controls {
    position: absolute;
    top: 15px; right: 15px;
}
</style>
<body>
<div id="controls">
    <button id="explode">Explode All</button>
    <button id="collapse">Collapse All</button>
</div>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var years = d3.range(1950, 2015 + 1)
var interval = 500

var blurStable = '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 5 -7'
var blurIn = '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -11'
var blurOut = '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 15 -7'

var margin = { top: 15, right: 15, bottom: 45, left: 55 }
var width = 960 - margin.left - margin.right
var height = 500 - margin.top - margin.bottom

var svg = d3.select('body')
    .append('svg')
    .attr('width', width + margin.left + margin.top)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

var x = d3.scaleLinear().range([0, width])
var y = d3.scaleLinear().range([height, 0])
var r = d3.scaleSqrt().range([0, 50])
var color = d3.scaleOrdinal()
    .range(['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#e6ab02', '#666666'])

var xAxis = d3.axisBottom().scale(x)
var yAxis = d3.axisLeft().scale(y)

var yearLabel = svg.append('text')
    .attr('class', 'year')
    .attr('x', width / 2)
    .attr('y', height / 2)
    .attr('dy', '.28em')
    .style('font-size', width / 3)
    .style('text-anchor', 'middle')
    .style('font-weight', 'bold')
    .style('opacity', 0.2)
    .text('1950')

d3.csv('data.csv', function (d) {
    return {
        country: d.country,
        year: d.year,
        life_expectancy: +d.life_expectancy,
        total_fertility: +d.total_fertility,
        population: +d.population,
        continent: d.continent
    }
}, initialize)

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

x.domain([0, d3.max(data, function (d) { return d.total_fertility })]).nice()
    y.domain([0, d3.max(data, function (d) { return d.life_expectancy })]).nice()
    r.domain([0, d3.max(data, function (d) { return d.population })])

data = d3.nest()
        .key(function (d) { return d.year })
        .key(function (d) { return d.continent })
        .entries(data)

data.forEach(function (d) {
        d.values.forEach(function (e) {
            e.population = d3.sum(e.values, function (f) { return f.population })
            e.total_fertility = d3.sum(e.values, function (f) {
                return f.population * f.total_fertility
            }) / e.population
            e.life_expectancy = d3.sum(e.values, function (f) {
                return f.population * f.life_expectancy
            }) / e.population
            e.values.forEach(function (f) { f.parent = e })
        })
    })

var uniqueContinents = data[0].values.map(function (d) { return d.key })

// from https://www.visualcinnamon.com/2016/06/fun-data-visualizations-svg-gooey-effect.html
    // modified to create a filter for each continent group, which can be individually transitioned
    var filters = svg.append('defs')
        .selectAll('filter')
        .data(uniqueContinents)
        .enter().append('filter')
        .attr('id', function (d) { return 'gooeyCodeFilter-' + d.replace(' ', '-') })

filters.append('feGaussianBlur')
        .attr('in', 'SourceGraphic')
        .attr('stdDeviation', '10')
        .attr('color-interpolation-filters', 'sRGB')
        .attr('result', 'blur')

var blurValues = filters.append('feColorMatrix')
        .attr('class', 'blurValues')
        .attr('in', 'blur')
        .attr('mode', 'matrix')
        .attr('values', blurStable)
        .attr('result', 'gooey')

filters.append('feBlend')
        .attr('in', 'SourceGraphic')
        .attr('in2', 'gooey')

svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(xAxis)
        .append('text')
        .attr('x', width)
        .attr('y', 30)
        .style('text-anchor', 'end')
        .style('font-weight', 'bold')
        .text('Fertility (births per woman)')

svg.append('g')
        .attr('class', 'y axis')
        .call(yAxis)
        .append('text')
        .attr('transform', 'rotate(-90)')
        .attr('x', 0)
        .attr('y', -30)
        .style('text-anchor', 'end')
        .style('font-weight', 'bold')
        .text('Life expectancy (years)')

var yearIndex = 0
    var year = '' + years[yearIndex]
    var exploded = d3.set()
    var blurTransition = d3.set()

d3.select('#explode').on('click', function () {
        uniqueContinents.forEach(function (d) {
            if (!exploded.has(d)) {
                exploded.add(d)
                blurTransition.add(d)
            }
        })
    })

d3.select('#collapse').on('click', function () {
        uniqueContinents.forEach(function (d) {
            if (exploded.has(d)) {
                exploded.remove(d)
                blurTransition.add(d)
            }
        })
    })

var continents = svg.selectAll('.continent')
        .data(data[0].values)
        .enter().append('g')
        .attr('class', 'continent')
        .style('filter', function (d) { return 'url(#gooeyCodeFilter-' + d.key.replace(' ', '-') + ')' })

continents.append('circle')
        .attr('class', 'aggregate')
        .attr('cx', width / 2)
        .attr('cy', height / 2)
        .style('fill', function (d) { return color(d.key) })
        .on('click', function (d) { exploded.add(d.key); blurTransition.add(d.continent) })
        .append('title').text(function (d) { return d.key })

update()
    d3.interval(incrementYear, interval)

function incrementYear() {
        year = '' + years[++yearIndex >= years.length ? yearIndex = 0 : yearIndex]
        update()
    }

function update() {
        yearLabel.transition().duration(0).delay(interval / 2).text(year)
        continents = continents.data(
            data.find(function (d) { return d.key === year }).values,
            function (d) { return d.key }
        )

var countries = continents.selectAll('.country')
            .data(function (d) { return d.values }, function (d) { return d.country })

countries.exit().remove()

var enterCountries = countries.enter().insert('circle', '.aggregate')
            .attr('class', 'country')
            .attr('cx', width / 2)
            .attr('cy', height / 2)
            .style('fill', function (d) { return color(d.continent) })
            .on('click', function (d) { exploded.remove(d.continent); blurTransition.add(d.continent) })

enterCountries.append('title').text(function (d) { return d.country })

countries = countries.merge(enterCountries)

var t = d3.transition()
            .ease(d3.easeLinear)
            .duration(interval)

continents.select('.aggregate')
            .transition(t)
            .attr('r', function (d) { return exploded.has(d.key) ? 0 : r(d.population) })
            .attr('cx', function (d) { return x(d.total_fertility) })
            .attr('cy', function (d) { return y(d.life_expectancy) })

countries
            .transition(t)
            .attr('r', function (d) { return r(d.population) })
            .attr('cx', function (d) { return x((exploded.has(d.continent) ? d : d.parent).total_fertility) })
            .attr('cy', function (d) { return y((exploded.has(d.continent) ? d : d.parent).life_expectancy) })

blurValues
            .transition(t)
            .attrTween('values', function (d) {
                if (blurTransition.has(d)) {
                    blurTransition.remove(d)

if (exploded.has(d)) {
                        return d3.interpolateString(blurIn, blurOut)
                    } else {
                        return d3.interpolateString(blurOut, blurIn)
                    }
                }

return function () { return blurStable }
            })
    }
}

</script>
</body>

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