Geodesic Rainbow

Use the range slider to change the degree of subdivision in this geodesic sphere. The base shape, visible when subdivision is disabled, is either the icosahedron or the tetrahedron.

Built with a modified version of the d3.geodesic plugin. Adapted to use D3v4.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

#subdivision {
  position: absolute;
  top: 20px;
  left: 20px;
}

#subdivision input {
  width: 200px;
}

#polyhedrontype {
  position: absolute;
  top: 50px;
  left: 20px;
}

</style>
<div id="subdivision">
  <input type="range" min="1" max="12" value="1">
  <output name="subdivision"></output>
</div>
<div id="polyhedrontype">
  <input type="radio" name="polyhedron" value="tetrahedron">tetrahedron<br>
  <input type="radio" name="polyhedron" value="icosahedron" checked="checked">icosahedron<br>
</div>

var width = 960,
    height = 500;

var velocity = [.010, .005],
    t0 = Date.now();

var projection = d3.geoOrthographic()
    .scale(height / 2 - 10);

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

context.strokeStyle = "#000";
context.lineWidth = .5;

var faces;

var output = d3.select("output");
var poly = "icosahedron";
var subdivision = 1;

var input_subdivision = d3.select("#subdivision input")
    .on("change", function() {
      subdivision = +this.value;
      geodesic(subdivision, poly);
    })
    .each(function() {
      subdivision = +this.value;
      geodesic(subdivision, poly);
    });

var input_poly = d3.selectAll("input[name='polyhedron']")
    .on("change", function() {
      poly = this.value;
      console.log(poly);
      geodesic(subdivision, poly);
    });

d3.timer(function() {
  var time = Date.now() - t0;
  projection.rotate([time * velocity[0], time * velocity[1]]);
  redraw();
});

function redraw() {
  context.clearRect(0, 0, width, height);

faces.forEach(function(d) {
    d.polygon[0] = projection(d[0]);
    d.polygon[1] = projection(d[1]);
    d.polygon[2] = projection(d[2]);
    if (d.visible = d3.polygonArea(d.polygon) > 0) {
      context.fillStyle = d.fill;
      context.beginPath();
      drawTriangle(d.polygon);
      context.fill();
    }
  });

context.beginPath();
  faces.forEach(function(d) {
    if (d.visible) {
      drawTriangle(d.polygon);
    }
  });
  context.stroke();
}

function drawTriangle(triangle) {
  context.moveTo(triangle[0][0], triangle[0][1]);
  context.lineTo(triangle[1][0], triangle[1][1]);
  context.lineTo(triangle[2][0], triangle[2][1]);
  context.closePath();
}

function geodesic(subdivision, type) {
  output.text(subdivision);
  var polyhedron = (poly == "tetrahedron" ? d3.tetrahedron : d3.icosahedron);
  faces = polyhedron.polygons(subdivision).map(function(d) {
    d = d.coordinates[0];
    d.pop(); // use an open polygon
    d.fill = d3.hsl(d[0][0], 1, .5) + "";
    d.polygon = d.map(projection);
    return d;
  });

redraw();
}

</script>

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