nkabir / d3-jetpack Goto Github PK

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');
    });

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)]; });

ƒ 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 ƒ.