Health and Wealth of Nations, 1800-2009

An animated visualization charting inflation-adjusted income per capita against life expectancy in 180 nations from 1800 to 2009. Each circle represents a nation, and changes in size to represent changes in the nation’s population. Hover over the circle to see the nation’s name.

Color key

Yellow = East Asian & Pacific countries

Orange = South Asian countries

Lime green = European & Central Asian countries

Pink = North & South American countries

Turquoise = Sub-Saharan African countries

Violet = Middle Eastern & North African countries

Data from the Gapminder Foundation. Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    <style>

#chart {
  margin-left: -40px;
  height: 506px;
}

text {
  font: 20px courier;
}

.dot {
  stroke: #000;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.label {
  fill: #777;
}

.year.label {
  font: 500 196px "Courier";
  fill: #ddd;
}

.year.label.active {
  fill: #aaa;
}

.overlay {
  fill: none;
  pointer-events: all;
  cursor: ew-resize;
}

body { margin:0;
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0; 
}

</style>
</head>

<body>
  <p id="chart"></p>
  <script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>    
    
    // Various accessors that specify the four dimensions of data to visualize.
function x(d) { return d.income; }
function y(d) { return d.lifeExpectancy; }
function radius(d) { return d.population; }
function color(d) { return d.region; }
function key(d) { return d.name; }

// Chart dimensions.
var margin = {top: 19.5, right: 19.5, bottom: 19.5, left: 39.5},
    width = 960 - margin.right,
    height = 500 - margin.top - margin.bottom;

// Various scales. These domains make assumptions of data, naturally.
var xScale = d3.scaleLog()
							.domain([300, 1e5])
							.range([0, width])

var yScale = d3.scaleLinear()
							.domain([10, 85])
							.range([height, 0])

var radiusScale = d3.scaleSqrt()
										.domain([0, 5e8])
										.range([0, 40])

var colorScale = d3.scaleOrdinal(d3.schemeSet2);
 
// The x & y axes.
var xAxis = d3.axisBottom()
							.scale(xScale)
							.ticks(12, d3.format(",d"))
var yAxis = d3.axisLeft()
							.scale(yScale)

// Create the SVG container and set the origin.
var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Add the x-axis.
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// Add the y-axis.
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

// Add an x-axis label.
svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("income per capita, inflation-adjusted (US dollars) _");

// Add a y-axis label.
svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("life expectancy (years)");

// Add the year label; the value is set on transition.
var label = svg.append("text")
    .attr("class", "year label")
    .attr("text-anchor", "end")
    .attr("y", height - 24)
    .attr("x", width)
    .text(1800);

// Load the data.
d3.json("nations.json", function(nations) {

// A bisector since many nation's data is sparsely-defined.
  var bisect = d3.bisector(function(d) { return d[0]; });

// Add a dot per nation. Initialize the data at 1800, and set the colors.
  var dot = svg.append("g")
      .attr("class", "dots")
    .selectAll(".dot")
      .data(interpolateData(1800))
    .enter().append("circle")
      .attr("class", "dot")
      .style("fill", d => colorScale(color(d)) )
      .call(position)
      .sort(order);

// Add a title.
  dot.append("title")
      .text(function(d) { return d.name; });

// Add an overlay for the year label.
  var box = label.node().getBBox();

var overlay = svg.append("rect")
        .attr("class", "overlay")
        .attr("x", box.x)
        .attr("y", box.y)
        .attr("width", box.width)
        .attr("height", box.height)
        .on("mouseover", enableInteraction);

var div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);
  
  // Start a transition that interpolates the data based on year.
  svg.transition()
      .duration(30000)
      .ease(d3.easeLinear)
      .tween("year", tweenYear)
      .on("end", enableInteraction);

// Positions the dots based on data.
  function position(dot) {
    dot .attr("cx", d => xScale(x(d)) )
        .attr("cy", d => yScale(y(d)) )
        .attr("r",  d => radiusScale(radius(d)) );
  }

// Defines a sort order so that the smallest dots are drawn on top.
  function order(a, b) {
    return radius(b) - radius(a);
  }

// After the transition finishes, you can mouseover to change the year.
  function enableInteraction() {
    var yearScale = d3.scaleLinear()
        .domain([1800, 2009])
        .range([box.x + 10, box.x + box.width - 10])
        .clamp(true);

//Cancel the current transition, if any.
    svg.transition().duration(0);

overlay
        .on("mouseover", mouseover)
        .on("mouseout", mouseout)
        .on("mousemove", mousemove)
        .on("touchmove", mousemove);

function mouseover() {
      label.classed("active", true);
    }

function mouseout() {
      label.classed("active", false);
    }

function mousemove() {
      displayYear(yearScale.invert(d3.mouse(this)[0]));
    }
  }

// Tweens the entire chart by first tweening the year, and then the data.
  // For the interpolated data, the dots and label are redrawn.
  function tweenYear() {
    var year = d3.interpolateNumber(1800, 2009);
    return function(t) { displayYear(year(t)); };
  }

// Updates the display to show the specified year.
  function displayYear(year) {
    dot.data(interpolateData(year), key).call(position).sort(order);
    label.text(Math.round(year));
  }

// Interpolates the dataset for the given (fractional) year.
  function interpolateData(year) {
    return nations.map(function(d) {
      return {
        name: d.name,
        region: d.region,
        income: interpolateValues(d.income, year),
        population: interpolateValues(d.population, year),
        lifeExpectancy: interpolateValues(d.lifeExpectancy, year)
      };
    });
  }

// Finds (and possibly interpolates) the value for the specified year.
  function interpolateValues(values, year) {
    var i = bisect.left(values, year, 0, values.length - 1),
        a = values[i];
    if (i > 0) {
      var b = values[i - 1],
          t = (year - a[0]) / (b[0] - a[0]);
      return a[1] * (1 - t) + b[1] * t;
    }
    return a[1];
  }
});

</script>
</body>

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

https://d3js.org/d3-color.v1.min.js

https://d3js.org/d3-interpolate.v1.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js