d3-starterkit

by 1wheel

Snippets and conventions for d3

128 Stars 24 Forks Last release: Not found MIT License 31 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

This repo is no longer being updated!

Template code lives at d3-init

Library code merged into d3-jetpack

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.