The avatar for @d3
D3
Bring your data to life.
Public
d3-random
Edited
Oct 23, 2023
13 forks
Importers
62 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

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