Question

I’m using this tutorial to learn some basic d3.

I’m at the “binding data” section, which is so far proving quite confusing.

var dataset = [],
    i = 0;

for(i=0; i<5; i++){
    dataset.push(Math.round(Math.random()*100));
}        

alert("Data: " + dataset)

var sampleSVG = d3.select("#viz")
    .append("svg:svg")
    .attr("width", 400)
    .attr("height", 75);    

sampleSVG.selectAll("rect")
    .data(dataset)
    .enter().append("svg:rect")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("height", 40)
    .attr("width", 75)
    .attr("x", function(d, i){return i*80})
    .attr("y", 20);

My questions are:

1. We have created a dataset of 5 random numbers. Why are these not reflected in the widths of the rectangles?
2. .append("svg:svg") doesn’t refer to any rectangles, so how can we selectAll("rect") afterwards if they don’t even exist?
3. In the anonymous function, what does d refer to?
4. In the anonymous function, what does i refer to? What is it multiplying by 80?
5. Does it automatically loop through all points in the dataset? In the final code chunk, there doesn’t seem to be any iteration, so I’m guessing it just does this for every data element?

So confused!

Answer 1

1. Because the width of the rectangle is fixed at 75 and the random numbers aren’t used.
2. append(“svg:rect”) creates the rectangles
3. d refers to the dataset, these would be the random numbers.
4. i is the index of the dataset item so 0 for the first item, 1 for the second and so on up to 4 as there are 5 items in the dataset
5. yes, you guessed right.