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:
<svg height="50px" width="250px">
<circle cx="40" cy="20" r="10"></circle>
<circle cx="80" cy="20" r="10"></circle>
<circle cx="120" cy="20" r="10"></circle>
</svg>
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.