Nifty convenience wrappers that speed up your daily work with d3.js
Latest commit f5dc663 Jan 24, 2017 @gka committed on GitHub Update
Failed to load latest commit information.
COPYING adding license May 21, 2015 Update Jan 24, 2017
bower.json bumped bower version Jul 18, 2016
d3-jetpack.js shorter is better, I guess? Sep 15, 2016
package.json 1.0.6 Sep 15, 2016

d3-jetpack is a set of nifty convenience wrappers that speed up your daily work with d3.js

jetpack (comic by Tom Gauld)


You can use d3-jetpack with AMD, CommonJS and browser globals. You need to install d3 in order to use d3-jetpack.


var d3 = require('./d3-jetpack'); 
// now d3 has a jetpack


requirejs(['d3-jetpack'],function (d3) {
  // now d3 has a jetpack

Browser globals

<script src=""></script>
<script src="js/d3-jetpack.js"></script>
  // now d3 has a jetpack

Here's what's in the package:

selection.append / selection.insert

Appending and inserting with classes/ids


// works with insert, too


combines data().enter().append()

selection.appendMany(myArray, '');
// is same as


For multi-line SVG text

selection.append('text').tspans(['Multiple', 'lines']);
    .tspans(function(d) {
        return d.text.split('\n');


jetpack lets you set the same listener for multiple events at once, jQuery style.

selection.on('click touchend', function() {
    console.log('this works on desktop AND mobile!');


Comes in handy with the tspans..

    .tspans(function(d) {
        return d3.wordwrap(text, 15);  // break line after 15 characters


How I hated writing .attr('transform', function(d) { return 'translate()'; }) a thousand times...

tick.translate(function(d) { return  [0, y(d)]; });


jetpack added selection.prop as alias for Much faster to type, isn't it? Also only consistent with selection.attr, and familiar to jQuery folks.

ƒ or d3.f

ƒ takes a string|number and returns a function that takes an object and returns whatever property the string is named. This clears away much of verbose function(d){ return ... } syntax in ECMAScript 5:

x.domain(d3.extent(items, function(d){ return d.price; }));


x.domain(d3.extent(items, ƒ('price'));

ƒ even accepts multiple accessors and will execute them in the order of appearance. So for instance, let's say we have an array of polygon objects like this { points: [{x: 0, y: 3}, ...] } we can get the first y coordinates using:

var firstY =ƒ('points', 0, 'y'));

If you don't know how to type ƒ (it's [alt] + f on Macs), you can use d3.f(), too. Also, in @1wheel's blog you can read more about the rationale behind ƒ.

Special operator ƒ.call

Let's say we have an array of objects which expose certain properties via accessor functions, like polygon.centroid(). Calling just ƒ('centroid') would return the accessor function itself instead of the result. To get ƒ to call the accessor function we added a special operator ƒ.call.

var centroids =ƒ('centroid', 'ƒ.call'));

Special operator ƒ.not

This one is helpful if you're accessing boolean values but for some reason want to negate them.

selection.classed('hidden', ƒ('is_visible', 'ƒ.not'));

d3.ascendingKey and d3.descendingKey

These functions operate like d3.ascending / d3.descending but you can pass a key string or key function which will be used to specify the property by which to sort an array of objects.

var fruits = [{ name: "Apple", color: "green" }, { name: "Banana", color: "yellow" }];

d3.round(x, precision)

A useful short-hand method for +d3.format('.'+precision+'f')(x) also known as +x.toFixed(precision). Note that this code is fundamentally broken but still works fine 99% of the time.

d3.round(1.2345, 2) // 1.23