chart = {
const data = [1, 1, 2, 3, 5, 8, 13, 21];
const pie = d3.pie().padAngle(0.03);
const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#777")
.selectAll("path")
.data(pie(data))
.join("path")
.attr("d", arc.cornerRadius(0));
svg.append("g")
.attr("fill", "#ccc")
.attr("stroke", "#000")
.attr("stroke-width", "1.5px")
.attr("stroke-linejoin", "round")
.selectAll("path")
.data(pie(data))
.join("path")
.attr("d", arc.cornerRadius(cornerRadius));
return svg.node();
}
width = 960
height = 500
outerRadius = height / 2 - 30
innerRadius = outerRadius / 3
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.
