Extract alls bands from a Contour Plot (method II looped) [UNLISTED]

Contour plots generated by d3-contour overlay shapes (Multipolygons) of increasing value. To obtain the shape that is between two values a < b, we need to substract the shape B = contour(b) from the shape A = contour(a).

In this method we tweak the data source and compute contours accordingly.

Forked from mbostock's block: Contour Plot

forked from Fil's block: Extract a band from a Contour Plot

forked from Fil's block: Extract a band from a Contour Plot, method II [UNLISTED]

<!DOCTYPE html>
<svg width="960" height="673" stroke="#fff" stroke-width="0.5"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hsv.v0.1.min.js"></script>
<script src="https://d3js.org/d3-contour.v1.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var i0 = d3.interpolateHsvLong(d3.hsv(120, 1, 0.65), d3.hsv(60, 1, 0.90)),
    i1 = d3.interpolateHsvLong(d3.hsv(60, 1, 0.90), d3.hsv(0, 0, 0.95)),
    interpolateTerrain = function(t) { return t < 0.5 ? i0(t * 2) : i1((t - 0.5) * 2); },
    color = d3.scaleSequential(interpolateTerrain).domain([90, 190]);

d3.json("volcano.json", function(error, volcano) {
  if (error) throw error;

svg.selectAll("path")
    .data(d3.contours()
        .size([volcano.width, volcano.height])
        .thresholds(d3.range(90, 195, 5))
      (volcano.values))
    .enter().append("path")
      .attr("d", d3.geoPath(d3.geoIdentity().scale(width / volcano.width)))
      .attr("stroke", function(d) { return color(d.value); })
  .attr('stroke-width', 3)
  .attr('fill', 'none');
  
    var c = svg.append('path')
      .attr("fill", color(150))
  .attr('opacity', 0.5);

svg.selectAll('circle')
  .data(volcano.values)
  .enter()
  .append('circle')
  .attr('r', 2)
  .attr('cx', (d,i) => {
    return (i % volcano.width) * width / volcano.width;
  })
  .attr('cy', (d,i) => {
    return (i - (i % volcano.width)) / volcano.width * (width / volcano.width);
  })
  .attr('fill', color)
  .append('title').text(d => d);
  
  var band = d3.contours()
        .size([volcano.width, volcano.height])
        .thresholds([0]);

svg.selectAll('path.band')
    .data(d3.range(90, 195, 5))
  .enter()
  .append('path')
  .attr('fill', color)
  .attr('opacity', 0.5)
    .attr("d", threshold =>d3.geoPath(d3.geoIdentity().scale(width / volcano.width))(

band(volcano.values.map(
        d => (threshold - d) * (d - (threshold + 5))
      ))[0]
  
  ))

});

</script>

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

https://d3js.org/d3-hsv.v0.1.min.js

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