Need help with d3-starterkit?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

1wheel
127 Stars 24 Forks MIT License 31 Commits 0 Opened issues

Description

Snippets and conventions for d3

Services available

!
?

Need anything else?

Contributors list

# 68,901
datavis...
glsl
Svelte
Common ...
21 commits
# 262,099
Common ...
Shell
Svelte
transfo...
4 commits
# 29,434
MATLAB
mixins
TeX
bookdow...
1 commit
# 58,003
Bootstr...
HTML
Django
django-...
1 commit

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.