Published
Edited
Nov 13, 2020
sunburst()
sunburst = () => {
const l = data_2.descendants().length
const tUpdate = svg
.transition()
.duration(1500)
.ease(d3.easeQuadInOut);
svg.selectAll('path')
.each((node, i) => {
oldNodes[i] = node;
})
.data(data_2.descendants(), d => d.data.id)
.join(
(enter) =>
enter
.append('path')
.attr('id', (d, i) => `segment-${i}`)
.attr('fill', (d) => 'white')
.attr('fill-opacity', 0)
.call(
async (enter) =>
await enter
.transition(tUpdate)
.on('end', (d,i) => {
if (l === i+1) {
updateDepth()
}
})
.attr('d', (d) => arc(d.current) )
.attr('fill-opacity', 0.5)
.attr('fill', 'slategrey')
.end()
),
(update) =>
update.call(
async (update) =>
await update
.transition(tUpdate)
.on('end', (d,i) => {
if (l === i+1) {
updateDepth()
}
})
.tween('data', (d) => {
d.previous = oldNodes.find(
(node) => node.data.id === d.data.id
);
d.previous.step = visibleDepthOld
const i = d3.interpolate(d.previous, d.current);
return (t) => (d.previous = i(t));
})
.attrTween('d', (d) => () => {
const newArc = getArc(dimensions.radius, d.previous.step)
return newArc(d.previous)
})
.end(),
update
.transition(tUpdate)
.attr('fill', 'steelblue')
.attr('fill-opacity', 1)
),
(exit) =>
exit.call(async (exit) =>
await exit
.attr('fill', 'red')
.transition(tUpdate)
.attr('fill', 'white')
.attr('fill-opacity', 0)
.remove()
.end()
)
)
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.
