0.10.0 • Published 11 months ago
candygraph v0.10.0
- 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, {
createDefaultFont,
LinearScale,
OpaqueLineStrip,
OrthoAxis,
CartesianCoordinateSystem,
} 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 = new CartesianCoordinateSystem(
cg,
new LinearScale([0, 1], [32, viewport.width - 16]),
new LinearScale([0, 1], [32, viewport.height - 16])
);
// Load the default Lato font
const font = await createDefaultFont(cg);
// 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, [
new OpaqueLineStrip(cg, xs, ys, {
colors: [1, 0.5, 0.0],
widths: 3,
}),
new OrthoAxis(cg, coords, "x", font, {
labelSide: 1,
tickOffset: -2.5,
tickLength: 6,
tickStep: 0.2,
labelFormatter: (n) => n.toFixed(1),
}),
new OrthoAxis(cg, 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();
0.10.0
11 months ago
0.9.0
2 years ago
0.8.1
2 years ago
0.8.0
2 years ago
0.7.0
2 years ago
0.6.0
2 years ago
0.5.0
2 years ago
0.5.1
2 years ago
0.4.3
2 years ago
0.4.2
3 years ago
0.4.1
3 years ago
0.4.0
3 years ago
0.3.1
3 years ago
0.3.0
3 years ago
0.2.6
3 years ago
0.2.5
3 years ago
0.2.4
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.0.1
4 years ago
0.0.0
4 years ago