Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
canvas = {
const noise = octave(perlin2, 2);
const random = d3.randomLcg(42);
const plot = Plot.plot({
inset: 12,
axis: null,
height: 1152,
width: 1152,
marks: [
Plot.vector(poisson(10000, {random}), {
stroke: "#ccc",
length: ([x, y]) => (noise(x + 2, y) + 0.5) * 24,
rotate: ([x, y]) => noise(x, y) * 360
})
]
});
const X = plot.scale("x");
const Y = plot.scale("y");
const g = d3.select(plot).append("g")
.attr("fill", "none")
.attr("stroke", "currentColor")
.attr("stroke-width", 1.5)
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round");
yield plot;
for (let [x, y] of d3.shuffler(random)([...poisson(1000, {random})])) {
let points = [[x, y]];
const path = g.append("path");
const k = 0.01;
for (let i = 0; i < 40 && 0 <= x && x < 1 && 0 <= y && y < 1; ++i) {
const a = noise(x, y) * 2 * Math.PI;
points.push([x += Math.sin(a) * k, y += Math.cos(a) * k]);
path.attr("d", `M${points.map(([x, y]) => [X.apply(x), Y.apply(y)]).join("L")}`);
if (i % 10 === 0) yield plot;
}
}
}
function* poisson(n, { // number of samples
xDomain = [0, 1], // extent of allowed x-values
yDomain = [0, 1], // extent of allowed y-values
k = 30, // number of candidates per sample
random = Math.random // source of randomness
} = {}) {
const [x0, x1] = xDomain;
const [y0, y1] = yDomain;
const width = x1 - x0;
const height = y1 - y0;
const radius2 = width * height / (n * 1.5);
const radius = Math.sqrt(radius2);
const radius2_3 = 3 * radius2;
const cellSize = radius * Math.SQRT1_2;
const gridWidth = Math.ceil(width / cellSize);
const gridHeight = Math.ceil(height / cellSize);
const grid = new Array(gridWidth * gridHeight);
const queue = [];
// Pick the first sample.
yield sample(width / 2 + random() * radius, height / 2 + random() * radius);
// Pick a random existing sample from the queue.
pick: while (queue.length) {
const i = random() * queue.length | 0;
const parent = queue[i];
// Make a new candidate between [radius, 2 * radius] from the existing sample.
for (let j = 0; j < k; ++j) {
const a = 2 * Math.PI * random();
const r = Math.sqrt(random() * radius2_3 + radius2);
const x = parent[0] + r * Math.cos(a);
const y = parent[1] + r * Math.sin(a);
// Accept candidates that are inside the allowed extent
// and farther than 2 * radius to all existing samples.
if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) {
yield sample(x, y);
continue pick;
}
}
// If none of k candidates were accepted, remove it from the queue.
const r = queue.pop();
if (i < queue.length) queue[i] = r;
}
function far(x, y) {
const i = x / cellSize | 0;
const j = y / cellSize | 0;
const i0 = Math.max(i - 2, 0);
const j0 = Math.max(j - 2, 0);
const i1 = Math.min(i + 3, gridWidth);
const j1 = Math.min(j + 3, gridHeight);
for (let j = j0; j < j1; ++j) {
const o = j * gridWidth;
for (let i = i0; i < i1; ++i) {
const s = grid[o + i];
if (s) {
const dx = s[0] - x;
const dy = s[1] - y;
if (dx * dx + dy * dy < radius2) return false;
}
}
}
return true;
}
function sample(x, y, parent) {
queue.push(grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = [x, y]);
return [x + x0, y + y0];
}
}
import {perlin2, octave} from "@mbostock/perlin-noise"
Plot = require(await FileAttachment("plot.umd.min.js").url()) // https://github.com/observablehq/plot/pull/649
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.
