Skip to content

API Reference

Jason Hutchinson edited this page Apr 29, 2016 · 219 revisions
Clone this wiki locally

WikiAPI Reference

Everything in D3 is scoped under the d3 namespace.

D3 uses semantic versioning. You can find the current version of D3 as d3.version.

See one of:

  • Core - selections, transitions, data, localization, colors, etc.
  • Scales - convert between data and visual encodings
  • SVG - utilities for creating Scalable Vector Graphics
  • Time - parse or format times, compute calendar intervals, etc.
  • Layouts - derive secondary data for positioning elements
  • Geography - project spherical coordinates, latitude & longitude math
  • Geometry - utilities for 2D geometry, such as Voronoi diagrams and quadtrees
  • Behaviors - reusable interaction behaviors

d3 (core)

Selections

Transitions

Working with Arrays

  • d3.ascending - compare two values for sorting.
  • d3.descending - compare two values for sorting.
  • d3.min - find the minimum value in an array.
  • d3.max - find the maximum value in an array.
  • d3.extent - find the minimum and maximum value in an array.
  • d3.sum - compute the sum of an array of numbers.
  • d3.mean - compute the arithmetic mean of an array of numbers.
  • d3.median - compute the median of an array of numbers (the 0.5-quantile).
  • d3.quantile - compute a quantile for a sorted array of numbers.
  • d3.variance - compute the variance of an array of numbers.
  • d3.deviation - compute the standard deviation of an array of numbers.
  • d3.bisect - search for a value in a sorted array.
  • d3.bisectRight - search for a value in a sorted array.
  • d3.bisectLeft - search for a value in a sorted array.
  • d3.bisector - bisect using an accessor or comparator.
  • d3.shuffle - randomize the order of an array.
  • d3.permute - reorder an array of elements according to an array of indexes.
  • d3.zip - transpose a variable number of arrays.
  • d3.transpose - transpose an array of arrays.
  • d3.pairs - returns an array of adjacent pairs of elements.
  • d3.keys - list the keys of an associative array.
  • d3.values - list the values of an associated array.
  • d3.entries - list the key-value entries of an associative array.
  • d3.merge - merge multiple arrays into one array.
  • d3.range - generate a range of numeric values.
  • d3.nest - group array elements hierarchically.
  • nest.key - add a level to the nest hierarchy.
  • nest.sortKeys - sort the current nest level by key.
  • nest.sortValues - sort the leaf nest level by value.
  • nest.rollup - specify a rollup function for leaf values.
  • nest.map - evaluate the nest operator, returning an associative array.
  • nest.entries - evaluate the nest operator, returning an array of key-values tuples.
  • d3.map - a shim for ES6 maps, since objects are not hashes!
  • map.has - returns true if the map contains the specified key.
  • map.get - returns the value for the specified key.
  • map.set - sets the value for the specified key.
  • map.remove - removes the entry for specified key.
  • map.keys - returns the map’s array of keys.
  • map.values - returns the map’s array of values.
  • map.entries - returns the map’s array of entries (key-values objects).
  • map.forEach - calls the specified function for each entry in the map.
  • map.empty - returns false if the map has at least one entry.
  • map.size - returns the number of entries in the map.
  • d3.set - a shim for ES6 sets, since objects are not hashes!
  • set.has - returns true if the set contains the specified value.
  • set.add - adds the specified value.
  • set.remove - removes the specified value.
  • set.values - returns the set’s array of values.
  • set.forEach - calls the specified function for each value in the set.
  • set.empty - returns false if the set has at least one value.
  • set.size - returns the number of values in the set.

Math

Loading External Resources

  • d3.xhr - request a resource using XMLHttpRequest.
  • xhr.header - set a request header.
  • xhr.mimeType - set the Accept request header and override the response MIME type.
  • xhr.response - set a response mapping function.
  • xhr.get - issue a GET request.
  • xhr.post - issue a POST request.
  • xhr.send - issue a request with the specified method and data.
  • xhr.abort - abort an outstanding request.
  • xhr.on - add an event listener for "progress", "load" or "error" events.
  • d3.text - request a text file.
  • d3.json - request a JSON blob.
  • d3.html - request an HTML document fragment.
  • d3.xml - request an XML document fragment.
  • d3.csv - request a comma-separated values (CSV) file.
  • d3.tsv - request a tab-separated values (TSV) file.

