<div id="contour-plot-default"></div>
<div id="contour-plot-customized"></div>

<script>
  d3.json('../data/math-sin-xy.json', function (data) {
    d3.shuffle(data);
    d3.contourPlot(data, {
      id: 'contour-plot-default',
      domainX: [-1, 1],
      domainY: [-1, 1],
      contours: {
        size: [50, 30]
      }
    });
  });
  d3.contourPlot(function (x, y) {
    return Math.sin(x + y) * Math.sin(x - y);
  }, {
    id: 'contour-plot-customized',
    domainX: [-2, 2],
    domainY: [-2, 2],
    contours: {
      number: 12,
      density: 2,
      smooth: false,
      stroke: '#fff'
    },
    colorScale: 'scaleSequential',
    colorScheme: d3.interpolateRdBu,
    framed: true
  });
</script>