<!DOCTYPE html>
<html>

  <head>
    <title>d3-x3d : 3D Particles Component Example</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/x_ite@latest/dist/x_ite.js"></script>
    <script src="../../../dist/d3-x3d.js"></script>
  </head>

  <body>
    <x3d-canvas id="chartholder" style="width: 500px; height: 500px;"></x3d-canvas>

    <script>
      // Chart dimensions
      var width = 500;
      var height = 500;

      var viewpoint = d3.x3d.component.viewpoint();

      // Generate some data
      var data = d3.x3d.randomData.dataset6(2000);

      // Declare the chart component
      var bubbleComponent = d3.x3d.component.particles()
        .mappings({ x: 'x', y: 'y', z: 'z', size: 'size', color: 'color' })
        .colors(d3.schemeRdYlGn[8]);

      // Create scene
      var scene = d3.select("#chartholder")
        .append("X3D")
        .attr("width", width + "px")
        .attr("height", height + "px")
        .append("Scene");

      // Add chart component
      scene.call(viewpoint)
        .append("Group")
        .attr("class", "chart")
        .datum(data)
        .call(bubbleComponent);
    </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>
