Published
Edited
May 21, 2021
1 fork
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const o = sliceOutsetFraction * r;

const s = 2 * (r + o);

const theSvg = DOM.svg(s, s);
// theSvg.style.border = "1px dotted lightgray";

const cx = s / 2;
const cy = s / 2;

const fraction = percentage / 100;
const clampedFraction = clamp(fraction, 1e-6, 1 - 1e-6);
const a = clampedFraction * 2 * Math.PI;

const largeArcSweepFlag = 0;
const sweepFlag = a >= Math.PI ? 0 : 1;

const ax = cx;
const ay = cy - r;
const bx = cx + r * Math.sin(a);
const by = cy - r * Math.cos(a);

// Offset
const ox = (o * Math.sin(a / 2)) / 2;
const oy = (o * -Math.cos(a / 2)) / 2;

// Other slice
theSvg.appendChild(svg`<path stroke="navy" fill="none" d="
M ${ax} ${ay}
A ${r} ${r}, 0, ${sweepFlag}, ${largeArcSweepFlag}, ${bx} ${by}
L ${cx} ${cy} Z"
transform="translate(${-ox}, ${-oy})
"/>`);

// Fraction slice
theSvg.appendChild(svg`<path stroke="navy" fill="navy" d="
M ${ax} ${ay}
A ${r} ${r}, 0, ${1 - sweepFlag}, ${1 - largeArcSweepFlag}, ${bx} ${by}
L ${cx} ${cy} Z"
transform="translate(${ox}, ${oy})
"/>`);

return theSvg;
}
Insert cell
Insert cell
clamp = (x, a, b) => Math.max(a, Math.min(b, x))
Insert cell
Insert cell
function setInput(viewOfInput, value) {
viewOfInput.value = value;
viewOfInput.dispatchEvent(new Event("input"));
}
Insert cell

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.
Learn more