Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter2/function-chain.html

Let's see how function chain can be used to produce concise and readable code that produces dynamic visual content.

<script type="text/javascript">
  var body = d3.select("body"); // <-- A

  body.append("section") // <-- B
      .attr("id", "section1") // <-- C
    .append("div") // <-- D
      .attr("class", "blue box") // <-- E
    .append("p") // <-- F
      .text("dynamic blue box"); // <-- G

  body.append("section")
      .attr("id", "section2")
    .append("div")
      .attr("class", "red box")
    .append("p")
      .text("dynamic red box");
</script>

This code generates the following visual output (similar to what we saw in the previous chapter):

Function chain

Despite the visual similarity to the previous example, the construction process of the DOM elements is significantly different in this example. As demonstrated by the code example there is no static HTML element on the page contrary to the previous recipe where both the section and div elements existed.

Let's examine closely how these elements were dynamically created. On line A, a general selection was made to the top level body element. The body selection result was cached using a local variable called body. Then at line B, a new element section was appended to the body. Remember that the append function returns a new selection that contains the newly appended element therefore on line C the id attribute can then be set on a newly created section element to section1. Afterwards on line D a new div element was created and appended to #section1 with its CSS class set to blue box on line E. Next step, similarly on line F a paragraph element was appended to the div element with its textual content set to dynamic blue box on line G.

As illustrated by this example, this chaining process can continue to create any structure of arbitrary complexity. As a matter of fact, this is how typically D3 based data visualization structure was created. Many visualization projects simply contain only a HTML skeleton while relying on D3 to create the rest. Getting comfortable with this way of function chaining is critical if you want to become efficient with the D3 library.