Public
Edited
Nov 11, 2024
3 stars
chart = {
const radius = 60
const height = 280
const width = 140
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
function stackTransition(data) {
const total = d3.sum(data)
const scales = d3.stack()
.keys([...data.keys()])
([data])
.map(([[start, end]]) => d3.scaleLinear([start/total, end/total], [0, 1]))
return function (element) {
const ease = element.ease()
element.delay(0)
.duration(element.duration())
.easeVarying((_, i, slices) => t => {
let variation = scales[i](ease(t))
if (variation <= 0 && i > 0) return 0
if (variation > 1 && i < slices.length - 1) return 1
return variation
})
}
}
(function singleSlidePie () {
const data = [54]
const pie = d3.pie();
const arcs = pie(data);
svg.append('g')
.attr('transform', `translate(${width / 2}, ${height / 4 + 10})`)
.selectAll('.slice')
.data(arcs)
.enter()
.append('path')
.classed('slice', true)
.attr('d', v => d3.arc()
.innerRadius(0)
.outerRadius(radius)
.startAngle(0)
.endAngle(0)()
)
.attr('fill', d3.scaleOrdinal(d3.schemeAccent))
.attr('stroke', 'black')
.attr('stroke-width', '1px')
.transition()
.delay((v, i) => i * 1000)
.duration(5000)
.ease(d3[ease])
.attrTween('d', v => t => d3.arc()
.innerRadius(0)
.outerRadius(radius)
.startAngle(v.startAngle)
.endAngle(v.endAngle * t + v.startAngle * (1 - t))()
);
})();
(function stackAnimatedPie() {
const data = [21, 13, 8, 5, 3, 2, 1, 1];
const pie = d3.pie();
const arcs = pie(data);
svg.append('g')
.attr('transform', `translate(${width / 2}, ${height * 3 / 4})`)
.selectAll('.slice')
.data(arcs)
.enter()
.append('path')
.classed('slice', true)
.attr('d', v => d3.arc()
.innerRadius(0)
.outerRadius(radius)
.startAngle(0)
.endAngle(0)()
)
.attr('fill', d3.scaleOrdinal(d3.schemeAccent))
.attr('stroke', 'black')
.attr('stroke-width', '1px')
.transition()
.duration(5000)
.ease(d3[ease])
.call(stackTransition(data))
.attrTween('opacity', (v, i) => t => {
if (t <= 0 && i > 0) return 0
if (t > 0) return 1
})
.attrTween('d', v => t => d3.arc()
.innerRadius(0)
.outerRadius(radius)
.startAngle(v.startAngle)
.endAngle(v.endAngle * t + v.startAngle * (1 - t))()
);
})();
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.
