pie = d3.pie().value(d => d.amount);
chart = {
const arcs = pie(data);
// console.log(arcs);
const svg = d3.select(DOM.svg(width, height))
.attr("text-anchor", "middle")
.style("font", "12px sans-serif");
const g = svg.append("g")
.attr("transform", `translate(${width / 2},${height / 2})`);
g.selectAll("path")
.data(arcs)
.enter().append("path")
.attr("fill", (d,i) => color[i])
.attr("stroke", "white")
.attr("d", arc)
// const text = g.selectAll("text")
// .data(arcs)
// .enter().append("text")
// .attr("transform", d => `translate(${arcLabel.centroid(d)})`)
// .attr("dy", "0.35em");
// text.append("tspan")
// .attr("x", 0)
// .attr("y", "-0.7em")
// .style("font-weight", "bold")
// .text(d => d.data.item);
// text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
// .attr("x", 0)
// .attr("y", "0.7em")
// .attr("fill-opacity", 0.7)
// .text(d => d.data.amount.toLocaleString());
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.
