Principal Web Developer at Freedom of the Press Foundation
Published
Edited
Feb 6, 2021
10 stars
numberToCistercian(5420)
html`<svg class="cistercian" width="108" height="64" viewbox="-1 -1 54 32">
${numberToCistercianSvg(1940)}
<g transform="translate(31 0)">
${numberToCistercianSvg(3021)}
</g>
</svg>`
FIVE = ONE + FOUR
SEVEN = ONE + SIX
EIGHT = TWO + SIX
NINE = ONE + TWO + SIX
ONES = ['', ONE, TWO, THREE, FOUR, FIVE, SIX, SEVEN, EIGHT, NINE]
TENS = ONES.map(s => `<g transform-origin="${CHARACTER_WIDTH / 2} ${CHARACTER_HEIGHT / 2}" style="transform: scale(-1, 1)">${s}</g>`)
HUNDREDS = ONES.map(s => `<g transform-origin="${CHARACTER_WIDTH / 2} ${CHARACTER_HEIGHT / 2}" style="transform: scale(1, -1)">${s}</g>`)
THOUSANDS = ONES.map(s => `<g transform-origin="${CHARACTER_WIDTH / 2} ${CHARACTER_HEIGHT / 2}" style="transform: scale(-1, -1)">${s}</g>`)
COLUMNS = [ONES, TENS, HUNDREDS, THOUSANDS]
COLUMNS[0][1]
numberToCistercian = n => {
return html`
<svg
height=${CHARACTER_HEIGHT * 2 + 2}
width=${CHARACTER_WIDTH * 2 + 2}
viewbox="-1 -1 ${CHARACTER_WIDTH + 2} ${CHARACTER_HEIGHT + 2}"
class="cistercian"
>
${numberToCistercianSvg(n)}
</svi>
`
}
numberToCistercianSvg = n => {
if (n > 9999) throw('Number cannot be larger than 9999')
const stringInt = n.toString()
const digits = Array.from(stringInt)
return svg`
${ZERO}
${digits.reverse().map((d, i) => COLUMNS[i][+d])}
`
}
numberToCistercian(1993)
LAYOUT = ({
gutter: 20,
margin: 20,
})
DIMENSIONS = ({
width: LAYOUT.margin * 2 + 9 * CHARACTER_WIDTH + 8 * LAYOUT.gutter,
height: LAYOUT.margin * 2 + 5 * CHARACTER_HEIGHT + 7 * LAYOUT.gutter,
})
html`
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');
.cistercian line {
stroke: #000;
stroke-linecap: round;
}
.cistercian text {
fill: #000;
font-weight: 500;
font-family: Raleway, var(--sans-serif), sans-serif;
}
.cistercian--white line {
stroke: #FFF;
stroke-width: 2px;
stroke-linecap: round;
}
.cistercian--white text {
fill: #FFF;
}
</style>
`
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.
