Published
Edited
Jun 20, 2021
Importers
1 star
md`# Experiment with Plottable Letters`
svg`<svg width="${width}" height="60">
<g transform="translate(3,30) scale(2)">
${letterPlotter(Object.keys(letterData).join(''))}
</g>
</svg>`
canvas = {
const context = DOM.context2d(width, 30);
context.strokeStyle = 'black'
letterPlotterCanvas(context, Object.keys(letterData).join(''), 2, 10)
return context.canvas
}
letterPlotterCanvas = (context, input, x, y) => {
const letters = input.toLowerCase().split('').map((l) => {
return letterData[l]
})
context.beginPath()
letters.forEach((letter, i) => {
const offsetX = i * 9
letter.path.map((line) => {
line.map((p, j) => {
if (j === 0) {
context.moveTo(p[0] + offsetX + x, p[1] + y)
} else {
context.lineTo(p[0] + offsetX + x, p[1] + y)
}
})
})
})
context.stroke()
}
svg`<svg width="${width}" height="30">
<g transform="translate(3,3) scale(2)">
${letterPlotter('A Quick Brown Fox jumped over a lazy dog', { color: 'red' })}
</g>
</svg>`
letterPlotter = (input, params = {}) => {
const letters = input.toLowerCase().split('').map((l) => {
return letterData[l]
})
return svg`<g>${letters.map((letter, i) => {
const d = letter.path.map((line) => {
return "M " + line.map((p) => p[0] + ' ' + p[1]).join(' L ')
}).join(' ')
const offsetX = i * 9
return svg`<g transform="translate(${offsetX},-9)"><path d="${d}" stroke="${params.color || 'black'}" fill="none" /></g>`
})}</g>`
}
a = Object.assign({
path: [
[[0,9], [0,3], [3,0], [6,3], [6,9]],
[[0,6], [6,6]]
]
})
b = Object.assign({
path: [
[[0,4], [0,0], [4,0], [5,1], [5,4]],
[[0,4], [5,4], [6,5], [6,8], [5,9], [0,9], [0,4]]
]
})
c = Object.assign({
path: [
[[6,2],[5,0],[1,0],[0,2],[0,7],[1,9],[5,9],[6,7]]
]
})
d = Object.assign({
path: [
[[0,0],[4,0],[6,2],[6,7],[4,9],[0,9],[0,0]]
]
})
e = Object.assign({
path: [
[[6,0],[0,0],[0,9],[6,9]],
[[0,5],[5,5]]
]
})
f = Object.assign({
path: [
[[6,0],[0,0],[0,9]],
[[0,5],[5,5]]
]
})
g = Object.assign({
path: [
[[6,2],[5,0],[1,0],[0,2],[0,7],[1,9],[5,9],[6,7],[6,5],[3,5]]
]
})
h = Object.assign({
path: [
[[0,0],[0,9]],
[[6,0],[6,9]],
[[0,5],[6,5]]
]
})
i = Object.assign({
path: [
[[0,0],[6,0]],
[[3,0],[3,9]],
[[0,9],[6,9]]
]
})
j = Object.assign({
path: [
[[0,0],[6,0]],
[[4,0],[4,8],[3,9],[1,9],[0,8]]
]
})
k = Object.assign({
path: [
[[0,0],[0,9]],
[[0,6],[6,0]],
[[2,4],[6,9]]
]
})
l = Object.assign({
path: [
[[0,0],[0,9],[6,9]],
]
})
m = Object.assign({
path: [
[[0,0],[0,9]],
[[0,1],[3,5],[6,1]],
[[6,0],[6,9]]
]
})
n = Object.assign({
path: [
[[0,0],[0,9]],
[[0,0.5],[6,6]],
[[6,0],[6,9]]
]
})
o = Object.assign({
path: [
[[6,2],[4,0],[2,0],[0,2],[0,7],[2,9],[4,9],[6,7],[6,2]]
]
})
p = Object.assign({
path: [
[[0,9],[0,0],[4,0],[6,2],[6,4],[4,6],[0,6]]
]
})
q = Object.assign({
path: [
[[6,2],[4,0],[2,0],[0,2],[0,7],[2,9],[4,9],[6,7],[6,2]],
[[6,9],[3,6]]
]
})
r = Object.assign({
path: [
[[0,9],[0,0],[4,0],[6,2],[6,4],[4,6],[0,6]],
[[6,9],[6,8],[4,6]]
]
})
s = Object.assign({
path: [
[[6,2],[5,0],[1,0],[0,2],[0,3],[1,4],[5,4],[6,5],[6,7],[5,9],[1,9],[0,7]]
]
})
t = Object.assign({
path: [
[[0,0],[6,0]],
[[3,0],[3,9]]
]
})
u = Object.assign({
path: [
[[0,0],[0,7],[2,9],[4,9],[6,7],[6,0]]
]
})
v = Object.assign({
path: [
[[0,0],[0,6],[3,9],[6,6],[6,0]]
]
})
w = Object.assign({
path: [
[[0,0],[0,9],[3,5],[6,9],[6,0]]
]
})
x = Object.assign({
path: [
[[0,0],[6,9]],
[[0,9],[6,0]]
]
})
y = Object.assign({
path: [
[[0,0],[0,4],[3,6],[3,9]],
[[6,0],[6,4],[3,6]]
]
})
z = Object.assign({
path: [
[[0,0],[6,0],[0,9],[6,9]],
]
})
space = Object.assign({ path: [] })
zero = Object.assign({
path: [
[[6,2],[4,0],[2,0],[0,2],[0,7],[2,9],[4,9],[6,7],[6,2]],
[[5,2],[1,7]]
]
})
dash = Object.assign({
path: [
[[1,4],[5,4]]
]
})
underscore = Object.assign({
path: [
[[0,9],[6,9]]
]
})
one = Object.assign({
path: [
[[3,9],[3,0],[1,3]],
[[0,9],[6,9]]
]
})
two = Object.assign({
path: [
[[0,2],[2,0],[4,0],[6,2],[6,4],[0,8],[0,9]],
[[0,9],[6,9]]
]
})
three = Object.assign({
path: [
[[0,2],[2,0],[4,0],[6,2],[6,3],[4,4],[6,5],[6,7],[4,9],[2,9],[0,7]],
[[1,4],[4,4]]
]
})
four = Object.assign({
path: [
[[6,6],[0,6],[0,5],[6,0],[6,9]]
]
})
five = Object.assign({
path: [
[[6,0],[0,0],[0,3],[5,3],[6,4],[6,7],[4,9],[2,9],[0,7]]
]
})
six = Object.assign({
path: [
[[0,5],[2,3],[4,3],[6,5],[6,7],[4,9],[2,9],[0,7],[0,2],[2,0],[5,0]]
]
})
seven = Object.assign({
path: [
[[0,0],[6,0],[6,3],[0,9]]
]
})
eight = Object.assign({
path: [
[[2,4],[1,3],[1,1],[2,0],[4,0],[5,1],[5,3],[4,4],[2,4],[0,6],[0,8],[1,9],[5,9],[6,8],[6,6],[4,4]]
]
})
nine = Object.assign({
path: [
//[[0,5],[2,3],[4,3],[6,5],[6,7],[4,9],[2,9],[0,7],[0,2],[2,0],[5,0]]
[[6,4],[4,6],[2,6],[0,4],[0,2],[2,0],[4,0],[6,2],[6,7],[4,9],[1,9]]
]
})
comma = Object.assign({
path: [
[[3,8], [3, 9], [2, 10]]
]
})
period = Object.assign({
path: [
[[3,8], [3, 9]]
]
})
colon = Object.assign({
path: [
[[3,3], [3,4]],
[[3,7], [3,8]]
]
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
letterData = Object.assign({
a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z,
' ': space,
'-': dash,
'_': underscore,
',': comma,
'.': period,
':': colon,
0: zero,
1: one,
2: two,
3: three,
4: four,
5: five,
6: six,
7: seven,
8: eight,
9: nine,
})
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.
