Developer @Observable
Published
Edited
Sep 19, 2022
7 stars
data = Array.from({ length: numPoints })
.map((d, index) => ({
index,
a: rngs.ab() < 0.5,
b: rngs.ab() < 0.15
}))
.map((d) => ({ ...d, desc: genDesc(d.a, d.b) }))
points = data.map((d) => {
let x, y;
let iterations = 0;
let da, db;
let matchA, matchB;
do {
x = rngs.xy();
y = rngs.xy();
da = Math.hypot(1 / 3 - x, 1 / 2 - y);
db = Math.hypot(2 / 3 - x, 1 / 2 - y);
matchA = d.a ? da < 0.25 - edgePadding : da > 0.25 + edgePadding;
matchB = d.b ? db < 0.25 - edgePadding : db > 0.25 + edgePadding;
iterations++;
} while (!matchA || !matchB);
return {
...d,
x,
y,
iterations,
da,
db
};
})
rngs = {
numPoints;
let xyInner = d3.randomLcg(43);
return {
ab: d3.randomLcg(42),
xy: () => xyInner() * (1 - edgePadding * 2) + edgePadding
};
}
genDesc = (a, b) => `a=${a},b=${b}`
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.
