Public
Edited
Dec 5, 2020
md`# Circles`
chart = {
const svg = d3
.select(DOM.svg(width, height))
.attr("viewBox", `${-width / 2} ${-height / 2} ${width} ${height}`)
.style("font", "11px monospace")
.style("background", "black")
.style("fill", "white");
var arc = d3.arc();
const thickness = 5;
const gap = Math.PI / 10;
const innerRadius = 200;
const outerRadius = innerRadius + thickness;
const data = [
{
start: -Math.PI / 4 + gap / 2,
end: Math.PI / 4 - gap / 2
},
{
start: Math.PI / 4 + gap / 2,
end: Math.PI - gap / 2
},
{
start: Math.PI + gap / 2,
end: (Math.PI * 7) / 4 - gap / 2
}
];
const tweenFunc = (start, end, progress) => {};
svg
.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("class", "arc")
.attr("fill", "white")
.attr("d", d => {
return arc({
innerRadius,
outerRadius,
startAngle: d.start,
endAngle: d.end
});
});
return svg.node();
}
height = width
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.
