📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Feb 20, 2022
Hello, Smart Shape!Hello, messagepipe!Hello, Atomico!Hello, Markdown-Tag !Hello, js-sdl!Hello Trivia API!Hello auto-animate!Hello, papa parse!Hello, lazy.js!Hello, mout!Hello, sugar js!Hello, lil-gui!Hello, owoify-js!Hello, Maverick JS -> Observables!Hello, Canvas Confetti!Hello, OWL!Hello, Bunny Fonts!Hello Color JS!Hello, Kute.js !Hello Color Legend Element!Hello, is-online!Hello, pretty-ms!Hello, Liveblocks!Convex ChatHello, filesize.js!Hello, SVG.jsHello, Counter-element!Hello, Ramda!Hello, Block Protocol!Hello, Reef!Hello, Croquet!Hello, Markdoc!Hello, Multiavatar!Hello, Tableful!Hello, kdl-jsHello, Wild Wild Path!Hello, Lexical!Hello, Statery!Hello, pdfme!Shuffle an ArrayHello, PikasoHello, Miniplex!Hello, Supabase!Hello, Embla Carousel!Hello, core-js!Hello, tinybaseHello, umbrellajsHello, pintoraSkypack PixijsHello, sortablejsHello, JS-YAMLTesting bitECS for TempestHello jService!Hello, iro.jsHello, SplideHello, Cosmic JSHello, singuiKaboom JS TemplateHello, JSPDFHello, Awesome Dev JokesRandom DAD JokeHello, model-viewerThe OracleTarot UtilitiesHello, lokiJSHello, cash ( cash-dom )Hello, Dice RollerHello, Slide-ElementHello, tsParticlesKaboom - dynamic valuesHello Lit.devHello, Melon JSHello Kontra
Hello, CandyGraph!
Also listed in…
Tips and Utilities
cg = new CandyGraph.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 = CandyGraph.createCartesianCoordinateSystem(
CandyGraph.createLinearScale([0, 1], [32, viewport.width - 16]),
CandyGraph.createLinearScale([0, 1], [32, viewport.height - 16])
);
// Load the default Lato font
const font = await CandyGraph.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, [
CandyGraph.createLineStrip(cg, xs, ys, {
colors: [1, 0.5, 0.0, 1.0],
widths: 3,
}),
CandyGraph.createOrthoAxis(cg, coords, "x", font, {
labelSide: 1,
tickOffset: -2.5,
tickLength: 6,
tickStep: 0.2,
labelFormatter: (n) => n.toFixed(1),
}),
CandyGraph.createOrthoAxis(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.
targetHTML.appendChild(cg.copyTo(viewport));
}
targetHTML = html`<div></div>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
