d3

What is d3?

D3.js (or just D3 for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It helps in manipulating documents based on data and uses HTML, SVG, and CSS to bring data to life. D3's emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework.

What are d3's main functionalities?

Data Binding

D3 allows you to bind data to the DOM (Document Object Model), and then apply data-driven transformations to the document. In this code sample, we select paragraph elements and bind them to an array of numbers, setting their text content to the bound data.

const data = [1, 2, 3, 4];
const p = d3.select('body').selectAll('p').data(data).text(d => d);

Creating and Manipulating SVG

D3 can create and manipulate SVG elements for complex visualizations. This code sample creates an SVG element and appends a blue circle to it.

const svg = d3.select('body').append('svg').attr('width', 100).attr('height', 100);
svg.append('circle').attr('cx', 50).attr('cy', 50).attr('r', 40).style('fill', 'blue');

Dynamic Properties and Transitions

D3 makes it easy to apply dynamic styles and transitions to elements. Here, all circles in the document are transitioned to a red fill color over 750 milliseconds.

d3.selectAll('circle').transition().duration(750).style('fill', 'red');

Data-Driven Document Transformations

D3 can load external data sources like CSV files and use them to drive document transformations. In this example, data from a CSV file is used to create and append paragraph elements to the body of the document.

d3.csv('data.csv').then(data => {
  d3.select('body').selectAll('p').data(data).enter().append('p').text(d => d.value);
});

Interactivity and Event Handling

D3 provides powerful event handling for interactive visualizations. This code sample adds a click event listener to all paragraph elements, changing their background color to yellow when clicked.

d3.select('body').selectAll('p').on('click', function(event, d) {
  d3.select(this).style('background-color', 'yellow');
});

Other packages similar to d3

chart.js

Chart.js is a simple yet flexible JavaScript charting library. It provides a variety of chart types and is easy to use, but it is less customizable and has fewer features for complex visualizations compared to D3.

highcharts

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts is more focused on charting and less on arbitrary graphics or complex data-driven transformations than D3.

c3

C3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. It simplifies the process of creating charts by providing a layer of abstraction over D3, but it is less flexible for creating highly customized visualizations.

vega

Vega is a visualization grammar, a declarative language for creating, saving, and sharing interactive visualization designs. It can be seen as a higher-level visualization tool that abstracts away much of the complexity of D3, but with less direct control over the final output.

README

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.

Resources

• Introduction
• API Reference
• Releases
• Examples
• Wiki

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

<script type="module">

import * as d3 from "https://cdn.skypack.dev/d3@7";

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 the standalone D3 microlibraries. For example, d3-selection:

<script type="module">

import {selectAll} from "https://cdn.skypack.dev/d3-selection@3";

const div = selectAll("div");

</script>

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