md `Progress: ${progress}%`
viewof progress=html`<input type="range" min="0" max="100" value="73">`
chart = {
const svg = d3.select(DOM.svg(width, height))
.attr("text-anchor", "middle")
.style("font", "12px sans-serif");
const defs = svg.append("defs");
const arcWidth = (outerRadius + innerRadius) / 2;
const gradients = defs.selectAll("linearGradient")
.data(arcs, d=> d.data.uid.id)
.join("linearGradient")
.attr("id", d=> d.data.uid.id)
.attr("gradientUnits", d=> "userSpaceOnUse")
.attr("x1", d=> Math.cos(d.startAngle - Math.PI/2)*(arcWidth))
.attr("y1", d=> Math.sin(d.startAngle - Math.PI/2)*(arcWidth))
.attr("x2", d=> Math.cos(d.endAngle - Math.PI/2)*(arcWidth))
.attr("y2", d=> Math.sin(d.endAngle - Math.PI/2)*(arcWidth));
gradients
.append("stop")
.attr("offset", "0%")
.attr("stop-color", (d,i) => colorScale(i))
gradients
.append("stop")
.attr("offset", "100%")
.attr("stop-color", (d,i) => colorScale(i+1))
const g = svg.append("g")
.attr("transform", `translate(${width / 2},${height / 2})`);
g.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => ( d.data.color === "none" ? "none" : d.data.uid) )
.attr("stroke", d => ( d.data.color === "none" ? "none" : d.data.uid) )
.attr("stroke-width","1px")
.attr("d", arc);
g.selectAll("text")
.data([progress])
.join("text")
.attr("text-anchor", "middle")
.attr("dy", ".3em")
.style("font", "10px sans-serif")
.style("max-width", "100%")
.style("height", "auto")
.attr("text-anchor", "middle")
.attr("fill", d => colorScale(0))
.text( d => d + "%")
.attr("transform", `scale(${ innerRadius/15 })`);
return svg.node();
}
data = d3.range(nbArcs).map((d,i)=>({uid:DOM.uid(), value:(progress/nbArcs)})).concat({uid:DOM.uid(), value: 100-progress, color:"none"})
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.
