Skip to content
This repository

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

Ordinal

d3.svg (SVG)

Shapes

  • d3.svg.line - create a new line generator.
  • line - generate a piecewise linear curve, as in a line chart.
  • line.x - get or set the x-coordinate accessor.
  • line.y - get or set the y-coordinate accessor.
  • line.interpolate - get or set the interpolation mode.
  • line.tension - get or set the cardinal spline tension.
  • line.defined - control whether the line is defined at a given point.
  • d3.svg.line.radial - create a new radial line generator.
  • line - generate a piecewise linear curve, as in a polar line chart.
  • line.radius - get or set the radius accessor.
  • line.angle - get or set the angle accessor.
  • line.defined - control whether the line is defined at a given point.
  • d3.svg.area - create a new area generator.
  • area - generate a piecewise linear area, as in an area chart.
  • area.x - get or set the x-coordinate accessors.
  • area.x0 - get or set the x0-coordinate (baseline) accessor.
  • area.x1 - get or set the x1-coordinate (topline) accessor.
  • area.y - get or set the y-coordinate accessors.
  • area.y0 - get or set the y0-coordinate (baseline) accessor.
  • area.y1 - get or set the y1-coordinate (topline) accessor.
  • area.interpolate - get or set the interpolation mode.
  • area.tension - get or set the cardinal spline tension.
  • area.defined - control whether the area is defined at a given point.
  • d3.svg.area.radial - create a new area generator.
  • area - generate a piecewise linear area, as in a polar area chart.
  • area.radius - get or set the radius accessors.
  • area.innerRadius - get or set the inner radius (baseline) accessor.
  • area.outerRadius - get or set the outer radius (topline) accessor.
  • area.angle - get or set the angle accessors.
  • area.startAngle - get or set the angle (baseline) accessor.
  • area.endAngle - get or set the angle (topline) accessor.
  • area.defined - control whether the area is defined at a given point.
  • d3.svg.arc - create a new arc generator.
  • arc - generate a solid arc, as in a pie or donut chart.
  • arc.innerRadius - get or set the inner radius accessor.
  • arc.outerRadius - get or set the outer radius accessor.
  • arc.startAngle - get or set the start angle accessor.
  • arc.endAngle - get or set the end angle accessor.
  • arc.centroid - compute the arc centroid.
  • d3.svg.symbol - create a new symbol generator.
  • symbol - generate categorical symbols, as in a scatterplot.
  • symbol.type - get or set the symbol type accessor.
  • symbol.size - get or set the symbol size (in square pixels) accessor.
  • d3.svg.symbolTypes - the array of supported symbol types.
  • d3.svg.chord - create a new chord generator.
  • chord - generate a quadratic Bézier connecting two arcs, as in a chord diagram.
  • chord.radius - get or set the arc radius accessor.
  • chord.startAngle - get or set the arc start angle accessor.
  • chord.endAngle - get or set the arc end angle accessor.
  • chord.source - get or set the source arc accessor.
  • chord.target - get or set the target arc accessor.
  • d3.svg.diagonal - create a new diagonal generator.
  • diagonal - generate a two-dimensional Bézier connector, as in a node-link diagram.
  • diagonal.source - get or set the source point accessor.
  • diagonal.target - get or set the target point accessor.
  • diagonal.projection - get or set an optional point transform.
  • d3.svg.diagonal.radial - create a new diagonal generator.
  • diagonal - generate a two-dimensional Bézier connector, as in a node-link diagram.

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.

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