Public
Edited
Jan 21, 2024
donutChart
viewof clicks = Inputs.button("Click me")
donutChart = {
console.log("donutChart exec");
svg
.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", (d) => color(d.data.fruit))
.each(function (d) {
this._current = d;
})
// Store the initial angles
return svgElem.node();
}
arc = d3
.arc()
.innerRadius(radius - 150)
.outerRadius(radius)
.cornerRadius(10)
pie = d3
.pie()
.value((d) => d.value)
.sort((a, b) => a.name - b.name)
.startAngle(Math.PI / 2) // Rotate start angle by 45 degrees
.endAngle(2 * Math.PI + Math.PI / 2)
.padAngle(0.03)
svg = svgElem
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("background-color", "black")
.append("g")
.attr(
"transform",
`translate(${width / 2 + margin.left}, ${height / 2 + margin.top})`
)
svgElem = d3.create("svg");
margin = ({ top: 20, right: 20, bottom: 20, left: 20 })
{
clicks;
if (clicks == 1) return;
console.log("clicked");
const data2 = [
{ fruit: "Apples", value: 5 },
{ fruit: "Bananas", value: 95 }
];
svg
.selectAll("path")
.data(pie(data2)) // Bind the new data
.transition() // Start the transition
.duration(5000) // Set the duration of the transition (in ms)
.attrTween("d", function (d) {
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function (t) {
return arc(interpolate(t));
};
});
}
color = d3.scaleOrdinal(["#fde946", "#ff6bc3"])
radius = Math.min(width, height) / 2
height = 800 - margin.top - margin.bottom
width = 800 - margin.left - margin.right;
data = [
{ fruit: "Apples", value: 95 },
{ fruit: "Bananas", value: 5 }
]
d3 = require("d3@6")
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.
