d3-jsnext

d3, ported to ES6 modules.

Why?

Because most d3 projects only use a tiny fraction of d3's code. It has so much stuff in there - data manipulation, DOM stuff, AJAX, string interpolators, etc, etc... that you just don't need if you only want to (for example) generate a map projection function.

You can build d3 yourself, only including the bits that you need, but... can you really be bothered? And when you decide you want to use another d3 function that isn't in the build, do you waste time rebuilding it, or waste time implementing the function yourself?

ES6 modules allow you to selectively import the bits of a library that you actually need.

// Instead of this...
var d3 = require( 'd3' );
var projection = d3.geo.albers();
 
// ...write this:
import { albers } from 'd3-jsnext';
var projection = albers();

How does it work?

ES6 modules were designed from the ground for static analysis, which lets us determine which bits of a library you're using. (With CommonJS (i.e. node/browserify) and AMD modules, that just isn't possible.)

But you have to use the right tools. rollup is an ES6 module bundle that's smart enough to only include the right bits of code.

Does it really make that much difference?

Yes! Minified and gzipped, d3 weighs around 53kb. An adaptation of the Voronoi Tesselation example - you can see it here - weighs just 8kb, including the example code itself. Depending on which of d3's functions you're actually using, the savings can be even more dramatic.

How do I use it?

Check out the examples folder to see how to use d3-jsnext. You need to have a build step which takes your source code and bundles it up, but it can be as simple as typing a single command into your terminal. In theory, any ES6-aware module bundler will work, but for best results use rollup.

Note that whereas the examples use a relative path, in your own projects you should import from 'd3-jsnext'.

Table of import names

With regular d3, functions live in namespaces, like d3.geom.voronoi. ES6 modules don't work like that - instead, you import from a single namespace:

import { voronoi } from 'd3';
var layout = voronoi()...

In most cases, the import name is just the last part of the name as it was before. In a few cases (e.g d3.svg.line.radial and d3.svg.diagonal.radial) that introduces conflicts, so refer to the following table:

