• Open in:

Chord Diagram with Animated Bullets

Animations help direct viewer’s attention and, in the case of the directed chord diagram, emphasize the direction of the data flow.

Key implementation details

Bullets have locationX and locationY properties which indicate relative position of the bullet within the target element (accepted values are between 0 and 1). So, all we need to do is add a bullet to each data item and animate its locationY value from 0 to 1 in a loop.

Related tutorials

Demo source