\n\n- 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.\n- 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.\n- Provides a small but growing set of highly optimized primitives that are tuned for handling huge datasets.\n- Provides a set of higher-level composite objects composed of primitives to simplify common rendering tasks.\n\n> CandyGraph is still in [major version zero](https://semver.org/#spec-item-4); the API should be considered unstable.\n\n## Example\n\n
\n \n
\n\n```typescript\nimport CandyGraph, {\n createDefaultFont,\n LinearScale,\n OpaqueLineStrip,\n OrthoAxis,\n CartesianCoordinateSystem,\n} from \"candygraph\";\n\nasync function main() {\n const cg = new CandyGraph();\n cg.canvas.width = cg.canvas.height = 384;\n\n // Generate some x & y data.\n const xs = [];\n const ys = [];\n for (let x = 0; x <= 1; x += 0.001) {\n xs.push(x);\n ys.push(0.5 + 0.25 * Math.sin(x * 2 * Math.PI));\n }\n\n // Create a viewport. Units are in pixels.\n const viewport = {\n x: 0,\n y: 0,\n width: cg.canvas.width,\n height: cg.canvas.height,\n };\n\n // Create a coordinate system from two linear scales. Note\n // that we add 32 pixels of padding to the left and bottom\n // of the viewport, and 16 pixels to the top and right.\n const coords = new CartesianCoordinateSystem(\n cg,\n new LinearScale([0, 1], [32, viewport.width - 16]),\n new LinearScale([0, 1], [32, viewport.height - 16])\n );\n\n // Load the default Lato font\n const font = await createDefaultFont(cg);\n\n // Clear the viewport.\n cg.clear([1, 1, 1, 1]);\n\n // Render the a line strip representing the x & y data, and axes.\n cg.render(coords, viewport, [\n new OpaqueLineStrip(cg, xs, ys, {\n colors: [1, 0.5, 0.0],\n widths: 3,\n }),\n new OrthoAxis(cg, coords, \"x\", font, {\n labelSide: 1,\n tickOffset: -2.5,\n tickLength: 6,\n tickStep: 0.2,\n labelFormatter: (n) => n.toFixed(1),\n }),\n new OrthoAxis(cg, coords, \"y\", font, {\n tickOffset: 2.5,\n tickLength: 6,\n tickStep: 0.2,\n labelFormatter: (n) => n.toFixed(1),\n }),\n ]);\n\n // Copy the plot to a new canvas and add it to the document.\n document.body.appendChild(cg.copyTo(viewport));\n}\n\nmain();\n```\n","readmeFilename":"README.md","homepage":"https://github.com/wwwtyro/candygraph#readme","repository":{"type":"git","url":"git+https://github.com/wwwtyro/candygraph.git"},"bugs":{"url":"https://github.com/wwwtyro/candygraph/issues"},"contributors":[{"name":"Fritz Lekschas","url":"https://lekschas.de"}]}
![](\"media/simple-plot.png\")
\n