Contour Plot III by steveharoz

index.html

<!DOCTYPE html>
<canvas width="960" height="500"></canvas>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-contour.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script>

// Populate a grid of n×m values where -9.6 ≤ x ≤ 9.6 and -5 ≤ y ≤ 5.
var n = 240, m = 125, values = new Array(n * m);
for (var j = 0.5, k = 0; j < m; ++j) {
  for (var i = 0.5; i < n; ++i, ++k) {
    values[k] = value(i / n * 19.2 - 9.6, 5 - j / m * 10);
  }
}

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    color = d3.scaleSequential(d3.interpolateRdBu).domain([-1, 1]),
    path = d3.geoPath(null, context),
    thresholds = d3.range(-1.2, 1, 0.2),
    contours = d3.contours().size([n, m]);

context.scale(canvas.width / n, canvas.width / n);

d3.timer(function(t) {
  var dv = (t % 1000) / 1000 * 0.2;
  contours
      .thresholds(thresholds.map(function(v) { return v + dv; }))
    (values)
      .forEach(contour);
});

function contour(geometry) {
  context.beginPath();
  path(geometry);
  context.fillStyle = color(geometry.value);
  context.fill();
}

function value(x, y) {
  return Math.sin(Math.sin(x * (Math.sin(y) - Math.cos(x)))) - Math.cos(Math.cos(y * (Math.cos(x) - Math.sin(y))))
}

</script>