{
const width = 305;
const height = 152;
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -height + 2, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
svg
.append("g")
.attr("fill", "url(#gradient)")
.selectAll()
.data(pie)
.join("path")
.attr("d", arc)
.attr("stroke", "currentColor");
svg
.append("defs")
.append("radialGradient")
.attr("id", "gradient")
.attr("cx", 0)
.attr("cy", 1)
.attr("fr", arc.innerRadius())
.attr("r", arc.outerRadius())
.attr("gradientUnits", "userSpaceOnUse")
.selectAll()
.data(d3.ticks(0, 1, 10))
.join("stop")
.attr("stop-color", d3.interpolateInferno)
.attr("offset", (i) => `${100*i}%`);
return svg.node();
}
arc = d3.arc().padAngle(0.03).innerRadius(30).outerRadius(145)
pie = d3
.pie()
.startAngle(-Math.PI / 2)
.endAngle(Math.PI / 2)(d3.range(1, 8))
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.
