GithubHelp home page GithubHelp logo

D3: Data-Driven Documents

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. For more than a decade D3 has powered groundbreaking and award-winning visualizations, become a foundational building block of higher-level chart libraries, and fostered a vibrant community of data practitioners around the world.

Resources

Installing

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 jsDelivr:

<script type="module">

import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

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

</script>

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="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script>

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

</script>

You can also use D3 modules individually. For example, d3-selection:

<script type="module">

import {selectAll} from "https://cdn.jsdelivr.net/npm/d3-selection@3/+esm";

const div = selectAll("div");

</script>

D3 is written using ES 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([
  import("d3-format"),
  import("d3-geo"),
  import("d3-geo-projection")
]).then((d3) => Object.assign({}, ...d3));

D3's Projects

d3 icon d3

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

d3-array icon d3-array

Array manipulation, ordering, searching, summarizing, etc.

d3-axis icon d3-axis

Human-readable reference marks for scales.

d3-brush icon d3-brush

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

d3-cam16 icon d3-cam16

A d3 implementation of the CIECAM16 color appearance model.

d3-chord icon d3-chord

Visualizations relationships or network flow with a circular layout.

d3-color icon d3-color

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

d3-contour icon d3-contour

Compute contour polygons using marching squares.

d3-delaunay icon d3-delaunay

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

d3-dispatch icon d3-dispatch

Register named callbacks and call them with arguments.

d3-drag icon d3-drag

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

d3-dsv icon d3-dsv

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

d3-ease icon d3-ease

Easing functions for smooth animation.

d3-force icon d3-force

Force-directed graph layout using velocity Verlet integration.

d3-geo icon d3-geo

Geographic projections, spherical shapes and spherical trigonometry.

d3-hcg icon d3-hcg

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

d3-hexbin icon d3-hexbin

Group two-dimensional points into hexagonal bins.

d3-hierarchy icon d3-hierarchy

2D layout algorithms for visualizing hierarchical data.

d3-hsv icon d3-hsv

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

d3-hull icon d3-hull

DEPRECATED; see d3-polygon’s hull function.

d3-interpolate icon 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.