When the Contours Go Marching In

Marching contours!

<!DOCTYPE html>
<html>

// fill in the data array with random numbers within a normal distribution
    values.length = n * m;
    for (var i = 0; i < values.length; ++i) {
      // positive values only,
      // just for the sake of making contour thresholds easier to experiment with
      values[i] = Math.abs(randomNumberGenerator());
    }

svg.selectAll('path')
      .data(d3.contours()
        .size([n, m])
        .thresholds(d3.range(0.5, 3.5, 0.5))(values) // this will create 6 steps
      )
      .enter().append('path')
      .attr('d', d3.geoPath(d3.geoIdentity().scale(svgWidth / n)))
      .style('fill', 'none')
      .style('stroke', function(d, idx) {
        return d3.schemeOranges[9][idx]
      })
      .style('stroke-width', 2.5)
      .style('stroke-dasharray', '0, 1000');

// march the contours into existence
    svg.selectAll('path')
      .transition()
      .duration(7000)
      .style('stroke-dasharray', '1000, 0');
  </script>
</body>

</html>

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

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

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