D3 Examples - Contour Plot II

xxxxxxxxxx
 
<!DOCTYPE html>
<svg width="960" height="500"></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>
​
// Populate a grid of n×m values where -2 ≤ x ≤ 2 and -2 ≤ y ≤ 1.
var n = 256, m = 256, values = new Array(n * m);
for (var j = 0.1, k = 0; j < m; ++j) {
  for (var i = 0.1; i < n; ++i, ++k) {
    values[k] = enumerate(i / n , j / m);
  }
}
​
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
​
var thresholds = d3.range(-1, 1, 0.1)
    .map(function(p) { return p; });
​
var contours = d3.contours()
    .size([n, m])
    .thresholds(thresholds)
​
var color = d3.scaleLinear()
    .domain(d3.extent(thresholds))
    .interpolate(function() { return d3.interpolateGreys; });
​
svg.selectAll("path")
  .data(contours(values))
  .enter().append("path")
    .attr("d", d3.geoPath(d3.geoIdentity().scale(width / n)))
    .attr("fill", function(d) { return color(d.value); })
​
// See https://en.wikipedia.org/wiki/Test_functions_for_optimization
function enumerate(x, y) {
  return Math.sin(Math.PI*x/y)
 ;
}
​
</script>
​
    