Function chaining

As we have seen so far, the D3 API is completely designed around the idea of function chaining. Therefore it almost forms a Domain Specific Language (DSL) for building HTML/SVG elements dynamically. In this code example, we will take a look at how the entire body structure of the previous example can be constructed using D3 alone.

Note

If DSL is a new concept for you, I highly recommend checking out this excellent explanation on DSL by Martin Fowler in the form of an excerpt from his book Domain-Specific Languages. The excerpt can be found at http://www.informit.com/articles/article.aspx?p=1592379.

Getting ready

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

How to do it...

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...