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?
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.
See more of my D3.js work