d3 / 7.4.0 /

D3 API Reference

D3 is a collection of modules that are designed to work together; you can use the modules independently, or you can use them together as part of the default build. The source and documentation for each module is available in its repository. Follow the links below to learn more. For changes between major versions, see CHANGES; see also the release notes and the 3.x reference.

D3 uses semantic versioning. The current version is exposed as d3.version.

Arrays (d3-array)

Array manipulation, ordering, searching, summarizing, etc.

Statistics

Methods for computing basic summary statistics.

  • d3.min - compute the minimum value in an iterable.
  • d3.minIndex - compute the index of the minimum value in an iterable.
  • d3.max - compute the maximum value in an iterable.
  • d3.maxIndex - compute the index of the maximum value in an iterable.
  • d3.extent - compute the minimum and maximum value in an iterable.
  • d3.sum - compute the sum of an iterable of numbers.
  • d3.mean - compute the arithmetic mean of an iterable of numbers.
  • d3.median - compute the median of an iterable of numbers (the 0.5-quantile).
  • d3.mode - compute the mode (the most common value) of an iterable of numbers.
  • d3.cumsum - compute the cumulative sum of an iterable.
  • d3.rank - compute the rank order of an iterable.
  • d3.quantile - compute a quantile for an iterable of numbers.
  • d3.quantileSorted - compute a quantile for a sorted array of numbers.
  • d3.variance - compute the variance of an iterable of numbers.
  • d3.deviation - compute the standard deviation of an iterable of numbers.
  • d3.fcumsum - compute a full precision cumulative summation of numbers.
  • d3.fsum - compute a full precision summation of an iterable of numbers.
  • new d3.Adder - creates a full precision adder.
  • adder.add - add a value to an adder.
  • adder.valueOf - returns a double precision representation of an adder’s value.

Methods for searching arrays for a specific element.

Transformations

Methods for transforming arrays and for generating new arrays.

  • d3.flatGroup - group an iterable into a flat array.
  • d3.flatRollup - reduce an iterable into a flat array.
  • d3.group - group an iterable into a nested Map.
  • d3.groups - group an iterable into a nested array.
  • d3.groupSort - sort keys according to grouped values.
  • d3.index - index an iterable into a nested Map.
  • d3.indexes - index an iterable into a nested array.
  • d3.rollup - reduce an iterable into a nested Map.
  • d3.rollups - reduce an iterable into a nested array.
  • d3.count - count valid number values in an iterable.
  • d3.cross - compute the Cartesian product of two iterables.
  • d3.merge - merge multiple iterables into one array.
  • d3.pairs - create an array of adjacent pairs of elements.
  • d3.permute - reorder an iterable of elements according to an iterable of indexes.
  • d3.shuffle - randomize the order of an iterable.
  • d3.shuffler - randomize the order of an iterable.
  • d3.ticks - generate representative values from a numeric interval.
  • d3.tickIncrement - generate representative values from a numeric interval.
  • d3.tickStep - generate representative values from a numeric interval.
  • d3.nice - extend an interval to align with ticks.
  • d3.range - generate a range of numeric values.
  • d3.transpose - transpose an array of arrays.
  • d3.zip - transpose a variable number of arrays.

Iterables

Sets

Histograms

Bin discrete samples into continuous, non-overlapping intervals.

Interning

Axes (d3-axis)

Human-readable reference marks for scales.

Brushes (d3-brush)

Select a one- or two-dimensional region using the mouse or touch.

Chords (d3-chord)

Colors (d3-color)

Color manipulation and color space conversion.

  • d3.color - parse the given CSS color specifier.
  • color.opacity - the color’s opacity.
  • color.rgb - compute the RGB equivalent of this color.
  • color.copy - return a copy of this color.
  • color.brighter - create a brighter copy of this color.
  • color.darker - create a darker copy of this color.
  • color.displayable - returns true if the color is displayable on standard hardware.
  • color.formatHex - returns the hexadecimal RRGGBB string representation of this color.
  • color.formatHex8 - returns the hexadecimal RRGGBBAA string representation of this color.
  • color.formatHsl - returns the RGB string representation of this color.
  • color.formatRgb - returns the HSL string representation of this color.
  • color.toString - returns the RGB string representation of this color.
  • d3.rgb - create a new RGB color.
  • rgb.clamp - returns copy of this color clamped to the RGB color space.
  • d3.hsl - create a new HSL color.
  • hsl.clamp - returns copy of this color clamped to the HSL color space.
  • d3.lab - create a new Lab color.
  • d3.gray - create a new Lab gray.
  • d3.hcl - create a new HCL color.
  • d3.lch - create a new HCL color.
  • d3.cubehelix - create a new Cubehelix color.

Color Schemes (d3-scale-chromatic)

Color ramps and palettes for quantitative, ordinal and categorical scales.

Categorical

Diverging

Sequential (Single Hue)

Sequential (Multi-Hue)

Cyclical

Contours (d3-contour)

Compute contour polygons using marching squares.

Voronoi Diagrams (d3-delaunay)

