Published
Edited
Dec 12, 2021
Importers
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
cardRadius = cardDiagonalLength / 2
Insert cell
cardSize = ({
width: cardAspectRatio * cardDiagonalLength / Math.sqrt(1 + cardAspectRatio**2),
height: cardDiagonalLength / Math.sqrt(1 + cardAspectRatio**2)
})
Insert cell
fieldSize = ({
width: width,
height: width * 0.75
})
Insert cell
Insert cell
Insert cell
// Note: samples() does not necessarily yield the specified number of samples.
// while() is used to make sure we get 'numCards' samples.
poissonSamples = {
const rangeWithMargin = [cardRadius, cardRadius, fieldSize.width - cardRadius, fieldSize.height - cardRadius];
let n = numCards
let points = []
while (points.length < numCards) {
points = [...samples(rangeWithMargin, n)]
n += 1
}
return points.slice(0, numCards).map(d => ({
x: d[0],
y: d[1],
rotation: Math.random() * 360
}))
}
Insert cell
Insert cell
randomLocations = d3.range(numCards).map(_ => ({
x: fieldSize.width * Math.random(),
y: fieldSize.height * Math.random(),
rotation: Math.random() * 360
}))
Insert cell
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