display-p3CYM spectral mixHello, apcachHello, spectral.jsHello, Color.jsMetbrewer color schemesFabio Crameri’s ColormapsColorcetXKCD painbow color mapNamed CSS colorsOil SlickGrid illusionsUMAP SleepwalkSliced Optimal TransportCanvas path blurBlue FluoriteWalk on Spheres — segments editionWalk on SpheresGraphene Moiré 1.1CMasher color interpolators (#27)Interpolate colors with Catmull-Rom/Cubic/Monotone…?“Perceptually uniform”?Hue blurcmocean color interpolators (#27)Linde–Buzo–Gray RGB Color stipplingAutochromeforcePolarforceAngularcolor2cssRandom ColorsFrida Kahlo’s paletteHello glitchBlack and white colored castelo
Canvas Spiral
{
const w = Math.min(width, 600),
context = (this && this.getContext("2d")) || DOM.context2d(width, w);
const step = (Math.PI * (-10 + ((now / 1000) % 20))) / 20;
const spiral = Array.from({ length: w / 6 }, (_, i) => [
step * i,
w / 2 - 3 * i
]);
context.fillStyle = "rgba(255,255,255,0.1)";
context.fillRect(0, 0, width, w);
context.save();
context.translate(width / 2, w / 2);
context.beginPath();
d3
.lineRadial()
.context(context)
.curve(d3.curveNatural)(spiral);
context.stroke();
context.restore(); // undo translate
yield context.canvas;
}
d3 = require("d3-shape@1")
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.
