Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
May 29, 2021
Jul 19, 2020
Jul 19, 2020
Jul 19, 2020
Jul 19, 2020
Jul 19, 2020
May 29, 2021
Jul 19, 2020
Jul 19, 2020

CandyGraph

A flexible and fast-by-default 2D plotting library tuned for rendering huge datasets on the GPU at interactive speeds.
  • Adopts D3's elegant concept of scales, but implements them on the GPU to maximize data throughput and handle scale changes with no additional cost.
  • Performs all rendering on the GPU, even axes and text. This keeps rendering and compositing fast and simple - no need to overlay a canvas or svg over your plot.
  • Provides a small but growing set of highly optimized primitives that are tuned for handling huge datasets.
  • Provides a set of higher-level composite objects composed of primitives to simplify common rendering tasks.

CandyGraph is still in major version zero; the API should be considered unstable.

Example

import { CandyGraph } from "candygraph";

async function main() {
  const cg = new CandyGraph();
  cg.canvas.width = cg.canvas.height = 384;

  // Generate some x & y data.
  const xs = [];
  const ys = [];
  for (let x = 0; x <= 1; x += 0.001) {
    xs.push(x);
    ys.push(0.5 + 0.25 * Math.sin(x * 2 * Math.PI));
  }

  // Create a viewport. Units are in pixels.
  const viewport = {
    x: 0,
    y: 0,
    width: cg.canvas.width,
    height: cg.canvas.height,
  };

  // Create a coordinate system from two linear scales. Note
  // that we add 32 pixels of padding to the left and bottom
  // of the viewport, and 16 pixels to the top and right.
  const coords = cg.coordinate.cartesian(
    cg.scale.linear([0, 1], [32, viewport.width - 16]),
    cg.scale.linear([0, 1], [32, viewport.height - 16])
  );

  const font = await cg.defaultFont;

  // Clear the viewport.
  cg.clear([1, 1, 1, 1]);

  // Render the a line strip representing the x & y data, and axes.
  cg.render(coords, viewport, [
    cg.lineStrip(xs, ys, {
      colors: [1, 0.5, 0.0, 1.0],
      widths: 3,
    }),
    cg.orthoAxis(coords, "x", font, {
      labelSide: 1,
      tickOffset: -2.5,
      tickLength: 6,
      tickStep: 0.2,
      labelFormatter: (n) => n.toFixed(1),
    }),
    cg.orthoAxis(coords, "y", font, {
      tickOffset: 2.5,
      tickLength: 6,
      tickStep: 0.2,
      labelFormatter: (n) => n.toFixed(1),
    }),
  ]);

  // Copy the plot to a new canvas and add it to the document.
  document.body.appendChild(cg.copyTo(viewport));
}

main();

About

Fast by default, flexible 2D plotting library.

Resources

License

Releases

No releases published

Packages

No packages published