Published
Edited
Feb 24, 2022
1 fork
3 stars
viewof numCirles = slider({ min: 1, max: 10, value: 2, step: 1 })
viewof frequency = slider({ min: .01, max: 5, value: .3 })
viewof amplitude = slider({ min: 1, max: 100, value: 10 })
viewof speed = slider({ min: .5, max: 5, value: 1 })
baseR = 120
Array.from({ length: numCirles })
line = i =>
d3
.lineRadial()
.angle(d => d)
.curve(d3.curveCardinalClosed)
.radius(
d =>
baseR +
rScale(
simplex.noise3D(
Math.cos(d * i) * frequency,
Math.sin(d * i) * frequency,
// i + 3
(i * now) / 5500
)
)
)
// .radius(d => baseR + rScale(simplex.noise2D(d * i * frequency, now / 5500)))
rScale = d3
.scaleLinear()
.domain([0, 1])
.range([-amplitude, amplitude])
height = 500
circleSegments = 60
data = Array.from(
{ length: circleSegments },
(d, i) => (i / (circleSegments + 1)) * 2 * Math.PI
)
simplex = new noise()
noise = require("simplex-noise@2")
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.
