<!DOCTYPE html>
<html>

  <head>
    <title>d3-x3d : 3D Multi Series Area Chart Example</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://x3dom.org/release/x3dom-full.js"></script>
    <link rel="stylesheet" href="https://x3dom.org/release/x3dom.css"/>
    <script src="../../../dist/d3-x3d.js"></script>
  </head>

  <body>
    <div id="chartholder"></div>

    <script>
      // Select chartholder
      var chartHolder = d3.select("#chartholder");

      // Generate some data
      var cx = 1.1;
      var cy = 0.9;
      var f = function(vx, vz) {
        return ((vx - cx) * (vx - cx) + (vz - cy)) * (1 + Math.random());
      };

      var xRange = d3.range(0, 1, 0.1);
      var zRange = d3.range(0, 1, 0.1);
      var nx = xRange.length;
      var nz = zRange.length;

      var data = d3.range(nx).map(function(i) {
        var values = d3.range(nz).map(function(j) {
          return {
            key: j,
            value: f(xRange[i], zRange[j])
          };
        });

        return {
          key: i,
          values: values
        };
      });

      var summary = d3.x3d.dataTransform(data).summary();
      var columnKeys = summary.columnKeys;
      var valueMax = summary.valueMax;
      var valueExtent = [0, valueMax];

      var yScale = d3.scaleLinear()
        .range([0, 20])
        .domain(valueExtent);

      // Declare the chart component
      var myChart = d3.x3d.chart.areaChartMultiSeries().yScale(yScale);

      chartHolder.datum(data).call(myChart);
    </script>

    <br/>
    <div style="clear: both">Created with <a href="https://github.com/jamesleesaunders/d3-x3d">d3-x3d</a> D3 X3D Data
      Visualization Library.
    </div>
  </body>

</html>