String Formatting

CSV Formatting (d3.csv)

  • d3.csv - request a comma-separated values (CSV) file.
  • d3.csv.parse - parse a CSV string into objects using the header row.
  • d3.csv.parseRows - parse a CSV string into tuples, ignoring the header row.
  • d3.csv.format - format an array of objects into a CSV string.
  • d3.csv.formatRows - format an array of tuples into a CSV string.
  • d3.tsv - request a tab-separated values (TSV) file.
  • d3.tsv.parse - parse a TSV string into objects using the header row.
  • d3.tsv.parseRows - parse a TSV string into tuples, ignoring the header row.
  • d3.tsv.format - format an array of objects into a TSV string.
  • d3.tsv.formatRows - format an array of tuples into a TSV string.
  • d3.dsv - create a parser/formatter for the specified delimiter and mime type.

Localization

Colors

  • d3.rgb - specify a color in RGB space.
  • rgb.brighter - increase RGB channels by some exponential factor (gamma).
  • rgb.darker - decrease RGB channels by some exponential factor (gamma).
  • rgb.hsl - convert from RGB to HSL.
  • rgb.toString - convert an RGB color to a string.
  • d3.hsl - specify a color in HSL space.
  • hsl.brighter - increase lightness by some exponential factor (gamma).
  • hsl.darker - decrease lightness by some exponential factor (gamma).
  • hsl.rgb - convert from HSL to RGB.
  • hsl.toString - convert an HSL color to a string.
  • d3.lab - specify a color in L*a*b* space.
  • lab.brighter - increase lightness by some exponential factor (gamma).
  • lab.darker - decrease lightness by some exponential factor (gamma).
  • lab.rgb - convert from L*a*b* to RGB.
  • lab.toString - convert a L*a*b* color to a string.
  • d3.hcl - specify a color in HCL space.
  • hcl.brighter - increase lightness by some exponential factor (gamma).
  • hcl.darker - decrease lightness by some exponential factor (gamma).
  • hcl.rgb - convert from HCL to RGB.
  • hcl.toString - convert an HCL color to a string.

Namespaces

Internals

  • d3.functor - create a function that returns a constant.
  • d3.rebind - rebind an inherited getter/setter method to a subclass.
  • d3.dispatch - create a custom event dispatcher.
  • dispatch.on - register or unregister an event listener.
  • dispatch.type - dispatch an event to registered listeners.

d3.scale (Scales)

