Before we wrap up, let’s take a second to analyze the chaining syntax that is a D3 signature.

In the previous exercise, we referenced the following code:

let dataset = [55,34,23,22,59];

d3.select("body")
 .selectAll("div")
   .data(dataset)
   .enter()
 .append("div")
   .text("Some text");

At first, this style may just seem like one big chain! But the key takeaway is that the methods that precede others in the chain return what is needed for the next step in the chain. By chaining, you can save some lines of code in your program.

You’ll see that the d3 community will indent some parts of the chains with four spaces, and other parts of the chain with two. The lines with two spaces indicate that the selection has changed:

var h1 = d3.selectAll("section")
    .style("background", "steelblue")
  .append("h1")
    .text("Hello!");