{
const svg = DOM.svg(width, height);
const c = d3.select(svg);
const transform = d3.transform()
.translate(([ix, iy, x, y]) => [x, y])
.rotate(([ix, iy]) => (ix + iy) % 2 === 0 ? 0 : 90);
c.selectAll('path').data(petalData).enter()
.append('g')
.attr('transform', transform)
.attr('fill', (([ix, iy]) => d3.interpolateSinebow(Math.sqrt(ix**2 + iy**2) / 80)))
.append('path').attr('d', draw);
let iterations = 0;
d3.interval(elapsed => {
iterations++;
transform.rotate(90);
c.selectAll('g')
.transition()
.delay(([ix, iy]) => Math.sqrt(ix**2 + iy**2) * 100)
.duration(1000)
.attr('transform', transform)
.attr('fill', ([ix, iy]) =>
d3.interpolateSinebow((iterations * 20 + Math.sqrt(ix**2 + iy**2)) / 80))
}, 4000);
return svg;
}
draw = function([ix, iy, x, y]) {
const context = d3.path();
context.arc(-radius / 2, -radius / 2, radius, 0, Math.PI / 2);
context.arc(radius / 2, radius / 2, radius, Math.PI, - Math.PI / 2);
context.closePath()
return context;
}
petalData = petalIndices.map((xy) => xy.concat(xy.map(x => x * radius + radius / 2)))
petalIndices = d3.cross(d3.range(16), d3.range(9))
radius = width / 16;
height = width * aspectRatio;
aspectRatio = 9 / 16;
d3 = require('d3@5', 'd3-transform');
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.
