Skip to content

Instantly share code, notes, and snippets.

@joyrexus
Created November 10, 2013 04:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joyrexus/7393907 to your computer and use it in GitHub Desktop.
Save joyrexus/7393907 to your computer and use it in GitHub Desktop.
Roll-your-own D3 bundle

Sample Makefile demonstrating how to roll-your-own D3 bundle that runs both in a browser and as a node module.

This is handy when you're working on an app that only needs a slice of D3's vast functionality. A minified D3 runs 144K, whereas a custom bundle of, say, D3's array manipulation features is only 8K.

See the smash wiki for an overview of the process.

Our Makefile contains two build options (and their minified variants): one for building a standalone version of D3's nest operator and one that pulls together all of D3's array manipulation methods.

To build the first:

make d3-nest.js

To build the second:

make d3-array.js

Minified variants:

make d3-nest-min.js

make d3-array-min.js

Note: a pre-packaged nest and rollup operator with demo and docs is available here.

NEST_FILES = \
node_modules/d3/src/start.js \
node_modules/d3/src/arrays/map.js \
node_modules/d3/src/arrays/nest.js \
node_modules/d3/src/end.js
ARRAY_FILES = \
node_modules/d3/src/start.js \
node_modules/d3/src/arrays/*.js \
node_modules/d3/src/end.js
NODIFY = '"undefined" !== module ? module.exports = d3 : this.d3 = d3;'
d3-nest.js: $(NEST_FILES)
@smash $(NEST_FILES) > $@
@echo $(NODIFY) >> $@
d3-nest-min.js: d3-nest.js
@uglifyjs -c -m -o $@ d3-nest.js
d3-array.js: $(ARRAY_FILES)
@smash $(ARRAY_FILES) > $@
@echo $(NODIFY) >> $@
d3-array-min.js: d3-array.js
@uglifyjs -c -m -o $@ d3-array.js
list:
@perl -ne'print "$$1\n" if /^([^\.][\w-\.]*):/ and not /^list/' Makefile
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment