Published
Edited
Feb 9, 2021
4 stars
plot_numeral(n)
plot_numeral = (number) => svg`
<svg width="${size * 2 + lineWeight}" height="${size * 2 + spacing + lineWeight}">
<g ${linestyle} transform="translate(${size + lineWeight/2},${lineWeight/2})">
<path d="M${top}L${bottom}" />
${digits(number).map((digit, index) => `<path ${glyphs[digit]} ${transforms[index]} />`)}
</g>
</svg>`
// Zero-pads the input number to a fixed four digits
digits = number => Array.from(("0000" + number.toFixed()).slice(-4), Number)
transforms = [
[-1, -1, bottom], // X000 -> bottom left
[ 1, -1, bottom], // 0X00 -> bottom right
[-1, 1, top], // 00X0 -> top left
[ 1, 1, top] // 000X -> top right
].map(([xs, ys, pos]) => `transform="translate(${pos}) scale(${xs},${ys})"`)
glyphs = {
var nw = '0,0',
ne = `${size},0`,
sw = `0,${size}`,
se = `${size},${size}`;
return [
[nw], // 0 (no line)
[nw, ne], // 1
[sw, se], // 2
[nw, se], // 3
[ne, sw], // 4
[nw, ne, sw], // 5
[ne, se], // 6
[nw, ne, se], // 7
[ne, se, sw], // 8
[nw, ne, se, sw] // 9
].map(corners => `d="M${corners.join('L')}"`);
}
top = `0,0`
bottom = `0,${2 * size + spacing}`
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.
