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 the icosahedron. Built with the d3.geodesic plugin.

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

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

#subdivision input {
  width: 200px;
}

</style>
<div id="subdivision">
  <input type="range" min="1" max="12" value="8">
  <output name="subdivision"></output>
</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="d3.geodesic.min.js"></script>
<script>

var width = 960,
    height = 500;

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

var projection = d3.geo.orthographic()
    .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 input = d3.select("input")
    .on("input", function() { geodesic(+this.value); })
    .on("change", function() { geodesic(+this.value); })
    .each(function() { geodesic(+this.value); });

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 = d.polygon.area() > 0) {
      context.fillStyle = rgba(0,0,0,.2);
      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) {
  output.text(subdivision);

faces = d3.geodesic.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 = d3.geom.polygon(d.map(projection));
    return d;
  });

redraw();
}

</script>

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