Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Apr 9, 2021
1 fork
2 stars
{
const height = 300;
const context = DOM.context2d(width, height);
context.canvas.style.imageRender = "pixelated";
while (true) {
yield context.canvas;
const x0 = Math.random() * width | 0;
const x1 = Math.random() * width | 0;
const y0 = Math.random() * height | 0;
const y1 = Math.random() * height | 0;
for (const [x, y] of plotLine(x0, y0, x1, y1)) {
context.fillRect(x, y, 1, 1);
yield context.canvas;
}
}
}
function* plotLine(x0, y0, x1, y1) {
if (Math.abs(y1 - y0) < Math.abs(x1 - x0)) {
if (x0 > x1) yield* plotLineLow(x1, y1, x0, y0);
else yield* plotLineLow(x0, y0, x1, y1);
} else {
if (y0 > y1) yield* plotLineHigh(x1, y1, x0, y0);
else yield* plotLineHigh(x0, y0, x1, y1);
}
}
function* plotLineHigh(x0, y0, x1, y1) {
let dx = x1 - x0;
let dy = y1 - y0;
let xi = dx < 0 ? (dx = -dx, -1) : 1;
let D = 2 * dx - dy;
for (let x = x0, y = y0; y <= y1; ++y, D += 2 * dx) {
yield [x, y];
if (D > 0) x += xi, D -= 2 * dy;
}
}
function* plotLineLow(x0, y0, x1, y1) {
let dx = x1 - x0;
let dy = y1 - y0;
let yi = dy < 0 ? (dy = -dy, -1) : 1;
let D = 2 * dy - dx;
for (let x = x0, y = y0; x <= x1; ++x, D += 2 * dy) {
yield [x, y];
if (D > 0) y += yi, D -= 2 * dx;
}
}
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.
