Visual data analyst and data scientist for Eli Lilly & Company.
Public
Edited
Apr 6, 2023
2 stars
data = [
{ group: 0, color: "#c00", time: 0, value: 5, previous: 7 },
{ group: 0, color: "#c00", time: 1, value: 8, previous: 5 },
{ group: 0, color: "#c00", time: 2, value: 7, previous: 8 },
{ group: 1, color: "#0c0", time: 0, value: 6, previous: 58 },
{ group: 1, color: "#0c0", time: 1, value: 50, previous: 6 },
{ group: 1, color: "#0c0", time: 2, value: 58, previous: 50 },
{ group: 2, color: "#00c", time: 0, value: 4, previous: 77 },
{ group: 2, color: "#00c", time: 1, value: 60, previous: 4 },
{ group: 2, color: "#00c", time: 2, value: 77, previous: 60 },
]
{
const svg = d3.select(DOM.svg(width, height));
const gGroup = svg.selectAll("g.group")
.data(groups)
.join("g")
.classed("group", true)
.attr("data-group", d => d)
.attr("transform", (_, i) => {
const tx = ((0.5 + i) * segmentWidth).toFixed(3);
const ty = height / 2;
return `translate(${tx},${ty})`;
});
let currentTime = -1;
let firstDraw = true;
function loop() {
updateTime();
groups.forEach((group) => {
window.gGroup = gGroup;
const parent = gGroup.filter(d => d === group);
console.log(`group:`, group, `, parent:`, parent);
const groupData = data.filter(d => d.group === group && d.time === currentTime);
console.log(`group data:`, groupData);
if (firstDraw) {
parent.selectAll("path")
.data(groupData)
.join("path")
.attr("data-value", d => d.value)
.attr("fill", d => d.color)
.attr("d", d => {
const startAngle = 0;
const endAngle = 2 * Math.PI * d.value / 100;
return arc({ startAngle, endAngle });
});
firstDraw = false;
} else {
parent.selectAll("path")
.data(groupData)
.join("path")
.transition()
.duration(transitionDuration)
.attr("data-value", d => d.value)
.attr("fill", d => d.color)
.attrTween("d", d => {
return (t) => {
const startAngle = 0;
const interpolate = d3.interpolate(d.previous, d.value);
const value = interpolate(t);
const endAngle = 2 * Math.PI * value / 100;
return arc({ startAngle, endAngle });
};
});
}
});
}
function updateTime() {
currentTime += 1;
if (currentTime > maxTime) {
currentTime = 0;
}
console.log(`time: ${currentTime} / ${maxTime}`);
}
setInterval(() => {
loop();
}, loopInterval);
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.
