Enter

The enter function is a part of every basic D3 visualization. It allows the developer to define a starting point with attached data. The enter function can be thought of as a section of code that executes when data is applied to the visualization for the first time. Typically, the enter section will follow the selection of a DOM element. Let's walk through an example (http://localhost:8080/chapter-3/example-2.html):

var svg = d3.select("body")
    .append("svg")
    .attr("width", 200)
    .attr("height", 200);

Create the SVG container as we did earlier:

svg.selectAll('rect').data([1,2]).enter()

The data function is the way we bind data to our selection. In this example, we are binding a very simple array, [1,2], to the selection <rect>. The enter function will loop through the [1,2] array and apply the subsequent function calls, as shown in the following code:

.append('rect')
.attr('x', function(d){ return d*20; })
.attr('y', function(d){ return d*50; })

As we loop through each element...