b2256da5d0e3520bdf207e7e39da0033

Open

forked from Lincoln-Jiang's block: Wealth & Health

index.html#


<!DOCTYPE html>
<html class="ocks-org do-not-copy">
<meta charset="utf-8">
<title>The Wealth & Health of Nations</title>
<style>

@import url(../style.css?aea6f0a);

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

text {
  font: 10px sans-serif;
}

.dot {
  stroke: #000;
}

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

.label {
  fill: #777;
}

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

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

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

</style>

<header>
  <aside>March 13, 2012</aside>
  <a href="../" rel="author">Mike Bostock</a>
</header>

<h1>The Wealth & Health of Nations</h1>

<p id="chart"></p>

<aside>Mouseover the year to move forward and backwards through time.</aside>

<p class="attribution">Source: <a href="https://github.com/RandomEtc/mind-gapper-js">Tom Carden</a>, <a href="https://gapminder.org">Gapminder</a>.

<p>This is a recreation in <a href="https://d3js.org/">D3</a> of Gapminder’s <a href="https://gapminder.org/world/">Wealth & Health of Nations</a>, made famous by Hans Rosling’s memorable <a href="https://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen.html">2006 TED talk</a>. It shows the dynamic fluctuation in per-capita income (<i>x</i>), life expectancy (<i>y</i>) and population (radius) of 180 nations over the last 209 years. Nations are colored by geographic region; mouseover to read their names.

<p>As <a href="https://randometc.github.com/mind-gapper-js/">Tom Carden</a> noted, there’s a surprising amount of work that goes into making something look simple. For one, data collected in recent years is consistent, while data prior to 1950 is sparse; although potentially misleading, these visualizations use <a href="https://en.wikipedia.org/wiki/Lerp_(computing)">linear interpolation</a> for missing data points. The lookup for the two interpolation values at each frame is accelerated using <a href="https://en.wikipedia.org/wiki/Binary_search_algorithm">bisection</a> of sorted arrays per dimension.

<p>Interested to see how this chart was implemented? <a href="view-source:https://bost.ocks.org/mike/nations/">View source!</a> Want a fun project? Try adding a <a href="https://github.com/mbostock/d3/wiki/Voronoi-Geom">Voronoi overlay</a> (as in this <a href="https://mbostock.github.com/d3/talk/20111116/airports.html">airport diagram</a>) to improve mouseover interaction on small targets. Or try a static version, using trails instead of motion.

<footer>
  <aside>March 13, 2012</aside>
  <a href="../" rel="author">Mike Bostock</a>
</footer>

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script></script>
<script>

// Various accessors that specify the four dimensions of data to visualize.
function x(d) { return d.claims; }
function y(d) { return d.premium; }
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: 99.5},
    width = 860 - margin.right,
    height = 300 - margin.top - margin.bottom;

// Various scales. These domains make assumptions of data, naturally.
var xScale = d3.scale.log().domain([300, 1e5]).range([0, width]),
    yScale = d3.scale.linear().domain([10, 85]).range([height, 0]),
    radiusScale = d3.scale.sqrt().domain([0, 5e8]).range([0, 40]),
    colorScale = d3.scale.category10();

// The x & y axes.
var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(12, d3.format(",d")),
    yAxis = d3.svg.axis().scale(yScale).orient("left");

// 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 (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", function(d) { return 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);

  // Start a transition that interpolates the data based on year.
  svg.transition()
      .duration(10000)
      .ease("linear")
      .tween("year", tweenYear)
      .each("end", enableInteraction);

  // Positions the dots based on data.
  function position(dot) {
    dot .attr("cx", function(d) { return xScale(x(d)); })
        .attr("cy", function(d) { return yScale(y(d)); })
        .attr("r", function(d) { return 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.scale.linear()
        .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,
        claims: interpolateValues(d.claims, year),
        population: interpolateValues(d.population, year),
        premium: interpolateValues(d.premium, 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>

nations.json#

[{"name":"PI",
"region":"aa",
"claims":[[1860,1974],[1861,1106],[1862,1852],[1863,2789],[1864,3260]],
"population":[[1860,1567028],[1861,1567028],[1862,1567028],[1863,1567028],[1864,1567028]],
"premium":[[1860,40],[1861,37],[1862,40],[1863,37],[1864,40]]},







{"name":"BI","region":"aa",
"claims":[[1860,1729],[1861,2125],[1862,3395],[1863,4612],[1864,5564]],
"population":[[1860,7026113],[1861,7026113],[1862,7026113],[1863,7026113],[1864,7026113]],
"premium":[[1860,37],[1861,40],[1862,37],[1863,40],[1864,37]]},

{"name":"Bond","region":"bb","claims":[[1860,2251],[1861,55571],[1862,11176],[1863,22138],[1864,44441]],
"population":[[1860,6543217],[1861,6543217],[1862,6543217],[1863,6543217],[1864,6543217]],"premium":[[1860,40],[1861,37],[1862,40],[1863,37],[1864,40]]}]