DOCSEARCHbyAlgolia
Submit Docs

D3.js Documentation

website·Indexed 19 days ago

https://d3js.org/

D3 (Data-Driven Document) is a free, open-source JavaScript library for visualizing data. It provides a low-level toolbox for manipulating the DOM, including modules for selections, transitions, scales, shapes, geographic projections, and temporal data handling.

Tokens
91.4K
Snippets
608
Records
821
Agent score
99%

What's inside D3.js

  1. Overview of d3-scale-chromatic color schemes

    The d3-scale-chromatic module provides a collection of sequential, diverging, and categorical color schemes. These schemes are designed to be used in conjunction with d3-scale functions, specifically d3.scaleOrdinal for categorical data and d3.scaleSequential for continuous data. Most schemes are based on Cynthia A. Brewer's ColorBrewer; sequential and diverging scales are interpolated using uniform B-splines to provide smooth transitions between discrete ColorBrewer steps.

  2. Overview of d3-force simulation

    The d3-force module implements a velocity Verlet numerical integrator to simulate physical forces on particles. It is primarily used to create force-directed graphs, visualize hierarchies, or resolve collisions in bubble charts. The general workflow involves creating a simulation for an array of nodes, applying specific forces (such as center, collide, link, many-body, or position forces), and listening for 'tick' events to update the rendering in a graphics system like SVG or Canvas.

  3. Overview of D3 Position Forces

    Position forces push nodes toward a desired target position. The force strength is proportional to the distance between the node's current position and the target. While they can be used for individual nodes, they are primarily intended as global forces applying to most nodes in a simulation.

  4. Overview of d3-array utilities

    The d3-array module provides a collection of functions for manipulating, ordering, searching, and summarizing arrays. Key capabilities include:

    • Precision addition of floating point values
    • Binning discrete samples into continuous intervals
    • Fast value lookup in sorted arrays (bisecting)
    • Blurring quantitative values
    • Grouping discrete values
    • Interning non-primitive values (e.g., Dates) for use in maps and sets
    • Logical set operations
    • Array sorting and reordering
    • Computing summary statistics
    • Generating representative tick values from a continuous interval
    • Transforming arrays to derive new ones

  5. Overview of d3-timer

    The d3-timer module provides an efficient queue for managing thousands of concurrent animations with synchronized timing. It uses requestAnimationFrame for fluid animation when available, falling back to setTimeout for delays longer than 24ms. This ensures that animations are consistent and synchronized across the page.

  6. Overview of d3-time intervals

    The d3-time module provides an API for calendar math that accounts for the irregularities of the Gregorian calendar, such as varying month lengths and daylight saving time. It defines 'intervals' (e.g., d3.timeDay, d3.timeMonth, d3.timeWeek) which are used to calculate boundary dates and generate sequences of dates. It operates on native ECMAScript Date objects and supports local time zones and UTC.

  7. Overview of d3.scalePoint

    Point scales are used to map a discrete set of values (ordinal or categorical) to a continuous range. They are essentially band scales with a bandwidth of zero, making them ideal for scatterplots where points need to be placed at specific intervals along an axis.

  8. Overview of the d3-force Center force

    The center force translates nodes uniformly so that the mean position of all nodes (the center of mass, assuming equal weight) is maintained at a specific ⟨x, y⟩ position. Unlike position forces, it does not distort the relative positions of nodes. It modifies node positions directly on each application rather than modifying velocities, which prevents nodes from overshooting and oscillating around the center. This is primarily used to keep a simulation centered within a viewport.

  9. Overview of d3-geo for geographic projections

    d3-geo is used to project spherical geometry (represented as GeoJSON) onto a 2D plane. Unlike simple point transformations, d3-geo handles discrete geometry (polygons and polylines) by treating edges as geodesics (great circle segments). To balance accuracy and performance, D3 employs adaptive sampling for interpolation along these arcs. The module supports various map projections and allows for geometry rotation to adjust the aspect of any projection.

  10. Overview of d3-scale for data visualization

    d3-scale provides functions to map a dimension of abstract data to a visual representation. While commonly used for mapping data to positions (e.g., time and temperature to X and Y coordinates in a scatterplot), scales can be used for any visual encoding, including color, stroke width, or symbol size. They support various data types, including quantitative, time-series, categorical, and discrete data.

  11. Overview of D3.js

    D3 (Data-Driven Documents) is a free, open-source JavaScript library for creating dynamic, data-driven visualizations. Unlike traditional charting libraries, D3 is a low-level toolbox consisting of approximately 30 discrete modules. It does not provide pre-built "charts" but instead provides primitives that developers compose to build custom visualizations using web standards like SVG, Canvas, and the Document Object Model (DOM).

  12. Overview of d3-polygon

    The d3-polygon module provides basic geometric operations for two-dimensional polygons. In this module, a polygon is represented as an array of two-element arrays (e.g., [[x0, y0], [x1, y1], ...]). Polygons can be closed (first and last points are identical) or open. By convention, polygons are typically defined in counterclockwise order, assuming a coordinate system where the origin (0,0) is in the top-left corner.