Contour Plot III (badge)

An example of d3-contour.

forked from mbostock's block: Contour Plot III

<!DOCTYPE html>
<style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
</style>
<canvas width="1050" height="1500"></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(Math.sin(i*Math.PI/2)/10 + i / n * 2 + 8.8 + Math.random()/5,
                      Math.cos(i*Math.PI/2)/10 - Math.random()/4 + 260 - j / m * 4);
  }
}

var colors = [
  /*
  d3.scaleSequential(d3.interpolateRdBu).domain([-1, 1]),
  d3.scaleSequential(d3.interpolateRdYlGn).domain([-1, 1]),
  d3.scaleSequential(d3.interpolatePuOr).domain([-1, 1]),
  d3.scaleSequential(d3.interpolatePiYG).domain([-1, 1]),
  */
   d3.scaleSequential(d3.interpolatePiYG).domain([-1, 1]),
   d3.scaleSequential(d3.interpolateSpectral).domain([-1, 1]),
  
  d3.scaleSequential(d3.interpolateCool).domain([-1, 1]),
  d3.scaleSequential(d3.interpolatePlasma).domain([-1, 1]),
  d3.scaleSequential(d3.interpolateViridis).domain([-1, 1]),
  d3.scaleSequential(d3.interpolateInferno).domain([-1, 1]),
  d3.scaleSequential(d3.interpolateMagma).domain([-1, 1]),
  d3.scaleSequential(d3.interpolateWarm).domain([-1, 1]),
  d3.scaleSequential(d3.interpolateRainbow).domain([-1, 1]),
  d3.scaleSequential(d3.interpolateRainbow).domain([-1, 1]),
  
  //d3.scaleSequential(d3.interpolateCubehelixDefault).domain([-1,1]),

]

var color = colors[Math.floor(Math.random() * colors.length)]
var color = colors[8]
  
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 * 2, canvas.height / m);

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

function fill(geometry,i) {

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

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

</script>

https://d3js.org/d3-array.v1.min.js

https://d3js.org/d3-color.v1.min.js

https://d3js.org/d3-contour.v1.min.js

https://d3js.org/d3-geo.v1.min.js

https://d3js.org/d3-interpolate.v1.min.js

https://d3js.org/d3-scale.v1.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js

https://d3js.org/d3-timer.v1.min.js