chart = {
const height = 600;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
replay;
for (const event of poissonDiscSampler(width, height, 10)) {
if (event.add) {
event.parent && svg.insert("line", "circle")
.attr("x1", event.parent[0])
.attr("y1", event.parent[1])
.attr("x2", event.add[0])
.attr("y2", event.add[1])
.attr("stroke", "#999");
svg.append("circle")
.attr("id", `point-${event.add.map(Math.round).join("-")}`)
.attr("r", 0)
.attr("cx", event.add[0])
.attr("cy", event.add[1])
.transition()
.ease(d3.easeLinear)
.attr("r", Math.random()*5)
.transition()
.attr("fill", "#f00");
} else if (event.remove) {
svg.select(`#point-${event.remove.map(Math.round).join("-")}`)
.transition()
.ease(d3.easeLinear)
.attr("fill", "#999")
.attr("r", 2);
}
yield svg.node();
}
}
function* poissonDiscSampler(width, height, radius) {
const k = 30; // maximum number of samples before rejection
const radius2 = radius * radius;
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 {add: sample(width / 2 + Math.random() * radius, height / 2 + Math.random() * radius, null)};
// Pick a random existing sample from the queue.
pick: while (queue.length) {
const i = Math.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 * Math.random();
const r = Math.sqrt(Math.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 {add: sample(x, y), parent};
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;
yield {remove: parent};
}
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) {
const s = grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = [x, y];
queue.push(s);
return s;
}
}
d3 = require("d3@5")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.