Visual data analyst and data scientist for Eli Lilly & Company.
Public
Edited
Mar 17, 2023
1 star
{
// You would think the min angle would be 0.0, but that causes the visual to
// break. An arc from 0 to 0 is not an arc and does not produce a valid path.
const minAngle = 0.05;
const svg = d3.select(DOM.svg(svgWidth, svgHeight));
const g = svg.append("g").attr("transform", `translate(${svgWidth / 2},${svgHeight / 2})`);
const path = g.append("path")
.attr("fill", d3.schemeCategory10[0])
.attr("d", arc({ startAngle: 0, endAngle: computeAngle(value) }));
let counter = 0;
function _loop() {
counter += 1;
// If the counter is even, we are going back to the min value.
// If the counter is odd, we are going to the target value.
const targetAngle = counter % 2 === 0 ? 0 : computeAngle(value);
// Perform the transition. This is inside a loop because this is a demo
// project. If you don't need to loop, then the wrapping function may
// be omitted.
path.transition()
.delay(transitionDelay)
.duration(transitionDuration)
.attr("d", arc({ startAngle: 0, endAngle: Math.max(targetAngle, minAngle) }))
.on("end", _loop);
}
_loop();
return svg.node();
}
{
const svg = d3.select(DOM.svg(svgWidth, svgHeight));
const g = svg.append("g").attr("transform", `translate(${svgWidth / 2},${svgHeight / 2})`);
const path = g.append("path")
.attr("fill", d3.schemeCategory10[1])
.attr("d", arc({ startAngle: 0, endAngle: computeAngle(value) }));
let counter = 0;
function _loop() {
counter += 1;
// Using a custom tween function, we don't need to worry about
// using 0 like we did in the above example.
let fromValue = 0;
let toValue = 0;
// Where are we going from? Where are we going to?
// This changes based on the counter.
if (counter % 2 === 0) {
fromValue = 0;
toValue = value;
} else {
fromValue = value;
toValue = 0;
}
path.transition()
.delay(transitionDelay)
.duration(transitionDuration)
.attrTween("d", () => {
// This is the custom tween function. It requires that we interpolate
// from `fromValue` to `toValue` at a given `time`. Then, compute the
// arc path.
return (time) => {
const timeValue = d3.interpolate(fromValue, toValue)(time);
const timeAngle = computeAngle(timeValue);
return arc({ startAngle: 0, endAngle: timeAngle });
}
})
.on("end", _loop);
}
_loop();
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.
