here to learn
MathJaxPolygon inputMultiple SankeysDrag to re-arrange (vertical edition)Dijkstra's algorithm (huge version)d3 quadtrees with more dataHexagonal World (coloring by country)DLA + CA rules!D3 ScatterplotD3 Log-Scaled HistogramDijkstra's algorithm (d3-delaunay version)TOCNotebook Visualizer (Firefox-compatible)Lazy DownloadDOM.download(callback) feature request [solved]Version Pinning for Notebooks
Fullscreen Canvas
fullscreen = {
const button = html`<button>Fullscreen`;
button.onclick = () => {
const container = document.querySelector('#canvasDV').parentElement;
if (container.requestFullscreen)
container.requestFullscreen();
else if (container.webkitRequestFullscreen)
container.webkitRequestFullscreen();
};
return button;
}
canvas = {
const n = 200;
const height = Math.ceil(width * screen.height / screen.width);
const margin = 60;
const context = DOM.context2d(width, height);
const particles = Array.from({length: n}, () => [Math.random() * width, Math.random() * height, 0, 0]);
context.canvas.id = 'canvasDV';
context.canvas.style.background = "#fff";
context.strokeStyle = "red";
while (true) {
const delaunay = new d3.Delaunay.from(particles);
const voronoi = delaunay.voronoi([0, 0, width, height]);
context.save();
context.clearRect(0, 0, width, height);
context.beginPath();
delaunay.renderPoints(context);
context.fill();
context.beginPath();
voronoi.render(context);
context.stroke();
context.canvas.value = particles;
yield context.canvas;
for (const p of particles) {
p[0] += p[2];
p[1] += p[3];
if (p[0] < -margin) p[0] += width + margin * 2;
else if (p[0] > width + margin) p[0] -= width + margin * 2;
if (p[1] < -margin) p[1] += height + margin * 2;
else if (p[1] > height + margin) p[1] -= height + margin * 2;
p[2] += 0.2 * (Math.random() - 0.5) - 0.01 * p[2];
p[3] += 0.2 * (Math.random() - 0.5) - 0.01 * p[3];
}
}
}
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.
