Published
Edited
Apr 5, 2022
5 stars
radii = d3.range(300, 0, -(300/5));
ring_start = [-0.35,-0.2,-0.1,-0.45,-0.25]
ring_names = ["A really long name example", "Short Example", "Short", "Medium length", "Last"]
dimensions = ({width: width, height: width/2 + 60 })
// rerun this cell to generate new data!
data = [...Array(5).keys()].map((x,i) => {
return ({
radii: radii[i],
name: ring_names[i],
ringPath: d3.arc().innerRadius(d => radii[i]).outerRadius(d => radii[i]).startAngle(d => ring_start[i]).endAngle(d => 1)
})
});
arcGenerator = d3.arc().innerRadius(d => d.radii - 3).outerRadius(d => d.radii).startAngle(d => d.startAngle).endAngle(d => 1)
chart = {
var svg = d3.create("svg")
.attr("viewBox", [0,0, dimensions.width, dimensions.height])
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("fill", "white")
.attr("stroke", "#aaaaaa")
.attr("r", function(d) { return d.radii })
.attr('transform', `translate(${dimensions.width / 2}, ${dimensions.height / 2})`)
const label = svg
.selectAll("path")
.data(data)
.enter()
.append('path')
.attr("id", d => d.name)
.attr("d", d => d.ringPath())
.attr('fill', 'none')
.style("stroke", "none")
.attr('transform', `translate(${dimensions.width / 2}, ${(dimensions.height / 2) + 6})`)
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.append("textPath")
.attr("xlink:href", d => "#" + d.name)
.style("text-anchor","center")
.text(d => d.name)
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.
