D3 and React — A Design Pattern for Responsive Charts Part 3

Part III: Reusable Modules.

https://www.flickr.com/photos/spacex/

In this, the third and final part of this series, we’ll separate our D3 code out into a few small reusable modules, then build a more interesting visualisation that maps data to multiple channels and fully implements the D3 General Update Pattern pattern. In case you need a refresher, catch up here on Part 1 and Part 2.

1) Let’s create some reusable modules! In keeping with the them of this series, let’s create a directory called ‘d3land,’ place ThePattern.js in there, and also create a ‘utilities’ directory in there as well. We’ll use the utilities folder to squirrel away all of these new helper classes we’re going to create. Create Dimensions.js, Scales.js and Axes.js, plus an index.js from which we’ll export our helper classes to the outside world. This new directory structure should look like this:

.
|____App.js
|____App.css
|____index.js
|____d3Land
| |____utilities
| | |____Scales.js
| | |____Dimensions.js
| | |____index.js
| | |____Axes.js
| |____ThePattern.js
|____ReactNode.js

Now in utilities/index.js we just export our new skeleton classes like so:

export { default as Axes } from './Axes';
export { default as Dimensions } from './Dimensions';
export { default as Scales } from…