d3-jetpack-module

d3-jetpack and d3-starterkit updated to use the D3 4.0 module pattern.

Installing

If you use NPM, npm install d3-jetpack-module. Otherwise, download the latest d3v4+jetpack.js.

Documentation

coming soon! So far there are only minor changes from jetpack and starterkit:

# selection.at(name[, value]) <>

Works like d3v3's .attr. Passing an object to name sets multiple attributes, passing a string returns a single attribute and passing a string & second argument sets a single attribute.

To avoid having to use quotes around attributes and styles with hyphens when using the object notation, camelCase keys are hyphenated. Instead of:

selection
    .attr('stroke-width', 10)
    .attr('text-anchor', 'end')
    .attr('font-weight', 600)

or with d3-selection-multi:

selection.attrs({'stroke-width': 10, 'text-anchor': 'end', 'font-weight': 600})

you can write:

selection.at({fontSize: 10, textAnchor: 'end', fontWeight: 600})

With syntax highlighting on, it is a little easier to see the difference between keys and values when everything isn't a string. Plus there's less typing!

# selection.st(name[, value]) <>

Like at, but for style. Additionally, when a number is passed to a style that requires a unit of measure, like margin-top or font-size, px is automatically appended. Instead of

selection
    .style('margin-top', height/2 + 'px')
    .style('font-size', '40px')
    .style('width', width - 80 + 'px')

The + pxs can also be dropped:

selection.st({marginTop: height/2, fontSize: 40, width: width - 80})

# d3.loadData(files, callback) <>

Takes an array of files paths and loads them with queue, d3.csv and d3.json. After all the files have loaded, calls the callback function with the first error (or null if none) as the first arguement and an array of the loaded files as the secound. Instead of:

d3.queue()
    .defer(d3.csv, 'state-data.csv')
    .defer(d3.csv, 'county-data.csv')
    .defer(d3.json, 'us.json')
    .awaitAll(function(err, res){
        var states = res[0],
            counties = res[1],
            us = res[2]
    })

if your file types match their extensions, you can use:

d3.loadData(['state-data.csv', 'county-data.csv', 'us.json'], function(err, res){
    var states = res[0],
        counties = res[1],
        us = res[2]
})

# d3.nestBy(array, key) <>

Shorthand for d3.nest().key(key).entries(array). Returns an array of arrays, instead of a key/value pairs. The key property of each array is equal the value returned by the key function when it is called with element of the array.

d3.nest()
    .key(ƒ('year'))
    .entries(yields)
    .forEach(function(d){
        console.log('Count in ' + d.key + ': ' + d.values.length) })

to

d3.nestBy(yields, ƒ('year')).forEach(function(d){
    console.log('Count in ' + d.key  + ': ' + d.length) })

# d3.selectAppend(selector) <>

Selects the first element that matches the specified selector string or if no elements match the selector, it will append an element. This is often handy for elements which are required as part of the DOM hierachy, especially when making repeated calls to the same code. When appending it will also add id and classes, same as Jetpack's append

d3.selectAppend('ul.fruits')
    .selectAll('li')
    .data(data)