D3 Examples - Contour experiment

xxxxxxxxxx
 
<!DOCTYPE html>
<svg width="1000" height="500" stroke="#fff" stroke-width="0.5"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-contour.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>
​
​
var n = 5, m = 5, values = new Array(n * m);
  
values = [1,0,0,0,1,
          0,0,0,0,0,
          0,0,1,0,0,
          0,0,0,0,0,
          1,0,0,0,1]
​
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
​
var thresholds = d3.range(0,1,0.1)
   
​
var contours = d3.contours()
    .size([n, m])
    .thresholds(thresholds);
​
var color = d3.scaleLinear()
    .domain(d3.extent(thresholds))
    .interpolate(function() { return d3.interpolateYlGnBu; });
​
svg.selectAll("path")
  .data(contours(values))
  .enter().append("path")
    .attr("d", d3.geoPath(d3.geoIdentity().scale(100)))
    .attr("fill", function(d) { return color(d.value); });
​
​
​
</script>
​
    