Published
Edited
Oct 2, 2020
Importers
8 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
paths = {
const text = await FileAttachment("emoji_u1f408_simplified.svg").text();
const document = new DOMParser().parseFromString(text, "image/svg+xml");
const svg = d3.select(document.documentElement).remove();
const points = [];
svg.selectAll("path").each(function() {
points.push(findPoints(this));
});
return points;
}
Insert cell
findPoints = path => {
const gap = 2;
const totalLength = path.getTotalLength();
const numberOfDots = Math.floor(totalLength / gap);
return d3.range(numberOfDots).map(i => {
const point = path.getPointAtLength(totalLength * (i / numberOfDots));
return { x: point.x, y: point.y };
});
}
Insert cell
coloredPoints = paths.map(path =>
path.map((p, i) => ({
...p,
color: d3.interpolateRainbow(((i + now / 100) % path.length) / path.length)
}))
)
Insert cell
d3 = require("d3@6")
Insert cell
imageWidth = 128
Insert cell
imageHeight = 128
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