chart = {
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
let radius = Math.min(width, height) / 2 - 1;
let n = data.length;
let segmentWidth = radius / n;
data.forEach(function(ring, i) {
let outerRadius = radius - i * segmentWidth;
let innerRadius = outerRadius - segmentWidth;
let rotateAngle = i <= 1 ? Math.PI / 6 : Math.PI / 4;
let arc = d3
.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.startAngle(function(d) {
return d.startAngle + rotateAngle;
})
.endAngle(function(d) {
return d.endAngle + rotateAngle;
});
const arcs = pie(ring.values);
let segments = svg
.append("g")
.attr("stroke", "black")
.attr("stroke-width", 3)
.selectAll("path")
.data(arcs)
.join("g");
segments
.append("path")
.attr("fill", d => color(d.data.segment))
.attr("d", arc);
segments.append("text").each(function(d) {
var centroid = i == n - 1 ? [0, 0] : arc.centroid(d);
d3.select(this)
.attr('x', centroid[0])
.attr('y', centroid[1])
.attr('dy', '0.33em')
.text(d.data.order)
.attr("stroke", "none")
.attr("fill", "black")
.style("text-anchor", "middle");
});
});
return svg.node();
}
data = [
{
ring: 1,
values: [
{ segment: "LAD", order: 1, value: 1 },
{ segment: "LAD", order: 2, value: 1 },
{ segment: "RCA", order: 3, value: 1 },
{ segment: "RCA", order: 4, value: 1 },
{ segment: "LCX", order: 5, value: 1 },
{ segment: "LCX", order: 6, value: 1 }
]
},
{
ring: 2,
values: [
{ segment: "LAD", order: 7, value: 1 },
{ segment: "LAD", order: 8, value: 1 },
{ segment: "RCA", order: 9, value: 1 },
{ segment: "RCA", order: 10, value: 1 },
{ segment: "LCX", order: 11, value: 1 },
{ segment: "LCX", order: 12, value: 1 }
]
},
{
ring: 3,
values: [
{ segment: "LAD", order: 13, value: 1 },
{ segment: "LAD", order: 14, value: 1 },
{ segment: "RCA", order: 15, value: 1 },
{ segment: "RCA", order: 16, value: 1 }
]
},
{ ring: 4, values: [{ segment: "LAD", order: 17, value: 1 }] }
]
color = d3
.scaleOrdinal()
.domain(["LAD", "RCA", "LCX"])
.range(["PaleTurquoise", "Gold", "Thistle"])
height = Math.min(width, 500)
pie = d3
.pie()
.sort(function(a, b) {
return b.order - a.order;
})
.value(d => d.value)
d3 = require("d3@5")
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.
