Public
Edited
Jan 17, 2023
d3 = require('d3@6')
// Create an arc generator with configuration
{
const container = d3.create('svg')
.attr('width', width)
.attr('height', 500)
container.append('g').attr('transform','translate(150,250)')
var arcGenerator = d3.arc()
.innerRadius(20)
.outerRadius(100);
var arcData = [
{label: 'A', startAngle: 0, endAngle: 0.2},
{label: 'B', startAngle: 0.2, endAngle: 0.6},
{label: 'C', startAngle: 0.6, endAngle: 1.4},
{label: 'D', startAngle: 1.4, endAngle: 3},
{label: 'E', startAngle: 3, endAngle: 2* Math.PI}
];
// Create a path element and set its d attribute
container.select('g')
.selectAll('path')
.data(arcData)
.enter()
.append('path')
.attr('d', arcGenerator);
// Add labels, using .centroid() to position
container.select('g')
.selectAll('text')
.data(arcData)
.enter()
.append('text')
.each(function(d) {
var centroid = arcGenerator.centroid(d);
d3.select(this)
.attr('x', centroid[0])
.attr('y', centroid[1])
.attr('dy', '0.33em')
.text(d.label);
});
return container.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.