Quantitative

  • d3.scale.linear - construct a linear quantitative scale.
  • linear - get the range value corresponding to a given domain value.
  • linear.invert - get the domain value corresponding to a given range value.
  • linear.domain - get or set the scale's input domain.
  • linear.range - get or set the scale's output range.
  • linear.rangeRound - set the scale's output range, and enable rounding.
  • linear.interpolate - get or set the scale's output interpolator.
  • linear.clamp - enable or disable clamping of the output range.
  • linear.nice - extend the scale domain to nice round numbers.
  • linear.ticks - get representative values from the input domain.
  • linear.tickFormat - get a formatter for displaying tick values.
  • linear.copy - create a new scale from an existing scale.
  • d3.scale.sqrt - construct a quantitative scale with a square root transform.
  • d3.scale.pow - construct a quantitative scale with an exponential transform.
  • pow - get the range value corresponding to a given domain value.
  • pow.invert - get the domain value corresponding to a given range value.
  • pow.domain - get or set the scale's input domain.
  • pow.range - get or set the scale's output range.
  • pow.rangeRound - set the scale's output range, and enable rounding.
  • pow.interpolate - get or set the scale's output interpolator.
  • pow.clamp - enable or disable clamping of the output range.
  • pow.nice - extend the scale domain to nice round numbers.
  • pow.ticks - get representative values from the input domain.
  • pow.tickFormat - get a formatter for displaying tick values.
  • pow.exponent - get or set the exponent power.
  • pow.copy - create a new scale from an existing scale.
  • d3.scale.log - construct a quantitative scale with a logarithmic transform.
  • log - get the range value corresponding to a given domain value.
  • log.invert - get the domain value corresponding to a given range value.
  • log.domain - get or set the scale's input domain.
  • log.range - get or set the scale's output range.
  • log.rangeRound - set the scale's output range, and enable rounding.
  • log.base - get or set the scale's logarithmic base.
  • log.interpolate - get or set the scale's output interpolator.
  • log.clamp - enable or disable clamping of the output range.
  • log.nice - extend the scale domain to nice powers of ten.
  • log.ticks - get representative values from the input domain.
  • log.tickFormat - get a formatter for displaying tick values.
  • log.copy - create a new scale from an existing scale.
  • d3.scale.quantize - construct a linear quantitative scale with a discrete output range.
  • quantize - get the range value corresponding to a given domain value.
  • quantize.invertExtent - get the domain values for the specified range value.
  • quantize.domain - get or set the scale's input domain.
  • quantize.range - get or set the scale's output range (as discrete values).
  • quantize.copy - create a new scale from an existing scale.
  • d3.scale.threshold - construct a threshold scale with a discrete output range.
  • threshold - get the range value corresponding to a given domain value.
  • threshold.invertExtent - get the domain values for the specified range value.
  • threshold.domain - get or set the scale's input domain.
  • threshold.range - get or set the scale's output range (as discrete values).
  • threshold.copy - create a new scale from an existing scale.
  • d3.scale.quantile - construct a quantitative scale mapping to quantiles.
  • quantile - get the range value corresponding to a given domain value.
  • quantile.invertExtent - get the domain values for the specified range value.
  • quantile.domain - get or set the scale's input domain (as discrete values).
  • quantile.range - get or set the scale's output range (as discrete values).
  • quantile.quantiles - get the scale's quantile bin thresholds.
  • quantile.copy - create a new scale from an existing scale.
  • d3.scale.identity - construct a linear identity scale.
  • identity - the identity function.
  • identity.invert - equivalent to identity; the identity function.
  • identity.domain - get or set the scale's domain and range.
  • identity.range - equivalent to identity.domain.
  • identity.ticks - get representative values from the domain.
  • identity.tickFormat - get a formatter for displaying tick values.
  • identity.copy - create a new scale from an existing scale.

Ordinal

d3.svg (SVG)

Shapes

Axes

Controls

  • d3.svg.brush - click and drag to select one- or two-dimensional regions.
  • brush - apply a brush to the given selection or transition.
  • brush.x - the brush’s x-scale, for horizontal brushing.
  • brush.y - the brush’s y-scale, for vertical brushing.
  • brush.extent - the brush’s extent in zero, one or two dimensions.
  • brush.clear - reset the brush extent.
  • brush.empty - whether or not the brush extent is empty.
  • brush.on - listeners for when the brush is moved.
  • brush.event - dispatch brush events after setting the extent.

d3.time (Time)

Time Formatting

Time Scales

  • d3.time.scale - construct a linear time scale.
  • scale - get the range value corresponding to a given domain value.
  • scale.invert - get the domain value corresponding to a given range value.
  • scale.domain - get or set the scale's input domain.
  • scale.nice - extend the scale domain to nice round numbers.
  • scale.range - get or set the scale's output range.
  • scale.rangeRound - set the scale's output range, and enable rounding.
  • scale.interpolate - get or set the scale's output interpolator.
  • scale.clamp - enable or disable clamping of the output range.
  • scale.ticks - get representative values from the input domain.
  • scale.tickFormat - get a formatter for displaying tick values.
  • scale.copy - create a new scale from an existing scale.

