Engineer at Mapbox, creator of Leaflet, algorithms geek, open source enthusiast, musician, father of twin girls, Ukrainian. 🇺🇦
chart([
{value: 70, color: 'salmon'},
{value: 150, color: 'deepskyblue'},
{value: 300, color: 'orange'},
{value: 600, color: 'limegreen'}
], 120, 60)
chart = (data, r, r0 = 0) => {
const offsets = [];
let total = 0;
for (const {value} of data) {
offsets.push(total);
total += value;
}
const w = r * 2;
return svg`<svg width="${w}" height="${w}" viewbox="0 0 ${w} ${w}" text-anchor="middle" dominant-baseline="central" style="font: 24px sans-serif">
${data.map(({value, color}, i) => segment(offsets[i] / total, (offsets[i] + value) / total, r, r0, color))}
<circle cx="${r}" cy="${r}" r="${r0}" fill="white" />
<text transform="translate(${r}, ${r})">${total.toLocaleString()}</text>
</svg>`;
}
segment = (start, end, r, r0, color) => {
const a0 = 2 * Math.PI * (start - 0.25);
const a1 = 2 * Math.PI * (end - 0.25);
const x0 = Math.cos(a0), y0 = Math.sin(a0);
const x1 = Math.cos(a1), y1 = Math.sin(a1);
const largeArc = end - start > 0.5 ? 1 : 0;
return `<path d="
M ${r + r0 * x0} ${r + r0 * y0}
L ${r + r * x0} ${r + r * y0}
A ${r} ${r} 0 ${largeArc} 1 ${r + r * x1} ${r + r * y1}
L ${r + r0 * x1} ${r + r0 * y1}
A ${r0} ${r0} 0 ${largeArc} 0 ${r + r0 * x0} ${r + r0 * y0}
" fill="${color}" stroke="white" stroke-width="2" />`;
}
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.
