{
const data = [1, 3];
const size = 1024;
const r = size / 2;
const pie = (a, b) => d3.pie().sort(d3.ascending).startAngle(a).endAngle(b);
const arc = (a, b) =>
d3
.arc()
.innerRadius(r * a)
.outerRadius(r * b);
const pieOuter = pie(Math.PI / 4, Math.PI * 2 + Math.PI / 4);
const pieInner = pie((Math.PI / 4) * 5, Math.PI * 2 + (Math.PI / 4) * 5);
const dataOuter = pieOuter(data);
const dataInner = pieInner(data);
const arcOuter = arc(0.67, 1);
const arcMiddle = arc(0.33, 0.67);
const arcInner = arc(0, 0.34);
const app = cm.render({
width: size,
height: size,
viewBox: [-r, -r, size, size],
draw: [
SVG.path({ d: arcOuter(dataOuter[1]), fill: "#00ADB5" }),
SVG.path({ d: arcMiddle(dataOuter[1]), fill: "#393E46" }),
SVG.path({ d: arcInner(dataInner[0]), fill: "#393E46" })
]
});
return app.node();
}
SVG = cm.SVG;
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.
