block by 1wheel 1b6758978dc2d52d3a37


Full Screen


Snippets and conventions for starting a new d3 project without a fuss. Includes d3, lodash, d3-jetpack, some handy css and a few convenience functions.


Instead of making an empty selection, binding data to it, taking the enter selection and appending elements as separate steps:

var circles = svg.selectAll('circle')

Use dataAppend:

var circles = svg.dataAppend('circle', data)


Attaches a light weight tooltip that prints out all of an objects properties on mouseover. No more >$0).datum()! Assumes that a <div class='tooltip'></div> and the tooltip css exist on the page - see index for an example.

For formated tooltips, update the html of the tooltip on mouseover:

    .on('mouseover', function(d){'.tooltip').html(template(d)) })

If your fancy tooltip requires lots of markup, using a template might be eaiser than building a complex html tree with d3.


d3.conventions() appends an svg element with a g element according to the margin convention to the page and returns an object with the following properties:

width, height, margin: size of the svg and its margins

parentSel: d3.selection of the element the svg was appended to. Defaults to"body"), but like every other returned value, can be specified by passing in an object: d3.conventions({parentSel:"#graph-container"), height: 1300}) appends an svg to #graph-container with a height of 1300.

svg: g element translated to make room for the margins

x: Linear scale with a range of [0, width]

y: Linear scale with a range of [height, 0]

xAxis: Axis with scale set to x and orient to “bottom”

yAxis: Axis with scale set to y and orient to “left”

drawAxis: Call to append axis group elements to the svg after configuring the domain. Not configurable.