Quick Reference of D3

Selections

d3.select()

Returns a reference to the first element found.

d3.selectAll()

Returns references to all found elements

selection.append()

Takes a selection, creates a new element inside of it, then returns a reference to the newly created element.

const newCirlce = svg.append('circle')

selection.remove()

Takes a selection, removes it from the DOM, and returns a reference to the deleted selection.

selection.text()

Takes a selection, sets its text content, and returns a reference to the acted-upon selection.

selection.attr()

Takes a selection, sets an attribute value, and returns a reference to the acted-upon selection.

selection.style()

Takes a selection, sets an inline CSS style, and returns a reference to the acted-upon selection.

selection.classed()

Takes a selection, adds or remove a class, and returns a reference to the acted-upon selection; true adds the specified class, false removes it.

selection.each()

Takes a selection, and runs an arbitrary function for each element in the selection, with the this context set to the element being acted upon.

d3.selectAll('circle').each(zoomAndEnhance)

Data

selection.data()

Takes a selection, calculates the difference between the number of elements and number of data value, and binds the array of data value to any existing elements(or not existing placeholder elements).

selection.datum()

Takes a selection, and binds a single data value to a single element.

svg.append('path').datum(dataset).attr('d', line)

selection.enter()

Takes a selection and returns a subselection of ‘new’ placeholder elements.

selection.merge()

Takes a selection and merges it with another specified selection, returning a newly merged selection.

bars.enter().append('rect').merge(bars) // merge enter subselection with existing selection.

selection.exit()

Takes a selection and returns a subselection of ‘exiting’ elements.

selection.remove()

Takes a selection and removes associated elements from the DOM.

bars.exit().remove()

function (d) { … }

Use anonymouse functions to access data values bound to element via d.

function (d, i) { … }

Including i to get the index value of each element in the selection.

selection.fitler()

Takes a selection and returns a new (sub)selection

d3.selectAll('circle')
  .filter(function (d) {
    return d > 15
  })
  .style('color', 'red')

d3.csv()

Loads an external CSV file, parses the contents into JSON, then hands off the results to a callback function.

d3.csv('food.csv', function(data) {
  console.log(data)
})

d3.json()

Loads an external JSON file, parse the content into JSON, then hands off the results to a callback function.

d3.request()

Loads an arbitrary external file, then hands off the result to a callback function.

d3.request('interesting_data.txt')
  .get(function (res) {
    // Do something
  })

Transitions

selection.transition()

Takes a selection, and initiates a new transition, so values specified after this point will be interpolated over time(rather than set immediately).

d3.selectAll('circle')
  .attr('cx', 0)
  .transition()
  .attr('cx', 100)

selection.delay()

Takes a transition, and sets the delay, in milliseconds.

d3.selectAll('circle')
  .attr('cx', 0)
  .transition()
  .delay(1000)
  .attr('cx', 100)

transition.duration()

Takes a transition and sets the duration in milliseconds.

transition.ease()

Takes a transition and sets the easing to be used.

transition.on()

Takes a transition, and binds a function to be executed at either the start or end.

d3.selectAll('circle')
  .attr('cx', 0)
  .transition()
  .attr('cx', 100)
  .on('end', function () {
    console.log('All done')
  })

Scale

d3.scaleLinear()

Creates a new linear scale function.

scaleLinear.domain()

Sets a linear scale’s input domain.

scaleLinear.range()

Sets a linear scale’s output range.

scaleLinear.rangeRound()

Sets a linear scale’s output range, and have all values output by the scale rounded to the nearest whole number.

scaleLinear.nice()

Expands a linear sclae’s domain to the nearest round values.

xScale.nice()

scaleLinear.clamp()

Forces any values output by this scale to be constrainted (rounded to be) within the specified range.

xScale.clamp(true)

d3.min()

Returns the smallest value in an array.

d3.max()

Returns the largest value in an array.

Axes

d3.axisTop, d3.axisRight, d3.axisBottom, d3.axisLeft

Create a new axis generator function, with specified orientation.

axis.scale()

Takes an axis, and specifies the scale to be used.

axis.ticks()

Takes an axis, and specifies a target number of ticks to be used.

axis.tickValues()

Takes an axis, and specifies the values to be labeled with ticks.

selection.call()

Takes a selection, and calls an arbitrary method to act upon the selection; commonly used to generate an axis.

svg.append('g').call(xAxis)

Interactivity

selection.on()

Takes a selection, and binds an event listener

d3.select('#button')
  .on('click', () => { ... })

d3.select(this)

Within an anonymous function, this refers to the element current being acted upon

Numebrs, Dates, and Times

d3.range()

Generates an array of sequential numbers.

d3.range(5); // Returns [0, 1, 2, 3, 4]

d3.format()

Creates a new number formatter, for convertiing numbers to strings.

d3.timeParse()

Creates a new time parser, for converting strings to Date Object.

const parseTime = d3.timeParse("%m/%d/%y")
parseTime('02/20/17')

d3.timeFormat()

Creates a new time formatter, for converting Data Object to strings.

const formatTime = d3.timeFormat("%b %e")
formatTime(new Date)