Coder Social home page Coder Social logo

D3: Data-Driven Documents

D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.



If you use npm, npm install d3. You can also download the latest release on GitHub. For vanilla HTML in modern browsers, import D3 from Skypack:

<script type="module">

import * as d3 from "[email protected]";

const div = d3.selectAll("div");


For legacy environments, you can load D3’s UMD bundle from an npm-based CDN such as jsDelivr; a d3 global is exported:

<script src="[email protected]"></script>

const div = d3.selectAll("div");


You can also use the standalone D3 microlibraries. For example, d3-selection:

<script type="module">

import {selectAll} from "[email protected]";

const div = selectAll("div");


D3 is written using ES2015 modules. Create a custom bundle using Rollup, Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules:

import {scaleLinear} from "d3-scale";

Or import everything into a namespace (here, d3):

import * as d3 from "d3";

Or using dynamic import:

const d3 = await import("d3");

You can also import individual modules and combine them into a d3 object using Object.assign:

const d3 = await Promise.all([
]).then(d3 => Object.assign({}, ...d3));

D3's Projects

d3 photo d3

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

d3-array photo d3-array

Array manipulation, ordering, searching, summarizing, etc.

d3-axis photo d3-axis

Human-readable reference marks for scales.

d3-brush photo d3-brush

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

d3-cam16 photo d3-cam16

A d3 implementation of the CIECAM16 color appearance model.

d3-chord photo d3-chord

Visualizations relationships or network flow with a circular layout.

d3-color photo d3-color

Color spaces! RGB, HSL, Cubehelix, CIELAB, and more.

d3-contour photo d3-contour

Compute contour polygons using marching squares.

d3-delaunay photo d3-delaunay

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

d3-dispatch photo d3-dispatch

Register named callbacks and call them with arguments.

d3-drag photo d3-drag

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

d3-dsv photo d3-dsv

A parser and formatter for delimiter-separated values, such as CSV and TSV.

d3-ease photo d3-ease

Easing functions for smooth animation.

d3-force photo d3-force

Force-directed graph layout using velocity Verlet integration.

d3-geo photo d3-geo

Geographic projections, spherical shapes and spherical trigonometry.

d3-hcg photo d3-hcg

The HCG (Hue, Chroma, Grayness) color space derived from the Munsell color system.

d3-hexbin photo d3-hexbin

Group two-dimensional points into hexagonal bins.

d3-hierarchy photo d3-hierarchy

2D layout algorithms for visualizing hierarchical data.

d3-hsv photo d3-hsv

The HSV (Hue, Saturation, Value) color space.

d3-hull photo d3-hull

DEPRECATED; see d3-polygon’s hull function.

d3-interpolate photo d3-interpolate

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.