Wondering what’s next for npm?Check out our public roadmap! »

    candygraph
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.0 • Public • Published

    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();

    Install

    npm i candygraph

    DownloadsWeekly Downloads

    1,371

    Version

    0.3.0

    License

    Unlicense

    Unpacked Size

    1.27 MB

    Total Files

    71

    Last publish

    Collaborators

    • avatar