Get started with scatterjs CDN

MIT licensed

Scatter.js is a lightweight library for creating interactive, data-driven scatter plots.

Tags:
  • scatter
  • blockchain

Stable version

Copied!

How to start using scatterjs CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with scatterjs CDN - cdnhub.io</title>
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <script src="https://cdn.cdnhub.io/scatterjs/scatterjs-core@2.7.18/scatterjs-core.min.js"></script>
  <script>
    async function main() {
      const scatter = new p5(sketch => {
        scatter.setup = function() {
          this.createCanvas(window.innerWidth, window.innerHeight);
          ScatterJS.setCanvas(this.canvas);
          ScatterJS.setSize(this.width, this.height);
        };

        scatter.draw = function() {
          this.background(255);
          ScatterJS.update();
          ScatterJS.draw();
        };
      }, 'canvas');

      await ScatterJS.load();

      const data = [
        { x: 1, y: 1, size: 10, color: 0x0000ff },
        { x: 2, y: 2, size: 5, color: 0x00ff00 },
        { x: 3, y: 3, size: 15, color: 0xff0000 },
      ];

      const swarm = new ScatterJS.Swarm();
      swarm.add(data);
      swarm.start();

      scatter.runWithNewSketch();
    }

    main();
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions