The avatar for @d3
D3
Bring your data to life.
Public
d3-random
Edited
Oct 23, 2023
13 forks
Importers
61 stars
Insert cell
Insert cell
Array.from({length: 10}, Math.random)
Insert cell
Insert cell
pachinko(Math.random)
Insert cell
Insert cell
Insert cell
pachinko(d3.randomUniform(50, 100))
Insert cell
Insert cell
pachinko(d3.randomInt(50, 100))
Insert cell
Insert cell
pachinko(d3.randomNormal(mu1, sigma1), [0, 1])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
pachinko(d3.randomLogNormal(mu2, sigma2), [0, 5])
Insert cell
Insert cell
Insert cell
Insert cell
Array.from({length: 20}, d3.randomLogNormal(3 * Math.log(10), 2 * Math.log(10)))
Insert cell
Insert cell
pachinko(d3.randomIrwinHall(n1))
Insert cell
Insert cell
Insert cell
pachinko(d3.randomBates(n2), [0, 1])
Insert cell
Insert cell
Insert cell
pachinko(d3.randomExponential(lambda), [0, 5])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
pachinko(d3.randomPoisson(Math.pow(10, lam)))
Insert cell
Insert cell
Insert cell
pachinko(d3.randomBinomial(n3, p3))
Insert cell
Insert cell
Insert cell
Insert cell
pachinko(d3.randomPareto(alpha), [1, 5])
Insert cell
Insert cell
Insert cell
Array.from({length: 20}, d3.randomBernoulli(p))
Insert cell
Insert cell
Insert cell
Array.from({length: 20}, d3.randomGeometric(p2))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dodger = radius => {
const radius2 = radius ** 2;
const bisect = d3.bisector(d => d.x);
const circles = [];
return x => {
const l = bisect.left(circles, x - radius);
const r = bisect.right(circles, x + radius, l);
let y = 0;
for (let i = l; i < r; ++i) {
const { x: xi, y: yi } = circles[i];
const x2 = (xi - x) ** 2;
const y2 = (yi - y) ** 2;
if (radius2 > x2 + y2) {
y = yi + Math.sqrt(radius2 - x2) + 1e-6;
i = l - 1;
continue;
}
}
circles.splice(bisect.left(circles, x, l, r), 0, { x, y });
return y;
};
}
Insert cell
function* pachinko(random, extent, height = 200) {
const radius = 2;
const dodge = dodger(radius * 2 + 1);
const margin = {top: 0, right: 30, bottom: 20, left: 30};
const values = Float64Array.from({length: n}, random);
if (extent === undefined) extent = d3.extent(values);
const x = d3.scaleLinear(extent, [margin.left, width - margin.right]).nice();

const svg = d3.select(DOM.svg(width, height)).style("overflow", "visible");
yield svg.node();

svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));

for (let i = 0; i < n; ++i) {
if (i % 20 == 0) yield svg.node();
const cx = x(values[i]);
const cy = height - margin.bottom - dodge(cx) - radius - 1;
if (cy < margin.top) break;
svg.append("circle")
.attr("cx", cx)
.attr("cy", -400)
.attr("r", radius)
.attr("cy", cy);
}

yield svg.node();
}
Insert cell
function geiger() {
const button = md`<button style="width: 150px; height: 45px; font-size: 30px">Start ☢️</button>`;
let play = false;

invalidation.then(_ => (play = false));

function tick() {
if (play) {
snd.play();
setTimeout(tick, d3.randomExponential(viewof lambda.value)() * 1000);
}
}

d3.select(button).on("click", function() {
play = !play;
d3.select(button).text(play ? "Stop ☢️" : "Start ☢️");
tick();
});

return button;
}
Insert cell
viewof snd = {
const message = html`<pre>[Sound for ☢️]`;
message.value = new Audio(`data:audio/wav;base64,UklGRnwAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YVgAAAAAAEsAKQFlAooD+wMhA5cAZvwY98rx/+1r7Y/xZ/sUC7wfgTfIT5NlBXbcftx+BXaTZchPgTe8HxQLZ/uP8Wvt/+3K8Rj3ZvyXACED+wOKA2UCKQFLAAAA`);
return message;
}
Insert cell
n = 2500
Insert cell

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.
Learn more