Platform
Resources
Pricing
Sign in
Get started
Tony Chu
Workspace
Fork
Published
By
Tony Chu
Edited
Jun 20, 2021
Importers
1 star
Insert cell
md
`# Experiment with Plottable Letters`
Insert cell
svg
`<svg width="${
width
}" height="60">
<g transform="translate(3,30) scale(2)">
${
letterPlotter
(
Object
.
keys
(
letterData
)
.
join
(
''
)
)
}
</g>
</svg>`
Insert cell
canvas
=
{
const
context
=
DOM
.
context2d
(
width
,
30
)
;
context
.
strokeStyle
=
'black'
letterPlotterCanvas
(
context
,
Object
.
keys
(
letterData
)
.
join
(
''
)
,
2
,
10
)
return
context
.
canvas
}
Insert cell
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
(
)
}
Insert cell
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>`
Insert cell
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>`
}
Insert cell
a
=
Object
.
assign
(
{
path
:
[
[
[
0
,
9
]
,
[
0
,
3
]
,
[
3
,
0
]
,
[
6
,
3
]
,
[
6
,
9
]
]
,
[
[
0
,
6
]
,
[
6
,
6
]
]
]
}
)
Insert cell
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
]
]
]
}
)
Insert cell
c
=
Object
.
assign
(
{
path
:
[
[
[
6
,
2
]
,
[
5
,
0
]
,
[
1
,
0
]
,
[
0
,
2
]
,
[
0
,
7
]
,
[
1
,
9
]
,
[
5
,
9
]
,
[
6
,
7
]
]
]
}
)
Insert cell
d
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
4
,
0
]
,
[
6
,
2
]
,
[
6
,
7
]
,
[
4
,
9
]
,
[
0
,
9
]
,
[
0
,
0
]
]
]
}
)
Insert cell
e
=
Object
.
assign
(
{
path
:
[
[
[
6
,
0
]
,
[
0
,
0
]
,
[
0
,
9
]
,
[
6
,
9
]
]
,
[
[
0
,
5
]
,
[
5
,
5
]
]
]
}
)
Insert cell
f
=
Object
.
assign
(
{
path
:
[
[
[
6
,
0
]
,
[
0
,
0
]
,
[
0
,
9
]
]
,
[
[
0
,
5
]
,
[
5
,
5
]
]
]
}
)
Insert cell
g
=
Object
.
assign
(
{
path
:
[
[
[
6
,
2
]
,
[
5
,
0
]
,
[
1
,
0
]
,
[
0
,
2
]
,
[
0
,
7
]
,
[
1
,
9
]
,
[
5
,
9
]
,
[
6
,
7
]
,
[
6
,
5
]
,
[
3
,
5
]
]
]
}
)
Insert cell
h
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
0
,
9
]
]
,
[
[
6
,
0
]
,
[
6
,
9
]
]
,
[
[
0
,
5
]
,
[
6
,
5
]
]
]
}
)
Insert cell
i
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
6
,
0
]
]
,
[
[
3
,
0
]
,
[
3
,
9
]
]
,
[
[
0
,
9
]
,
[
6
,
9
]
]
]
}
)
Insert cell
j
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
6
,
0
]
]
,
[
[
4
,
0
]
,
[
4
,
8
]
,
[
3
,
9
]
,
[
1
,
9
]
,
[
0
,
8
]
]
]
}
)
Insert cell
k
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
0
,
9
]
]
,
[
[
0
,
6
]
,
[
6
,
0
]
]
,
[
[
2
,
4
]
,
[
6
,
9
]
]
]
}
)
Insert cell
l
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
0
,
9
]
,
[
6
,
9
]
]
,
]
}
)
Insert cell
m
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
0
,
9
]
]
,
[
[
0
,
1
]
,
[
3
,
5
]
,
[
6
,
1
]
]
,
[
[
6
,
0
]
,
[
6
,
9
]
]
]
}
)
Insert cell
n
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
0
,
9
]
]
,
[
[
0
,
0.5
]
,
[
6
,
6
]
]
,
[
[
6
,
0
]
,
[
6
,
9
]
]
]
}
)
Insert cell
o
=
Object
.
assign
(
{
path
:
[
[
[
6
,
2
]
,
[
4
,
0
]
,
[
2
,
0
]
,
[
0
,
2
]
,
[
0
,
7
]
,
[
2
,
9
]
,
[
4
,
9
]
,
[
6
,
7
]
,
[
6
,
2
]
]
]
}
)
Insert cell
p
=
Object
.
assign
(
{
path
:
[
[
[
0
,
9
]
,
[
0
,
0
]
,
[
4
,
0
]
,
[
6
,
2
]
,
[
6
,
4
]
,
[
4
,
6
]
,
[
0
,
6
]
]
]
}
)
Insert cell
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
]
]
]
}
)
Insert cell
r
=
Object
.
assign
(
{
path
:
[
[
[
0
,
9
]
,
[
0
,
0
]
,
[
4
,
0
]
,
[
6
,
2
]
,
[
6
,
4
]
,
[
4
,
6
]
,
[
0
,
6
]
]
,
[
[
6
,
9
]
,
[
6
,
8
]
,
[
4
,
6
]
]
]
}
)
Insert cell
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
]
]
]
}
)
Insert cell
t
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
6
,
0
]
]
,
[
[
3
,
0
]
,
[
3
,
9
]
]
]
}
)
Insert cell
u
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
0
,
7
]
,
[
2
,
9
]
,
[
4
,
9
]
,
[
6
,
7
]
,
[
6
,
0
]
]
]
}
)
Insert cell
v
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
0
,
6
]
,
[
3
,
9
]
,
[
6
,
6
]
,
[
6
,
0
]
]
]
}
)
Insert cell
w
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
0
,
9
]
,
[
3
,
5
]
,
[
6
,
9
]
,
[
6
,
0
]
]
]
}
)
Insert cell
x
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
6
,
9
]
]
,
[
[
0
,
9
]
,
[
6
,
0
]
]
]
}
)
Insert cell
y
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
0
,
4
]
,
[
3
,
6
]
,
[
3
,
9
]
]
,
[
[
6
,
0
]
,
[
6
,
4
]
,
[
3
,
6
]
]
]
}
)
Insert cell
z
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
6
,
0
]
,
[
0
,
9
]
,
[
6
,
9
]
]
,
]
}
)
Insert cell
space
=
Object
.
assign
(
{
path
:
[
]
}
)
Insert cell
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
]
]
]
}
)
Insert cell
dash
=
Object
.
assign
(
{
path
:
[
[
[
1
,
4
]
,
[
5
,
4
]
]
]
}
)
Insert cell
underscore
=
Object
.
assign
(
{
path
:
[
[
[
0
,
9
]
,
[
6
,
9
]
]
]
}
)
Insert cell
one
=
Object
.
assign
(
{
path
:
[
[
[
3
,
9
]
,
[
3
,
0
]
,
[
1
,
3
]
]
,
[
[
0
,
9
]
,
[
6
,
9
]
]
]
}
)
Insert cell
two
=
Object
.
assign
(
{
path
:
[
[
[
0
,
2
]
,
[
2
,
0
]
,
[
4
,
0
]
,
[
6
,
2
]
,
[
6
,
4
]
,
[
0
,
8
]
,
[
0
,
9
]
]
,
[
[
0
,
9
]
,
[
6
,
9
]
]
]
}
)
Insert cell
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
]
]
]
}
)
Insert cell
four
=
Object
.
assign
(
{
path
:
[
[
[
6
,
6
]
,
[
0
,
6
]
,
[
0
,
5
]
,
[
6
,
0
]
,
[
6
,
9
]
]
]
}
)
Insert cell
five
=
Object
.
assign
(
{
path
:
[
[
[
6
,
0
]
,
[
0
,
0
]
,
[
0
,
3
]
,
[
5
,
3
]
,
[
6
,
4
]
,
[
6
,
7
]
,
[
4
,
9
]
,
[
2
,
9
]
,
[
0
,
7
]
]
]
}
)
Insert cell
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
]
]
]
}
)
Insert cell
seven
=
Object
.
assign
(
{
path
:
[
[
[
0
,
0
]
,
[
6
,
0
]
,
[
6
,
3
]
,
[
0
,
9
]
]
]
}
)
Insert cell
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
]
]
]
}
)
Insert cell
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
]
]
]
}
)
Insert cell
comma
=
Object
.
assign
(
{
path
:
[
[
[
3
,
8
]
,
[
3
,
9
]
,
[
2
,
10
]
]
]
}
)
Insert cell
period
=
Object
.
assign
(
{
path
:
[
[
[
3
,
8
]
,
[
3
,
9
]
]
]
}
)
Insert cell
colon
=
Object
.
assign
(
{
path
:
[
[
[
3
,
3
]
,
[
3
,
4
]
]
,
[
[
3
,
7
]
,
[
3
,
8
]
]
]
}
)
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Insert cell
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
,
}
)
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.
Try it for free
Learn more
Fork
View
Export
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
canvas
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
letterPlotterCanvas
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
letterPlotter
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
a
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
b
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
c
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
e
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
f
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
g
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
h
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
i
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
j
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
k
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
l
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
m
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
n
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
o
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
p
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
q
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
r
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
s
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
t
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
u
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
v
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
w
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
x
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
y
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
z
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
space
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
zero
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dash
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
underscore
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
one
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
two
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
three
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
four
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
five
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
six
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
seven
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
eight
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
nine
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
comma
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
period
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
colon
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
letterData
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML