Flattened icosahedron world map.

This is a step for me to better understand d3 polyhedral plugin. (the inspiring code is Jason Davies's Airocean world map)

<!DOCTYPE html>
<meta charset="utf-8">
<title>Flattened Icosahedron World</title>
<style>
@import url(maps.css);
body {
  background: #fff;
}
#map {
  width: 960px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  top: 40px;
}
#heading {
  position: absolute;
  top: -15px;
  right: -40px;
  width: 420px;
}
#heading h1 {
  font-size: 2.5em;
  margin: 0;
}
h2 {
  clear: left;
}
.author a, .meta a {
  color: #000;
}
.author, .meta {
  color: #666;
  font-style: italic;
  font-size: small;
}
.background {
  stroke: none;
  fill: #ccf;
}
.outline {
  stroke: #000;
  stroke-width: 1px;
  fill: none;
}
.graticule {
  stroke: #000;
  stroke-width: .25px;
  stroke-opacity: .5;
  fill: none;
}
.land {
  stroke: #000;
  stroke-width: .5px;
  fill: #9f9;
}
.boundary {
  stroke: #000;
  stroke-width: .5px;
  stroke-opacity: .7;
  fill: none;
}
.face {
  stroke: #000;
  stroke-width: .5px;
  stroke-dasharray: 8,3;
  fill: none;
}
</style>

<div id="map">
  <div id="heading">
    <h1>Mapping on a flattened icosahedron</h1>
    <p class="author">inspired by <a href="https://www.jasondavies.com/">Jason Davies</a>
  </div>
</div>

<div class="wrapper">
  <h2>Icosahedron</h2>
  <p>Let's map on an <a href="https://en.wikipedia.org/wiki/Icosahedron">icosahedron</a>.
  <p>Each polyhedral face uses the <a href="https://mathworld.wolfram.com/GnomonicProjection.html">gnomonic projection</a> for ease of implementation.

<h2>Technical Notes</h2>
  <p>The maps above were rendered using a custom version of <a href="https://d3js.org">D3</a>, modified to support clipping against arbitrary spherical polygons.
  <p>This was necessary because unlike the <a href="../gnomonic-butterfly">octahedron</a>, the icosahedron cannot be unfolded exactly along a whole meridian.
  <p>The <a href="https://github.com/d3/d3-plugins/tree/master/geo/polyhedron">polyhedral plugin</a> automatically generates an outline in geographic coordinates, which can be passed directly to D3 as a clip polygon.

<h2>Further Reading</h2>
  <ul>
    <li><a href="https://www.progonos.com/furuti/MapProj/Normal/ProjPoly/projPoly3.html">Icosahedral, dodecahedral and other maps</a>, Carlos A. Furuti.
    <li><a href="https://www.win.tue.nl/~vanwijk/myriahedral/">Myriahedral projections</a>, Jarke J. van Wijk.
    <li><a href="https://en.wikipedia.org/wiki/Icosahedron">Icosahedron</a>, Wikipedia.
  </ul>
</div>

var rotate = [99.8, -241, -85],
    rotation = d3.geo.rotation(rotate),
    ε = 1e-6,
    π = Math.PI,
    radians = π / 180,
    degrees = 180 / π,
    θ = Math.atan(.5) * degrees,
    width = 900,
    height = 400;

// construction seems inspired by https://en.wikipedia.org/wiki/Icosahedron#Spherical_Coordinates
var vertices = [
  [0, 90],
  [0, -90]
].concat(d3.range(10).map(function(i) {
  return [i * 36, i & 1 ? θ : -θ];
}));

var polyhedron = [
    [ 0,  3, 11],
    [ 0,  5,  3],
    [ 0,  7,  5],
    [ 0,  9,  7],
    [ 0, 11,  9], // North
    [ 2, 11,  3],
    [ 3,  4,  2],
    [ 4,  3,  5],
    [ 5,  6,  4],
    [ 6,  5,  7],
    [ 7,  8,  6],
    [ 8,  7,  9],
    [ 9, 10,  8],
    [10,  9, 11],
    [11,  2, 10], // Equator
    [ 1,  2, 4],
    [ 1,  4, 6],
    [ 1,  6, 8],
    [ 1,  8, 10],
    [ 1, 10,  2] // South
  ].map(function(d) {
      return d.map(function(i) { return vertices[i]; });
    });

// add centroid 
polyhedron.forEach(function(face) {
  face.centroid = d3.geo.centroid({type: "MultiPoint", coordinates: face});
});

// Connect each face to a parent face.
[
  // N
  -1, // 0
   7, // 1
   9, // 2
  11, // 3
  13, // 4

// Eq
  0,  // 5
  5,  // 6
  6,  // 7
  7,  // 8
  8,  // 9

9, // 10
  10, // 11
  11, // 12
  12, // 13
  13, // 14

// S
   6, // 15
   8, // 16
  10, // 17
  12, // 18
  14, // 19
].forEach(function(d, i) {
  var node = faces[d];
  node && (node.children || (node.children = [])).push(faces[i]);
});

var projection = d3.geo.polyhedron(faces[0], face, 0)
    .translate([width / 2 , height / 2])
    .center([-155,0])
    .scale(100)
    .rotate([0,0,0])
    .precision(1);

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

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

svg.append("path")
    .datum({type: "Sphere"})
    .attr("class", "background")
    .attr("d", path);

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

svg.append("path")
    .datum({type: "Sphere"})
    .attr("class", "outline")
    .attr("d", path);

// svg.append("path")
//     .datum(mesh)
//     .attr("class", "face")
//     .attr("d", path);

d3.json("world-50m.json", function(error, world) {
  svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);
  svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);

svg.selectAll("text")
    .data(faces)
    .enter()
    .append("svg:text")
    .text(function(d, i){ return i; })
    .attr("x", function(d){ 
      return (projection(d3.geo.centroid({type: "MultiPoint", coordinates: d.face})))[0];
    })
    .attr("y", function(d){
      return (projection(d3.geo.centroid({type: "MultiPoint", coordinates: d.face})))[1];
    })
    .attr("text-anchor","middle")
    .attr("font-size","12pt")
    .attr("font-weight", "bold");

});

function face(λ, φ) {
  var point = [λ, φ],
      face = null,
      inside = 0;
  for (var i = 0, n = faces.length; i < n; ++i) {
    face = faces[i];
    if (d3.geo.pointInPolygon(point, face.polygon)) return face;
  }
}

// Converts spherical coordinates (degrees) to 3D Cartesian.
function cartesian(coordinates) {
  var λ = coordinates[0] * radians,
      φ = coordinates[1] * radians,
      cosφ = Math.cos(φ);
  return [
    cosφ * Math.cos(λ),
    cosφ * Math.sin(λ),
    Math.sin(φ)
  ];
}

// Converts 3D cartesian to spherical coordinates (degrees).
function spherical(cartesian) {
  var m = Math.sqrt(cartesian[0] * cartesian[0] + cartesian[1] * cartesian[1] + cartesian[2] * cartesian[2]);
  return [
    Math.atan2(cartesian[1], cartesian[0]) * degrees,
    Math.asin(cartesian[2] / m) * degrees
  ];
}

</script>