Connect to your data instantly Pull live data from the cloud, files, and databases into one secure place — without installing anything, ever.

D3 (or D3.js) is a free, open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics.

Getting started D3 works in any JavaScript environment. Try D3 online The fastest way to get started (and get help) with D3 is on Observable! D3 is available by default in notebooks as part of Observable’s standard library. To create something with D3, return the generated DOM element from a cell. Here is a blank chart to get you started:

d3-shape Visualizations can be represented by discrete graphical marks such as symbols, arcs, lines, and areas. While the rectangles of a bar chart may sometimes be simple, other shapes are complex, such as rounded annular sectors and Catmull–Rom splines. The d3-shape module provides a variety of shape generators for your convenience.

Don’t worry if your code is messy or unfinished; sharing drafts normalizes the challenges that everyone experiences doing data visualization. Upvote 👍 or comment on GitHub issues.

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. d3-hierarchy Layout algorithms for visualizing hierarchical data. d3.hierarchy - constructs a root node from hierarchical data.

Brushing is often used to select discrete elements, such as dots in a scatterplot or files on a desktop. It can also be used to zoom-in to a region of interest, or to select continuous regions for cross-filtering data or live histograms: The d3-brush module implements brushing for mouse and touch events using SVG.

Pack Examples · Enclosure diagrams use containment (nesting) to represent a hierarchy. The size of the leaf circles encodes a quantitative dimension of the data. The enclosing circles show the approximate cumulative size of each subtree, but due to wasted space there is some distortion; only the leaf nodes can be compared accurately.

Treemap Examples · Introduced by Ben Shneiderman in 1991, a treemap recursively subdivides area into rectangles according to each node’s associated value. D3’s treemap implementation supports an extensible tiling method: the default squarified method seeks to generate rectangles with a golden aspect ratio; this offers better readability and …

Examples · The tree layout produces tidy node-link diagrams of trees using the Reingold–Tilford “tidy” algorithm, improved to run in linear time by Buchheim et al. Tidy trees are typically more compact than dendrograms. tree () Source · Creates a new tree layout with default settings. tree (root) Source · Lays out the specified root hierarchy, assigning the following properties on ...