svg`<svg viewBox="${-w} ${-h} ${width} ${height}">
${d3.range(100)
.map(getRandomPerimenterPoint)
.map(([x, y]) => svg`<circle r="4" cx="${x}" cy=${y} />`)}
</svg>`
function getRandomPerimenterPoint() {
const angle = getRandomAngle();
if (angle < cornerAngles[0] || angle >= cornerAngles[3]) {
return [-w, -w * Math.tan(angle)];
} else if (angle < cornerAngles[1]) {
return [-h / Math.tan(angle), -h];
} else if (angle < cornerAngles[2]) {
return [w, w * Math.tan(angle)];
} else if (angle < cornerAngles[3]) {
return [h / Math.tan(angle), h];
}
}
function getRandomAngle() {
return (rand() - 0.5) * Math.PI * 2;
}
cornerAngles = [
[-w, -h],
[w, -h],
[w, h],
[-w, h]
].map(([x, y]) => Math.atan2(y, x))
rand = d3.randomLcg(Date.now())
height = width / 2
w = width / 2;
h = height / 2;
d3 = require("d3@6")
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.
