Public
Edited
Apr 1, 2024
{
const innerRadius = 0;
const outerRadius = h / 2;
const svg = d3.create('svg')
.attr('width', w)
.attr('height', h);
const pie = d3.pie()
.value(d => d.distribution);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
const cScale = d3.scaleOrdinal(d3.schemeCategory10);
console.table(pie(dataset));
const arcs = svg
.selectAll('g.arc')
.data(pie(dataset))
.join('g')
.classed('arc', true)
.attr('transform', `translate(${w/2 - 40}, ${h/2})`);
arcs.append('path')
.attr('fill', (d, i) => cScale(i))
.attr('d', arc)
.append('title')
.text(d => d.data.rank);
arcs.append('text')
.attr('transform', d => `translate(${arc.centroid(d)})`)
.attr('text-anchor', 'middle')
.text(d => Math.round(d.data.distribution))
.style('fill', 'white');
const pieData = pie(dataset);
const legendScale = d3
.scaleOrdinal()
.domain(pieData.map((d) => d.data.role))
.range(d3.schemeCategory10);
var legendOrdinal = d3Legend
.legendColor()
.shape("path", d3.symbol().type(d3.symbolSquare).size(60)())
.shapePadding(20)
.orient("vertical")
.scale(legendScale);
svg.append("g").attr("transform", "translate(500,10)").call(legendOrdinal);
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.
