Public
Edited
Jul 3, 2023
chart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("font", "16px sans-serif")
.style("font-weight", "bold");
const radius = Math.min(width, height) / 2;
const arcs = pie(data);
/* const arcs = d3.pie()
.value(d => d.value)
(data)
.outerRadius(outerRadius); */
/* .innerRadius(innerRadius) */
const g = svg.append("g")
.attr("transform", `translate(${width / 2},${height / 2})`);
g.selectAll("path")
.data(arcs)
.enter().append("path")
.attr("fill", "white")
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("d", arc)
g.selectAll("text")
.data(arcs)
.enter()
.append("text")
.attr("x", (d) => {
const [x, y] = arc.centroid(d);
return x;
})
.attr("y", (d) => {
const [x, y] = arc.centroid(d);
console.log(x, y);
return y;
})
.attr("text-anchor", "middle")
.text(function(d) { return d.value + " %"; });
g.selectAll("line")
.data(arcs)
.enter()
.append("line")
.attr("x1", (d) => {
const alpha = (d.endAngle + d.startAngle) / 2 - Math.PI / 2
return outerRadius * Math.cos(alpha);
})
.attr("y1", (d) => {
const alpha = (d.endAngle + d.startAngle) / 2 - Math.PI / 2
return outerRadius * Math.sin(alpha);
})
.attr("x2", (d) => {
const alpha = (d.endAngle + d.startAngle) / 2 - Math.PI / 2
return (outerRadius + lineOffset) * Math.cos(alpha);
})
.attr("y2", (d) => {
const alpha = (d.endAngle + d.startAngle) / 2 - Math.PI / 2
return (outerRadius + lineOffset) * Math.sin(alpha);
})
.attr("stroke-width", "2")
.attr("stroke", "black");
g.selectAll("line")
.data(arcs)
.enter()
.append("line")
.attr("x1", (d) => {
const alpha = (d.endAngle + d.startAngle) / 2 - Math.PI / 2
return (outerRadius + lineOffset) * Math.cos(alpha);
})
.attr("y1", (d) => {
const alpha = (d.endAngle + d.startAngle) / 2 - Math.PI / 2
return (outerRadius + lineOffset) * Math.sin(alpha);
})
.attr("x2", (d) => {
const alpha = (d.endAngle + d.startAngle) / 2 - Math.PI / 2
return (outerRadius + lineOffset) * Math.cos(alpha);
})
.attr("y2", (d) => {
const alpha = (d.endAngle + d.startAngle) / 2 - Math.PI / 2
if (alpha <= Math.PI * 2) {
return width;
} else {
return 0;
}
})
.attr("stroke-width", "2")
.attr("stroke", "black");
g.selectAll("cicle")
.data(arcs)
.enter()
.append("circle")
.attr("cx", (d) => {
const alpha = (d.endAngle + d.startAngle) / 2 - Math.PI / 2
return outerRadius * Math.cos(alpha);
})
.attr("cy", (d) => {
const alpha = (d.endAngle + d.startAngle) / 2 - Math.PI / 2
return outerRadius * Math.sin(alpha);
})
.attr("r", 8)
.attr("fill", "white")
.attr("stroke-width", "2")
.attr("stroke", "black");
return svg.node();
}
pie = d3.pie()
.sort(d => d.value)
.value(d => d.value);
arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
/* .padAngle(0.05)
.cornerRadius(10); */
arcs = pie(data);
data = [
{segment: "sciencephiles", value: 27.8},
{segment: "critically interested", value: 17.2},
{segment: "passive supporters", value: 41.5},
{segment: "disengaged", value: 13.4},
]
height = Math.min(width, 500)
radius = Math.min(width, height) / 2;
innerRadius = radius / 2;
outerRadius = radius - lineOffset;
lineOffset = 40;
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.
