All examples By author By category About

espinielli

Full window Github gist

World map of Internet over time

a thematic map about internet worldwide utilization from 1996 till 2011

Description

This is the final class assignment for Maps and the Geospatial Revolution.

With this map I wanted to visualize the evolution of Internet usage in time. It can also help understandanding the so called Internet divide between countries.

Look & feel

Mouseover the year to move forward and backwards through time.
Black countries reflect non exisitent data.
hover on a country and a tooltip will provide the relevant internet usage stats

Implementation details

I used D3.js and took inspiration, i.e. code snippets, from the following examples:

automatic and manual navigation thru the years, Mike Bostok's implementation of Gaminder's 'The Wealth & Health of Nations' graph.
quantitative scale with custom thresholds, Mike Bostok's gist on Kentuky Population Density

Data sources

'Internet users (per 100 people)', World Bank.
geographical data, Natural Earth transformed with ogr2ogr (an utility part of OGR simple feature library) and topoJSON.

   $ ogr2ogr -f GeoJSON  \
        -sql "SELECT ADM0_A3 as a3, NAME as name, iso_n3 as id from ne_10m_admin_0_countries" \
        countries.json \
        data/ne_10m_admin_0_countries/ne_10m_admin_0_countries.shp
   $ topojson -q 1e5 --id-property=a3 -p name -p n3=id -o world-50m.json countries.json

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  background: #fcfcfa;
}

svg {
  font: 14px sans-serif;
}

.caption {
  font-weight: bold;
}

.key path {
  display: none;
}

.key line {
  stroke: #000;
  shape-rendering: crispEdges;
}

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #ddd;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.countries{
  fill: #ddd;
}

.boundary {
  fill: none;
  stroke: #ccc;
  stroke-width: .5px;
}
.label {
  fill: #777;
}

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

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

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

aside {
  font-size: small;
  right: 0;
  position: absolute;
  width: 180px;
}

</style>
<body>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>

<h2>Internet usage (per 100 people) from 1996 till 2011.</h2>
<div id="map"></div>
<div>
  <p>Mouseover the year to move forward and backwards through time.</p>
  <p>Hover over the map to show the Internet usage for the underlying country and the relevant year.</p>
  <p><small>Internet data usage from <a href="https://data.worldbank.org/indicator/IT.NET.USER.P2">World Bank</a></small></p>
  <p><small>Geographical data from <a href="https://www.naturalearthdata.com/downloads/">Natural Earth</a></small></p>
</div>
<script>
var width = 960,
    height = 600;

var color = d3.scale.threshold()
    .domain([0, 20, 50, 90])
    .range(["#ffffcc","#c2e699","#78c679","#31a354","#006837"]);

// A position encoding for the key only.
var x = d3.scale.linear()
    .domain([0, 100])
    .range([0, 150]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(13)
    .tickValues(color.domain());

// Various accessors that specify the four dimensions of data to visualize.
function key(d) { return d.id; }

var usageByCountryCode = d3.map();
var minYear = 1996;
var maxYear = 2011;

var projection = d3.geo.kavrayskiy7()
    .scale(150)
    .translate([width / 2 - 40, height / 2 + 30])
    .rotate([-10,0])
    .precision(.1);

var path = d3.geo.path()
    .projection(projection);

var graticule = d3.geo.graticule();

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height);

// 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", 88)
    .attr("x", width / 2 + 85)
    .text(minYear);

// ******** the scale
var g = svg.append("g")
    .attr("class", "key")
    .attr("transform", "translate(15,50)");

g.selectAll("rect")
    .data(color.range().map(function(d, i) {
      return {
        x0: i ? x(color.domain()[i - 1]) : x.range()[0],
        x1: i < color.domain().length ? x(color.domain()[i]) : x.range()[1],
        z: d
      };
    }))
  .enter().append("rect")
    .attr("height", 12)
    .attr("x", function(d) { return d.x0; })
    .attr("width", function(d) { return d.x1 - d.x0; })
    .style("fill", function(d) { return d.z; });

g.call(xAxis).append("text")
    .attr("class", "caption")
    .attr("y", -6)
    .text("Internet users (per 100 people)");

var noD = g.append("rect")
  .attr("height", 12)
  .attr("x", 0)
  .attr("y", 40)
  .attr("width", 15)
  .style("fill", "black");

g.append("text")
  .attr("class", "caption")
  // .attr("text-anchor", "end")
  .attr("x", 20)
  .attr("y", 50)
  .text("no data");
// ************

svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

queue()
  .defer(d3.json, "world-50m.json")
  .defer(d3.csv, "internetusage.csv", function(d) { usageByCountryCode.set(d["Country Code"], d); })
  .await(ready);

function ready(error, world) {
  var countries = topojson.feature(world, world.objects.countries).features,
      neighbors = topojson.neighbors(world.objects.countries.geometries);

// *********** 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 state = svg.insert("g", ".graticule")
      .attr("class", "countries");
  state.selectAll(".country")
      .data(countries)
    .enter()
      .append("path")
        .attr("class", "country")
        .attr("d", path)
      .attr("fill", function(d) {
        var code = usageByCountryCode.get(d.id);
        if (typeof code == "undefined") console.log("name=" + d.properties.name + ", code=" + d.id);
        return (typeof code != "undefined") ? color(code[minYear]) : "#ddd";
      })
      .append("title")
        .text(function(d) {
          var code = usageByCountryCode.get(d.id);
          return d.properties.name + ": " + ((typeof code != "undefined") ? code[minYear] : "???") + " users (per 100 people)"; })
      ;
       // call(usage);

svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);

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

// After the transition finishes, you can mouseover to change the year.
  function enableInteraction() {
    var yearScale = d3.scale.linear()
        .domain([minYear, maxYear])
        .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(minYear, maxYear);
    return function(t) { displayYear(year(t)); };
  }

// Updates the display to show the specified year.
  function displayYear(year) {
    var yr = Math.round(year);
    svg.selectAll(".country")
      .style("fill", function(d) {
        var code = usageByCountryCode.get(d.id);
        return (typeof code != "undefined") ? color(code[yr]) : "black";
      })
    label.text(yr);
  }

};
d3.select(self.frameElement).style("height", height + "px");

</script>

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

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

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

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

https://d3js.org/d3.geo.projection.v0.min.js