Published
Edited
Sep 16, 2020
1 star
chart = {
const svg = d3.select(DOM.svg(width, height));
const g = svg
.append("g")
.attr("transform", `translate(${width / 2},${height / 2})`);
g.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => (d.data.arc === "hasColor" ? "blue" : 'none'))
.attr("stroke", 'blue')
.attr("stroke-width", "1px")
.attr("d", d => arc(d));
return svg.node();
}
arc = {
return d3
.arc()
.innerRadius(0)
.outerRadius(250);
}
pie = d3
.pie()
.sort(null)
.value(d => d.value)
data = [
{ arc: 'hasColor', value: progress },
{ arc: 'noColor', value: 100 - progress }
]
arcs = pie(data)
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.
