a d3.js design pattern
organize your code in a way that doesn’t pollute and exposes only what is necessary
Larger interactive d3 programs can be difficult to organize. After all your elements are on the screen you want to glue them together inside event callbacks.
The conventional methods of calling d3.selectAll() against a large DOM tree end up resulting in a lot of additional code to make sure your selections are accurate. This is especially true if your goal is re-usable components that would put multiple identical graph types on the screen (small multiples or spark-lines).
The use of closures will allow you to expose only the elements you want to attach to mouse and touch events, and provide an interface for updating your DOM elements from a parent scope downstream in your code.
Implementing the features of the revealing module pattern you write a function that creates DOM elements and returns a closure around them. The closure gives you access to those elements of the graph without having to set up some kind of book-keeping for later selecting by id and class attributes. The closure also gives you a function that when passed a new dataset, will update all the pertinent elements in the chart.
The goal of the pattern is to enable you to design self-contained interactive graphs that only expose useful elements to the parent scope.
code & docs
http://codepen.io/billautomata/pen/WvJvGL
Medium is not suitable for a code heavy article.
The actual article is on my Github page.
