Principal Web Developer at Freedom of the Press Foundation
viewof color = Inputs.color({ label: 'Color', value: '#CC0000' })
points = {
// Regenerate points from scratch when the restart button is pressed
restart
const RADIUS = SIZE / 2
// Generate the corner points of an equilateral triangle
const points = [
STARTING_ANGLE,
STARTING_ANGLE + TAU / 3,
STARTING_ANGLE + 2 * TAU / 3
].map((angle) => ([
RADIUS * Math.cos(angle) + SIZE / 2,
RADIUS * Math.sin(angle) + SIZE / 2 + RADIUS / 5,
]))
// Until we reach the maximum number of points, keep adding a new point that is
// equidistant from one of the existing points and one of the
// corner points.
let lastPoint, randVertex
while (points.length < MAX_POINTS) {
// Use the last point -- note this is slightly different from the way the algorithm
// is described above: instead of using a random point for the first point, we use
// another corner. This guarantees a point that is meant to be in the fractal.
lastPoint = points[points.length - 1]
// Pick a corner point
randVertex = points[d3.randomInt(0, 3)()]
// Create a new point that is the geometric mean of those two
const newPoint = [
(lastPoint[0] + randVertex[0]) / 2,
(lastPoint[1] + randVertex[1]) / 2,
]
points.push(newPoint)
}
return points
}
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.
