Published
Edited
Apr 16, 2020
2 stars
Insert cell
md`# Mesmerizing Spirograph

Recreated a cool visualization [found here](https://www.reddit.com/r/oddlysatisfying/comments/g0c88z/this_mesmerizing_spirograph/) on reddit.`
Insert cell
{
const duration = 1000;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const g = svg.append("g").attr("transform", "translate(300,300)");
const starsJoin = g.selectAll('path')
.data(stars)
.join("path")
.attr('class', 'star')
.attr('fill', 'none')
.attr('stroke', d => d3.interpolateRgbBasis(["red", "yellow", "green", "blue", "purple"])(d/d3.max(stars)))
.attr('d', d => star({length, d}))
.style('opacity', 0)
.transition()
// .duration(d => d*1000)
.delay(d => d*duration)
.duration(duration)
.ease(d3.easeLinear)
.style('opacity', 1)
.attrTween("stroke-dasharray", function() {
const length = this.getTotalLength();
return d3.interpolate(`0,${length}`, `${length},${length}`);
})

return svg.node();
}
Insert cell
color = d3.scaleLinear()
.domain(d3.extent(stars))
.range(["red", "green", "blue"])
.interpolate(d3.interpolateRgb.gamma(4.2))
Insert cell
stars = d3.range(21)
Insert cell
star = d3
.radialLine()
.angle(function(_,i,config) {
// debugger
return i * 2 * Math.PI / 5 * 2 + 0.0174533 * config.d * 3.428571428571429
})
.curve(d3.curveCardinalClosed)
.radius(() => 250)
Insert cell
length = 5
Insert cell
{
const length = (3 + ((now / 1500) % 8)) | 0;
const polygon = d3
.radialLine()
.angle((_, i) => (i / length) * 2 * Math.PI)
.curve(d3.curveLinearClosed)
.radius(() => 150),
path = polygon({ length });
return svg`<svg width=300 height=300>
<path d="${path}" fill="none" stroke="black" transform="translate(150,150)">
</svg>`;
}
Insert cell
(3 + ((now / 1500) % 9)) | 0
Insert cell
height = 600
Insert cell
margin = ({top: 20, right: 30, bottom: 30, left: 40})
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