CUFP 2014 Tutorial Reusable Charts Pattern

Wiki ▸ [CUFP 2014 Tutorial](CUFP 2014 Tutorial) ▸ Reusable Charts Pattern

The goal of D3.js is offer an alternative to imperative models of DOM manipulation, and by extension front-end development. Rather than specifying the incremental modifications that should be applied to a document, D3.js allows you to write code that describes what your document should look like based on the data of your application. In this sense it is a library that promotes a declarative style. Yet out of the box it lacks certain compositional properties.

This section of the tutorial will introduce a simplified version of the "reusable charts" pattern that the D3.js community uses to promote the reuse of code. The pattern will then be pushed down all the way to the level individual operations, which will imbue the library with much nicer compositional properties and become the basis of the elm-d3 bindings.

Delaying Execution

Consider the following code:

d3.selectAll('div')
    .attr('class', 'container');

While this code does do something useful, it has a few undesirable properties that prevent it from being reusable. First and foremost, if this code is included in a top-level JavaScript application, it will execute immediately, leaving you no opportunity to programmatically manipulate it further. This issue can easily be solved by wrapping the code in a function that returns the result of the expression:

var div_op1 = function() {
  return d3.selectAll('div')
      .attr('class', 'container')
}

Generalizing the Context

var div_op2 = function(selection) {
  return selection.selectAll('div')
      .attr('class', 'container');
}

# selection.call(function)

Apply the provided function to the selection. This is equivalent to function(selection).

Exercises

XXX

Additional Reading

• Towards Reusable Charts