md`This notebook reproduces [this issue](https://github.com/d3/d3-shape/issues/119) in \`d3-shape\`, present in \`d3@5.7\` and prior.`
config = ({
"innerRadius": 23,
"outerRadius": 128,
"cornerRadius": 14,
"padAngle": 0.06,
"values": [
6,
6
]
})
d3 = require('d3@5.7') // fixed in https://github.com/d3/d3/releases/tag/v5.8.0
{
const size = config.outerRadius * 2;
const svg = d3.select(DOM.svg(size, size));
const g = svg.append('g').attr('transform', `translate(${config.outerRadius}, ${config.outerRadius})`);
const pie = d3.pie().padAngle(0.06);
const arc = d3.arc()
.innerRadius(config.innerRadius)
.outerRadius(config.outerRadius)
.cornerRadius(config.cornerRadius);
g
.selectAll(".slice")
.data(pie(config.values))
.enter()
.append("svg:path")
.attr('class', 'slice')
.attr('d', arc)
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.
