Animating (dashed) lines and paths with d3.js & spirographs

Mon, 25 Jan 2016 00:00:00 +0000

In this blog I’ll explain how to animate both solid and dashed lines. To make things slightly less boring, I’ve created a spirograph drawing app for the examples. It came about because last week I wanted to animate a dashed line in a chart. Trying to use the technique I always apply for solid animated lines I suddenly found out that animating a dashed line isn’t trivial. It’s because of the fact that an animated solid line is, secretly, a dashed line, but I’ll go into that later.

Placing text on arcs with d3.js

Wed, 30 Sep 2015 00:00:00 +0000

In this tutorial I want to go into something I’ve learned while creating a personal project called A Closer Look into the Division of Occupations & Age: how to place SVG text on arcs or paths. And how to combine this with d3’s existing donut-chart-like layouts.

Donut Chart on Visual Cinnamon

Animating (dashed) lines and paths with d3.js & spirographs

Placing text on arcs with d3.js