Published
Edited
Jul 17, 2020
1 star
Insert cell
Insert cell
chart = {
const svg = d3.create('svg')
.attr('viewBox', [-width/2, -height/2, width, height]);
const types = [
{type: 'left', pie: pieLeft, radius: 100, color: 'gold'},
{type: 'right', pie: pieRight, radius: 50, color: 'orange'}
];
types.forEach(({type, pie, radius, color}) => {
svg.selectAll('.circle-' + type)
.data(pie(d3.entries(data)))
.join('path')
.attr('class', 'circle-' + type)
.attr('d', d3.arc()
.outerRadius(radius)
.innerRadius(0))
.attr('fill', color);
});
return svg.node();
}
Insert cell
pieRight = d3.pie()
.value(d => d.value)
.sort(null)
.startAngle(Math.PI)
.endAngle(0);
Insert cell
pieLeft = d3.pie()
.value(d => d.value)
.sort(null)
.startAngle(-Math.PI)
.endAngle(0);
Insert cell
height = 300
Insert cell
data = ({a: 10})
Insert cell
d3 = require("d3")
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