Example things I like: geometry, trippy geometry, recursion, maps. 👌
Published
Edited
May 21, 2021
1 fork
1 star
{
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;
}
clamp = (x, a, b) => Math.max(a, Math.min(b, x))
function setInput(viewOfInput, value) {
viewOfInput.value = value;
viewOfInput.dispatchEvent(new Event("input"));
}
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.
