function progress(percentage, style) {
// indicators
let arcs = categories.map(cat => {
return arc(100, 130, cat.start, cat.end-0, cat.color, 0.3, style)
})
let cat = categories.find(c => (c.start <= percentage && c.end >= percentage))
arcs.push(
arc(100, 124, 0, percentage, cat.color, 1, style)
)
let textOffset = -20
if (style === 'radial') {
textOffset = 20
}
arcs.push(
svg `<text x=0 y=${textOffset} style="font: bold 50px Avenir; fill: ${cat.color}; text-anchor: middle;">${percentage}%</text>`
)
return arcs
}
categories = [
{ start: 0, end: 50, color: '#800823'}, // C80723
{ start: 50.001, end: 80, color: '#E8B500'},
{ start: 80.001, end: 100, color: '#2CC937'}
]
function arc(outerRadius, innerRadius, start, end, color, opacity = 1, style) {
let arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.startAngle(([startAngle, endAngle]) => startAngle)
.endAngle(([startAngle, endAngle]) => endAngle)
let startAngle, endAngle
if (style === 'tacho') {
startAngle = Math.PI*start/100 - Math.PI/2
endAngle = Math.PI*end/100 - Math.PI/2
} else {
startAngle = 2*Math.PI*start/100
endAngle = 2*Math.PI*end/100
}
return svg`<path opacity="${opacity}" stroke="none" fill="${color}" d="${arc([startAngle, endAngle])}"></path>`
}
d3 = require("d3@6")
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.
