An Interactive Scatter Plot

Getting started with D3.js

All images by author

D3 is great for creating interactive online data visualisations. It allows us to bind data to SVG elements (scalable vector graphics), then update and animate the SVGs when the data changes, or after user interactions.

Let’s start with the SVG markup for a circle element. The cx and cy attributes give the centre coordinates and r sets the radius.

Simple, but not too exciting yet. Time for D3 to step in with a little transition…

The GIF above makes the animation look terribly jerky. But click “Run Pen” in the CodePen below and you’ll see that the animations look much nicer when rendered…