Usually when we join data and HTML elements with the .data() function, they are linked by index, meaning that the nth element is joined with the nth data-item.
Often we don't want elements to be joined by their index, but we want the same element to be joined to the same data item, no matter what happened to the data. This has efficiency advantages and also helps create beautiful animations.
To achieve that we can give the .data() function an additional anonymous function, called the key function, as argument, specifying by what criterion the HTML elements and data item should be joined.
Letting the key function return the data item itself, or one of its attributes that uniquely identifies it, allows us to make the joins exactly as stated above.
svg.selectAll("circle")
.data(data, function(d) { return d; });