This is where I prototype and experiment
Published
Edited
Sep 16, 2020
2 forks
3 stars
chart = {
const svg = d3.create('svg')
.attr('viewBox', [-width/2, -height/2-marginTop, width, height]);
svg.selectAll('path')
.data(pieData)
.join('path')
.attr('d', arc)
.attr('fill', d => color(d.data.key))
.attr('stroke', 'white')
.style('stroke-width', 2);
return svg.node();
}
arc = d3.arc()
.outerRadius(radius)
.innerRadius(radius - thickness)
pieData = pie(d3.entries(data))
pie = d3.pie()
.value(d => d.value)
.sort(null)
.startAngle(-anglesRange)
.endAngle(anglesRange);
anglesRange = 0.5 * Math.PI
thickness = 120
radius = 150
marginTop = 30
height = 300
color = d3.scaleOrdinal()
.domain(data)
.range(d3.schemePastel1)
data = ({a: 10, b: 50, c: 15, d: 20, e: 5})
d3 = require("d3@5")
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.