old	new
d3.ascending	ascending
d3.bisector	bisector
d3.bisect	bisect
d3.bisectRight	bisectRight
d3.bisectLeft	bisectLeft
d3.descending	descending
d3.deviation	deviation
d3.entries	entries
d3.extent	extent
d3.keys	keys
d3.map	map
d3.max	max
d3.mean	mean
d3.median	median
d3.merge	merge
d3.min	min
d3.nest	nest
d3.pairs	pairs
d3.permute	permute
d3.quantile	quantile
d3.range	range
d3.set	set
d3.shuffle	shuffle
d3.sum	sum
d3.transpose	transpose
d3.values	values
d3.variance	variance
d3.zip	zip
d3.behavior	behavior
d3.behavior.drag	drag
d3.behavior.zoom	zoom
d3.color	color
d3.hcl	hcl
d3.hsl	hsl
d3.lab	lab
d3.rgb	rgb
d3.functor	functor
d3.ns	ns
d3.rebind	rebind
d3.csv	csv
d3.dsv	dsv
d3.tsv	tsv
d3.dispatch	dispatch
d3.mouse	mouse
d3.timer.flush	flush
d3.timer	timer
d3.touch	touch
d3.touches	touches
d3.format	format
d3.formatPrefix	formatPrefix
d3.requote	requote
d3.round	round
d3.geo.albersUsa	albersUsa
d3.geo.albers	albers
d3.geo.area	geo_area
d3.geo.azimuthalEqualArea	azimuthalEqualArea
d3.geo.azimuthalEquidistant	azimuthalEquidistant
d3.geo.bounds	bounds
d3.geo.centroid	centroid
d3.geo.circle	circle
d3.geo.clipExtent	clipExtent
d3.geo.conicConformal	conicConformal
d3.geo.conicEqualArea	conicEqualArea
d3.geo.conicEquidistant	conicEquidistant
d3.geo.distance	distance
d3.geo.equirectangular	equirectangular
d3.geo	geo
d3.geo.gnomonic	gnomonic
d3.geo.graticule	graticule
d3.geo.greatArc	greatArc
d3.geo.interpolate	geo_interpolate
d3.geo.length	length
d3.geo.mercator	mercator
d3.geo.orthographic	orthographic
d3.geo.path	path
d3.geo.projectionMutator	projectionMutator
d3.geo.projection	projection
d3.geo.rotation	rotation
d3.geo.stereographic	stereographic
d3.geo.stream	stream
d3.geo.transform	geo_transform
d3.geo.transverseMercator	transverseMercator
d3.geom.delaunay	delaunay
d3.geom	geom
d3.geom.hull	hull
d3.geom.polygon	polygon
d3.geom.quadtree	quadtree
d3.geom.voronoi	voronoi
d3.interpolateArray	interpolateArray
d3.ease	ease
d3.interpolateHcl	interpolateHcl
d3.interpolateHsl	interpolateHsl
d3.interpolators	interpolators
d3.interpolate	interpolate
d3.interpolateLab	interpolateLab
d3.interpolateNumber	interpolateNumber
d3.interpolateObject	interpolateObject
d3.interpolateRgb	interpolateRgb
d3.interpolateRound	interpolateRound
d3.interpolateString	interpolateString
d3.interpolateTransform	interpolateTransform
d3.interpolateZoom	interpolateZoom
d3.layout.bundle	bundle
d3.layout.chord	layout_chord
d3.layout.cluster	cluster
d3.layout.force	force
d3.layout.hierarchy	hierarchy
d3.layout.histogram	histogram
d3.layout	layout
d3.layout.pack	pack
d3.layout.partition	partition
d3.layout.pie	pie
d3.layout.stack	stack
d3.layout.tree	tree
d3.layout.treemap	treemap
d3.locale.ca_ES	ca_ES
d3.locale.de_DE	de_DE
d3.locale.en_GB	en_GB
d3.locale.es_ES	es_ES
d3.locale.fi_FI	fi_FI
d3.locale.fr_FR	fr_FR
d3.locale.he_IL	he_IL
d3.locale	locale
d3.locale.mk_MK	mk_MK
d3.locale.nl_NL	nl_NL
d3.locale.pt_BR	pt_BR
d3.locale.ru_RU	ru_RU
d3.locale.zh_CN	zh_CN
d3.random	random
d3.transform	transform
d3.scale.category20c	category20c
d3.scale.category20b	category20b
d3.scale.category20	category20
d3.scale.category10	category10
d3.scale.identity	identity
d3.scale.linear	linear
d3.scale.log	log
d3.scale.ordinal	ordinal
d3.scale.pow	pow
d3.scale.quantile	scale_quantile
d3.scale.quantize	quantize
d3.scale	scale
d3.scale.sqrt	sqrt
d3.scale.threshold	threshold
d3.selectAll	selectAll
d3.select	select
d3.selection.enter	enter
d3.selection	selection
d3.svg.arc	arc
d3.svg.area.radial	area_radial
d3.svg.area	svg_area
d3.svg.axis	axis
d3.svg.brush	brush
d3.svg.chord	svg_chord
d3.svg.diagonal.radial	diagonal_radial
d3.svg.diagonal	diagonal
d3.svg.line.radial	line_radial
d3.svg.line	line
d3.svg	svg
d3.svg.symbolTypes	symbolTypes
d3.svg.symbol	symbol
d3.time	time
d3.transition	transition
d3.html	html
d3.json	json
d3.text	text
d3.xhr	xhr
d3.xml	xml

Building and testing

First, you need a local copy of d3's source code, plus its devDependencies:

npm run update-d3

Generating the ES6 modules and tests

npm run build

This will generate transformed tests and source code in the test and src folders respectively.

Running the tests

Err... the tests don't quite work yet. In progress! (It's tricky, because the test suite makes a number of perfectly justifiable assumptions that no longer hold.)

License etc

d3 is copyright Mike Bostock - license here.

d3-jsnext copyright Rich Harris and released under the MIT license.

Feedback

I'm @Rich_Harris on Twitter.