Published
Edited
Mar 11, 2021
6 stars
Insert cell
Insert cell
chart = {
const height = 200;
const width = 200
const svg = d3.create("svg")
.attr("viewBox", [-10, -10, 80, 60])
.style("max-width", "640px");
const path = svg.append("path").attr("fill-rule", "evenodd");
yield svg.node();
for (let i = 0, n = pathStrings.length; true; i = (i + 1) % n) {
await path.transition().duration(1500).attrTween("d", function() {
const
[outline0, counter0] = pathStrings[i],
[outline1, counter1] = pathStrings[(i + 1) % n],
outline = flubber.interpolate(outline0, outline1, {maxSegmentLength: 0.1}),
counter = flubber.interpolate(counter0, counter1, {maxSegmentLength: 0.1});
return t => outline(t) + counter(t);
}).end();
}
}
Insert cell
pathStrings = [
hieroglyphs,
phonecian,
archaicGreek,
etruscan,
latin
]
Insert cell
etruscan = [
`M26.8,28.7
c0.1-8-0.1-16,0.1-24.1C27-0.3,25.4-0.9,21,1
C8.6,6.4,2.6,16.3,0.3,29.1c-0.3,1.5-1,3.6,1.3,4.1
c2.7,0.6,3.1-1.6,3.5-3.5c1-4,1.4-8.1,4.3-12.2
c3.8,4.7,7.5,9.1,11.2,13.6c1.3,1.6,2.8,2.9,4.9,2
C27.7,32.2,26.8,30.2,26.8,28.7z`,
`M21.7,24.1
C10.2,12,10.3,11.4,21.7,6.9C21.7,12.4,21.7,17.8,21.7,24.1z`
]
Insert cell
hieroglyphs = ["M36.8,9.8c-0.1-1.8-2.1-2.3-3-2c-1.1,0.4-3.3,2.6-3.8,2.9c-0.9-0.1-1.5-0.5-2-1.6c0.1-0.9,0.9-1.7,1.2-2.5c0.6-1.6,2.6-3.8,0.6-4.8c-2.4-1.5-4.5,2.5-6.4,4.4c-2.5,2.5-4.8,2.3-7.5,0.6C12.5,4.5,9.70.4,5.6,0C1.5,0.5,4.9,5.8,6.5,7.9c2.2,3,2,5.6,0.6,8.6C6.5,17.8-0.2,29.8,0,31.7c0.3,2.9,2.6,3.4,4.9,3.8c3.6,0,7.2,0,10.8,0c3.9,0,8.1,1.3,11.8,0c1.7-0.6,1.9-2.5,2.3-4.2c1-4.4,1.3-13.3,1.3-13.3C32.2,16.3,36.9,10.8,36.8,9.8z M6.2,5.1c0,0-0.1-0.1-0.1-0.1c0.1,0,0.1,0,0.2,0C6.2,4.9,6.2,5,6.2,5.1z",
"M27.8,24.8c0-0.4,0.2,0.1-0.5,0.8c-3.4,3.8-8.4,5.3-13.7,5.6c-2.3,0.1-4.6-0.6-6.8,0.3c-0.1,0.1-1.1,0.3-0.8-0.7c1.1-2.3,0.8-4.8,1.4-7.2c0.4-1.7,0.3-2.7,2.9-2.8c1.6,0,0.2,3.8,2.7,3.4c2.3-0.4,3.9-2.3,3.3-4.7c-0.9-3.6,0.8-3.6,3.3-2.9c1.3,0.3,2.5,0.5,3.7-0.3c0,0,0.1,0.1,0.1,0.1c0.3,2.5,4.3,5.5,4.1,6.5"
]
Insert cell
Insert cell
Insert cell
phonecian = [
`M32.1,27.3
c-2.5-1.3-5-2.7-7.6-3.7c-3.4-1.3-4.4-3.3-4.5-7
c-0.2-5,1-8.2,6.1-9.5c1.9-0.5,3.6-1.6,5.4-2.5
C32.7,4,33.9,3.5,33,1.7C32.1,0,31.2,0.3,29.8,1
c-3.1,1.4-5.9,3.4-8.4,3.9c-2.7-1.3,0.6-4.7-2.9-4.8
c-4-0.2-2,3.1-2.1,4.8c-0.1,2.2-1,3.2-2.8,4
C9.2,10.9,4.9,13,0,15.4c4.3,2.2,7.9,4.3,11.7,5.8
c3.6,1.4,5.4,3.4,4.7,7.4c-0.2,1.3-0.7,3.1,1.8,3.2
c2.6,0.1,1.8-1.7,1.9-3c0.1-0.8,0-1.6,0-3.2
c3.9,2,7.2,3.5,10.4,5.2c1.5,0.8,2.4,0.3,3.1-1.1
C34.6,27.9,33,27.8,32.1,27.3z`,
`M16.1,18.9
c-2.8-0.5-4.8-2-7.4-3.5c2.6-1.2,4.8-2.3,7.3-3.5
C16.5,14.5,16.5,16.6,16.1,18.9z`
]
Insert cell
latin = [
`M19.1,2.2
C18.5,0.4,17.5,0,15.9,0c-1.9,0-3.3,0.1-4.2,2.4
C7.9,12.9,3.9,23.2,0,33.6c4.9,0.8,4.9,0.8,6.5-3.5
c2.3-6.2,2.3-6.2,8.7-6.2c6.4,0,6.7-0.1,8.4,6
c1,3.9,2.9,4.9,6.9,3.8C26.6,23,22.8,12.6,19.1,2.2z`,
`M17.9,20
c-8,0.6-7.9,0.6-5.3-6.7c0.8-2.2,1.6-4.3,2.7-7.3
c1.5,4.5,2.8,8.1,4.1,11.8C19.9,19.3,19.7,19.8,17.9,20z`
]
Insert cell
flubber = require("flubber@0.4")
Insert cell
d3 = require("d3@5")
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.
Learn more