d3-jetpack is a set of nifty convenience wrappers that speed up your daily work with d3.js
(comic by Tom Gauld)
Here's what's in the package:
Appending and inserting with classes/ids
selection.append("div.my-class");
selection.append("div.first-class.second-class");
selection.append("div#someId");
selection.append("div#someId.some-class");
// works with insert, too
selection.insert("div.my-class");
For multi-line SVG text
selection.append('text').tspans(['Multiple', 'lines']);
selection.append('text')
.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..
selection.append('text')
.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...
svg.append(g).translate([margin.left, margin.top]);
tick.translate(function(d) { return [0, y(d)]; });
jetpack added selection.prop
as alias for selection.property
. Much faster to type, isn't it? Also only consistent with selection.attr
, and familiar to jQuery folks.
ƒ
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; }));
becomes
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 = polygons.map(ƒ('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 ƒ.