Time Intervals

d3.layout (Layouts)

Bundle

  • d3.layout.bundle - construct a new default bundle layout.
  • bundle - apply Holten's hierarchical bundling algorithm to edges.

Chord

Cluster

Force

Hierarchy

Histogram

Pack

  • d3.layout.pack - produce a hierarchical layout using recursive circle-packing.
  • pack - alias for pack.nodes.
  • pack.nodes - compute the pack layout and return the array of nodes.
  • pack.links - compute the parent-child links between tree nodes.
  • pack.children - get or set the children accessor function.
  • pack.sort - control the order in which sibling nodes are traversed.
  • pack.value - get or set the value accessor used to size circles.
  • pack.size - specify the layout size in x and y.
  • pack.radius - specify the node radius, rather than deriving it from value.
  • pack.padding - specify the layout padding in (approximate) pixels.

Partition

Pie

  • d3.layout.pie - construct a new default pie layout.
  • pie - compute the start and end angles for arcs in a pie or donut chart.
  • pie.value - get or set the value accessor function.
  • pie.sort - control the clockwise order of pie slices.
  • pie.startAngle - get or set the overall start angle of the pie.
  • pie.endAngle - get or set the overall end angle of the pie.
  • pie.padAngle - get or set the pad angle of the pie.

Stack

  • d3.layout.stack - construct a new default stack layout.
  • stack - compute the baseline for each series in a stacked bar or area chart.
  • stack.values - get or set the values accessor function per series.
  • stack.order - control the order in which series are stacked.
  • stack.offset - specify the overall baseline algorithm.
  • stack.x - get or set the x-dimension accessor function.
  • stack.y - get or set the y-dimension accessor function.
  • stack.out - get or set the output function for storing the baseline.

Tree

  • d3.layout.tree - position a tree of nodes tidily.
  • tree - alias for tree.nodes.
  • tree.nodes - compute the tree layout and return the array of nodes.
  • tree.links - compute the parent-child links between tree nodes.
  • tree.children - get or set the children accessor function.
  • tree.sort - control the order in which sibling nodes are traversed.
  • tree.separation - get or set the spacing function between neighboring nodes.
  • tree.size - specify the layout size in x and y.
  • tree.nodeSize - specify a fixed size for each node.

Treemap

d3.geo (Geography)

Paths

Projections

Streams

d3.geom (Geometry)

Voronoi

  • d3.geom.voronoi - create a Voronoi layout with default accessors.
  • voronoi - compute the Voronoi tessellation for the specified points.
  • voronoi.x - get or set the x-coordinate accessor for each point.
  • voronoi.y - get or set the y-coordinate accessor for each point.
  • voronoi.clipExtent - get or set the clip extent for the tesselation.
  • voronoi.links - compute the Delaunay mesh as a network of links.
  • voronoi.triangles - compute the Delaunay mesh as a triangular tessellation.

Quadtree

Polygon

Hull

  • d3.geom.hull - create a convex hull layout with default accessors.
  • hull - compute the convex hull for the given array of points.
  • hull.x - get or set the x-coordinate accessor.
  • hull.y - get or set the y-coordinate accessor.

d3.behavior (Behaviors)

Drag

Zoom

  • d3.behavior.zoom - create a zoom behavior.
  • zoom - apply the zoom behavior to the selected elements.
  • zoom.scale - the current scale factor.
  • zoom.translate - the current translate offset.
  • zoom.scaleExtent - optional limits on the scale factor.
  • zoom.center - an optional focal point for mousewheel zooming.
  • zoom.size - the dimensions of the viewport.
  • zoom.duration - get or set the dblclick transition duration.
  • zoom.x - an optional scale whose domain is bound to the x extent of the viewport.
  • zoom.y - an optional scale whose domain is bound to the y extent of the viewport.
  • zoom.on - listeners for when the scale or translate changes.
  • zoom.event - dispatch zoom events after setting the scale or translate.
Something went wrong with that request. Please try again.