playing with space, shape, colour & composition
md `Amount or repetitions:`
{
const svg = d3.select(DOM.svg(width, height))
const sel = svg.append('g').attr('transform', `translate(${width/2}, ${height/2})`)
let t = 0 // increment
const reps = amount // number of repetitions
const colorRainbow = d3.scaleSequential()
.domain([0, reps])
.interpolator(d3.interpolateRainbow)
function update(_t) {
sel.append('circle')
.attr('cx', x(_t))
.attr('cy', y(_t))
.attr('r', d3.randomUniform(2, 7)())
.attr('fill', colorRainbow(_t))
}
// parametric equations
function x(n) {
return Math.sin(n / 10) * 100 + Math.sin(n / 15) * 100
}
function y(n) {
return Math.cos(n / 10) * 100
}
// use genrator instead of d3.interval:
while (t < reps) {
t++
update(t)
yield svg.node()
}
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
