{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr(
"transform",
(d, i) =>
`translate(${xOffset + i * xFactor},${height / 1.5 - i * yFactor})`
)
.attr("fill", d => color(rScale(d)))
.attr('stroke-width', 1)
.attr('stroke', 'black')
.attr('cx', 0)
.attr('cy', 0)
.attr('r', d => rScale(d))
.lower()
.transition()
//.delay((d, i) => i * 10)
.duration(2000)
.attr('r', 8)
.transition()
.delay((d, i) => i * 10)
.duration(2000)
.attr('r', d => rScale(d));
svg
.append("g")
.call(xAxis)
.lower();
return svg.node();
}
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.
