Published
Edited
Jun 23, 2020
Insert cell
Insert cell
padAngle = 0.02 * Math.PI
Insert cell
chart = {
const svg = d3.create('svg')
.attr('viewBox', [-width/2, -height/2-20, width, height]);
const g = svg.selectAll('g')
.data(outerPieData)
.join('g')
.attr('class', (d) => `family-${d.data.family}`)
.attr('fill', (d) => color(d.data.family));
g.selectAll('path')
.data((d) => d3.pie()
.value(d => d.share)
.startAngle(d.startAngle)
.endAngle(d.endAngle - padAngle)
(d.data.parties))
.join('path')
.attr('d', arc)
.attr('stroke', 'white')
.style('stroke-width', 1);
return svg.node();
}
Insert cell
arc = d3.arc()
.outerRadius(radius)
.innerRadius(radius - thickness)
.cornerRadius(4)
Insert cell
outerPieData = outerPie(nested)
Insert cell
outerPie = d3.pie()
.value(d => d.share)
.sort(null)
.startAngle(-pieSize * Math.PI)
.endAngle(pieSize * Math.PI + padAngle);
Insert cell
pieSize = 0.75
Insert cell
thickness = 120
Insert cell
radius = 150
Insert cell
height = 300
Insert cell
color = d3.scaleOrdinal()
.domain(families)
.range(d3.schemePastel1)
Insert cell
nested = d3.nest()
.key((d) => d.family)
.sortKeys(d3.ascending)
.entries(data)
.map((d) => ({
family: d.key,
parties: d.values,
share: d3.sum(d.values, (d) => d.share)
}));
Insert cell
data = parties.map(party => ({
party: party,
share: Math.ceil(Math.random() * Math.floor(15)),
family: families[Math.floor(Math.random() * Math.floor(3))]
}))
Insert cell
families = '123'.split('')
Insert cell
parties = 'ABCDEFGHI'.split('')
Insert cell
d3 = require("d3@5")
Insert cell
Insert cell

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.
Learn more