Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

A guest post by Roland Dunn, a partner at Refined Practice, currently working on D3-based visualization tools, among other things. You can find him on Twitter at @roland_dunn, and at

In Part 1 of this series we covered the data and the model in D3.js, including the and the general code pattern used in d3.cloudshapes.patternData. We also looked at the Using AttrTween, Transitions and MV* in Reusable D3 Demo Gist demo that I created. In this post, we’ll dive deeper into the D3.js used in our demo, starting off with the View, and then covering the Controller and Process.


Remembering that we ended up with the structure below, the next thing to look at is the d3.cloudshapes.patternManager component (where we really start using D3):


The main body of the JavaScript code (which here really acts as the controller) only creates one instance of the d3.cloudshapes.patternManager:

Here, the code calls once per iteration of the central transitions (which moves the circle and text):

You might wonder why there’s only one instance of a component created (d3.cloudshapes.patternManager), but three instances of a module (d3.cloudshapes.patternData). I could have created a d3.cloudshapes.pattern visual component and three separate instances (one for each pattern), but then each d3.cloudshapes.pattern instance would really have only called on the main g class, and not d3.selectAll. This would really miss out on the power of D3.

If you think about it, a barchart component is really a rectangle manager, and a linechart component is a line manager. So in the context of this example, it makes sense to create a pattern manager component:

The component consists of a set of private variables, and an internal function (exports) that provides access to those private variables and provides public functions to act on those private variables. This use of closures is pretty dense, and one of the most surreal pieces of code I’ve ever come across, so I’m not going to go into more about that right now. You can find more information, however, in Mike Bostock’s article on reusable D3 and also more in Developing a D3.js Edge. If you really want to understand closures, check this out: .

The constructor of the exports function contains the enter(), update() and exit() code. In this snippet below (showing the enter() code for the path elements), you can see the get_pattern_points function I referred to earlier being used to create a path SVG element:

And it’s in this part of the code, the constructor of the exports function, that we can see the code that waits for the enter/update/exit functions to complete (below is the code that waits for the update to complete):

In the above update code, at the end of the update transition, the code calls exports.enter_update_exit_transactionComplete() (see below):

This function counts the number of calls that it has has received. If it is equal to the number of elements in the data that is passed to the d3.cloudshapes.patternManager (in this case the data is live_data, so the count will be either two or three), the code dispatches the all_enter_update_exit_TransitionsComplete event. The main code deals with such an event by then calling exports.transition() of the d3.cloudshapes.patternManager instance (see below), and thereby kicking off the central transitions (where the circle & text follow the path):

You can see that at the end of the exports.transition, when the central transition (which uses the attrTween functionality) is complete, the code dispatches the transitionComplete event – which the main JavaScript code (the controller in this case) processes, and which I discuss again below.

The use of attrTween in exports.transition is pretty similar to the use in Mike Bostock’s Point-Along-Path Interpolation, so I won’t cover that in any more detail here.

Controller and Process

The diagram below gives an overview of the flow of the code, including the flow of the events:


At the heart of the code process (all code in this article is up on Github as a Gist, and viewable at is the following loop:

  • patternManager dispatches the allTransitionsComplete event once the central transitions (which move the circle and text) of all the g.pattern.g.inner elements are complete
  • The main body of the code traps the allTransitionsComplete event, and subsequently dispatches patternManagerTransitionComplete to itself (just to make completely sure we’re not amending anything to do with the patternManager from within any calls to the patternManager)
  • On receiving the patternManagerTransitionComplete event, the code fiddles with live_data. It makes sure it contains a full copy of cached data and decides whether to delete an element from live_data and if so, which element. For all of the remaining instances of patternData left referenced by live_data, the code randomly changes various elements, e.g. transition ease, transition duration, colors of path, text and circle, and more
  • Code calls the patternManager instance with the update live_data
  • The patternManager instance runs through the enter/update/exit code. On completion of all enter/update/exit transitions, the patternManager dispatches the snappily titled all_enter_update_exit_TransitionsComplete event
  • The main body of code traps the all_enter_update_exit_TransitionsComplete event, and calls patternManager.transition()
  • On completion of the central transitions, the patternManager instance dispatches the allTransitionsComplete event and the loop kicks off again


There are a couple of things I’ve not gone into a lot of detail on. For example, I didn’t detail how to vary the transition ease, but I’d be happy to provide more information on this and anything else if required. Just contact me via See below for D3.js resources that can be found in Safari Books Online.

Safari Books Online has the content you need

Getting Started with D3 teaches you how to create beautiful, interactive, browser-based data visualizations with the D3 JavaScript library. This hands-on book shows you how to use a combination of JavaScript and SVG to build everything from simple bar charts to complex infographics. You’ll learn how to use basic D3 tools by building visualizations based on real data from the New York Metropolitan Transit Authority.
Developing a D3.js Edge is aimed at intermediate developers, so to get the most from this book you need to know some JavaScript, and you should have experience creating graphics using D3. Many examples created in the real world with D3, can best be described as “spaghetti code.” So, if you are interested in using D3 in a reusable and modular way, which is of course in line with modern development practices, then this book is for you!
Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript provides readers with a strong framework of principles for making well-conceived and well-crafted infographics, as well as detailed and practical instructions for how to really wield D3, the best tool for making web infographics available. An extended example is used in the book to explain how to put theory to practical use.

About the author Roland is a partner at Refined Practice, currently working on their D3
based visualization tool, among other things. You can find him on Twitter at @roland_dunn, and at, where he does daft visualizations such as A #D3.js Visualization of Senior UK Government Cabinet Ministers and Reusable D3 With The Queen, Prince Charles, a Corgi and Pie Charts.

Tags: AttrTween, D3.js, Github, MV*, Reusable D3, Transitions,

Comments are closed.