Compute the Voronoi diagram of a set of two-dimensional points.

Dispatches (d3-dispatch)

Separate concerns using named callbacks.

Dragging (d3-drag)

Drag and drop SVG, HTML or Canvas using mouse or touch input.

Delimiter-Separated Values (d3-dsv)

Parse and format delimiter-separated values, most commonly CSV and TSV.

Easings (d3-ease)

Easing functions for smooth animation.

Fetches (d3-fetch)

Convenience methods on top of the Fetch API.

  • d3.blob - get a file as a blob.
  • d3.buffer - get a file as an array buffer.
  • d3.csv - get a comma-separated values (CSV) file.
  • d3.dsv - get a delimiter-separated values (CSV) file.
  • d3.html - get an HTML file.
  • d3.image - get an image.
  • d3.json - get a JSON file.
  • d3.svg - get an SVG file.
  • d3.text - get a plain text file.
  • d3.tsv - get a tab-separated values (TSV) file.
  • d3.xml - get an XML file.

Forces (d3-force)

Force-directed graph layout using velocity Verlet integration.

Number Formats (d3-format)

Format numbers for human consumption.

Geographies (d3-geo)

Geographic projections, shapes and math.

Paths

  • d3.geoPath - create a new geographic path generator.
  • path - project and render the specified feature.
  • path.area - compute the projected planar area of a given feature.
  • path.bounds - compute the projected planar bounding box of a given feature.
  • path.centroid - compute the projected planar centroid of a given feature.
  • path.measure - compute the projected planar length of a given feature.
  • path.projection - set the geographic projection.
  • path.context - set the render context.
  • path.pointRadius - set the radius to display point features.

Projections

Raw projections

Spherical Math

  • d3.geoArea - compute the spherical area of a given feature.
  • d3.geoBounds - compute the latitude-longitude bounding box for a given feature.
  • d3.geoCentroid - compute the spherical centroid of a given feature.
  • d3.geoDistance - compute the great-arc distance between two points.
  • d3.geoLength - compute the length of a line string or the perimeter of a polygon.
  • d3.geoInterpolate - interpolate between two points along a great arc.
  • d3.geoContains - test whether a point is inside a given feature.
  • d3.geoRotation - create a rotation function for the specified angles.
  • rotation - rotate the given point around the sphere.
  • rotation.invert - unrotate the given point around the sphere.

Spherical Shapes

Streams

Transforms

Clipping

Hierarchies (d3-hierarchy)

Layout algorithms for visualizing hierarchical data.

Interpolators (d3-interpolate)

Interpolate numbers, colors, strings, arrays, objects, whatever!

Paths (d3-path)

Serialize Canvas path commands to SVG.

Polygons (d3-polygon)

Geometric operations for two-dimensional polygons.

Quadtrees (d3-quadtree)

Two-dimensional recursive spatial subdivision.

Random Numbers (d3-random)

Generate random numbers from various distributions.

Scales (d3-scale)

Encodings that map abstract data to visual representation.

Continuous Scales

Map a continuous, quantitative domain to a continuous range.

Sequential Scales

Map a continuous, quantitative domain to a continuous, fixed interpolator.

Diverging Scales

Map a continuous, quantitative domain to a continuous, fixed interpolator.

Quantize Scales

Map a continuous, quantitative domain to a discrete range.

Ordinal Scales

Map a discrete domain to a discrete range.

Selections (d3-selection)

Transform the DOM by selecting elements and joining to data.

Selecting Elements

Modifying Elements

Joining Data

Handling Events

Control Flow

Local Variables

Namespaces

Shapes (d3-shape)

Graphical primitives for visualization.

Arcs

Circular or annular sectors, as in a pie or donut chart.

Pies

Compute the necessary angles to represent a tabular dataset as a pie or donut chart.

Lines

A spline or polyline, as in a line chart.

Areas

An area, defined by a bounding topline and baseline, as in an area chart.

Curves

Interpolate between points to produce a continuous shape.

A smooth cubic Bézier curve from a source to a target.

Symbols

A categorical shape encoding, as in a scatterplot.

Stacks

Stack shapes, placing one adjacent to another, as in a stacked bar chart.

Time Formats (d3-time-format)

Parse and format times, inspired by strptime and strftime.

Time Intervals (d3-time)

A calculator for humanity’s peculiar conventions of time.

Timers (d3-timer)

An efficient queue for managing thousands of concurrent animations.

  • d3.now - get the current high-resolution time.
  • d3.timer - schedule a new timer.
  • timer.restart - reset the timer’s start time and callback.
  • timer.stop - stop the timer.
  • d3.timerFlush - immediately execute any eligible timers.
  • d3.timeout - schedule a timer that stops on its first callback.
  • d3.interval - schedule a timer that is called with a configurable period.

Transitions (d3-transition)

Animated transitions for selections.

Zooming (d3-zoom)

Pan and zoom SVG, HTML or Canvas using mouse or touch input.

© 2010–2022 Michael Bostock
Licensed under the BSD License.
https://github.com/d3/d3/blob/master/API.md