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:

 height="50px" width="250px">    cx="40" cy="20" r="10">    cx="80" cy="20" r="10">    cx="120" cy="20" r="10"> 

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

var circle = d3.selectAll("svg#orange circle") 	.style("fill", "darkorange") 	.attr("r", 20);

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

function jump(){ var circle = d3.selectAll("svg#random-height circle") 	.style("fill", "lightblue") 	.attr("cy", function() { return Math.random() * 150 + 10;}); } jump(); setInterval(jump, 1000);

That’s cool!

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

var circle = d3.selectAll("svg#data-radius circle") 	.data([2, 3, 4]) 	.attr("r", function(d){ return d*d; });

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.

var circle = d3.selectAll("svg#data-cx circle") 	.style("fill","purple") 	.data([2, 3, 4]) 	.attr("cx", function(d,i){ return i*100 + 70});

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.