These are my outputs from Mike Bostock’s Three Little Circles Tutorial, slightly modified so I could understand how each of these items work. This is a tutorial about selections and basic data joins.

We start with three basic SVG circles:

Now let’s select them and make them a little bigger and orange!

Now how about making them light blue and having a randomly-generated height that resets every second?

That’s cool!

Now let’s do some data joins. How about making the radius of the circle a function of a data set?

Looks like the radius is a square of the data. Go ahead and inspect the element to confirm!

You’ll notice that the function uses the name `d`

to refer to bound data.

Let’t make these purple for variety and write a linear function to space them out horizontally.

This uses a new function: The *index* of the element within its selection. The index is often useful for positioning elements sequentially. We call it `i`

by convention.