Snippets and conventions for d3
JavaScript HTML
Latest commit 7e8b5bc Aug 28, 2016 @1wheel committed on GitHub fixes #6
Permalink
Failed to load latest commit information.
LICENSE Initial commit Mar 8, 2015
README.md v4 bump Jun 11, 2016
d3-jetpack.js jetpack bump Jun 11, 2016
d3-starterkit.js fixes color Jun 23, 2016
d3v4.js d3 bump Jun 23, 2016
data.tsv init commit Mar 8, 2015
index.html v4 bump Jun 11, 2016
script.js fixes #6 Aug 28, 2016

README.md

d3-starterkit

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. Short example and longer blog post.

This branch uses d3 verison 4, see the d3v3 branch to use with d3 verision 3.

selection.dataAppend

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')
    .data(data)
    .enter()
    .append('circle')

Use dataAppend:

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

selection.selectAppend

Select or append a single element. Always returning the selection:

var g = svg.selectAll('g')
    .data([null])
    .call(function(sel) {
      sel.enter().append('g')
    })

Use selectAppend:

var g = el.selectAppend('g')

d3.attachTooltip

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

circles.call(d3.attachTooltip)

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

circles
    .call(d3.attachTooltip)
    .on('mouseover', function(d){
      d3.select('.tooltip').html(template(d)) })

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

d3.conventions

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:

totalWidth, totalHeight, margin: size of the svg and its margins

width, height: size of svg inside of margins.

parentSel: d3.selection of the element the svg was appended to. Defaults to d3.select("body"), but like every other returned value, can be specified by passing in an object: d3.conventions({parentSel: d3.select("#graph-container"), totalHeight: 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.