This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

See the Data Visualization column for a series of articles

reference

D3 developers created an online data visualization development environment, Observable, which is similar to Jupyter NoteBook. It divides the code into cells and executes the code according to the cells, which is convenient for debugging while writing the code and combining data analysis and visualization. It also provides a Folk function similar to Github to reuse code shared by others.

See this article for more information about Observables at 💡.

It’s also a community for sharing visualizations. In addition to viewing official samples, you can also find great visualizations by other developers.

  • D3 website
  • D3 making warehouse
  • Introduction to D3.js | Workshop: Introduction to D3.js
  • Learn D3
  • Let’s Make a Bar Chart
  • D3 Official sample
  • D3.js Chinese document (unofficial)

D3.js, which is called Data-Driven Documents, is a JS library that manipulates DOM based on Data.

It can bind almost any data to the DOM document object model, and then calculate the corresponding DOM property values based on the data to “drive” DOM changes.

💡 this is similar to the JS framework Vue

The characteristics of

It is very flexible because D3 only generates the most basic, low-level elements of a graphical language, such as points, lines, and planes, and developers are free to use these basic graphical elements to build concrete diagrams as needed.

It is not a framework, so there are no restrictions on writing code and manipulating DOM elements. It follows existing Web standards and can be used in combination with various technologies provided by modern browsers, such as HTML, CSS, SVG, and Canvas, to better present data.

Various examples of official implementations can be viewed here:

  • Rectangular tree graph treemap
  • Hierarchical Edge Bundling
  • This is the Sankey diagram
  • Density contours
  • Force-directed graph
  • There are all kinds of maps

It is fast and supports manipulation of large data sets. Implement a variety of interesting animations with D3 to help tell the story behind the data; It can also provide dynamic interaction for data visualization and encourage users to explore data:

  • Dynamic Bar Chart Race
  • Animated Treemap
  • Hierarchical Bar Chart that supports Hierarchical driller interaction
  • Collapsible Tree supports Collapsible interaction
  • Zoomable Sunburst supports drum-down interaction
  • Zoomable Treemap: Supports Treemap interaction
  • Zoomable Circle Packing supports Zoomable Circle Packing
  • Brushable Scatterplot Matrix supports Brushable Scatterplot Matrix
  • Zoomable Area Chart supports zooming interaction

It’s wildly popular. Check out the number of stars in D3’s Github repository and daily downloads of D3 in NPM since 2015. Official and community developers offer a wide range of visualizations for a variety of scenarios, such as more than 30 modules that make it easy to build complex visualizations.

💡 D3 5+ supports modern browsers, while D3 4 supports IE 9+ and older VERSIONS of D3 support older browsers.

💡 D3 provides a large number of modules, it is difficult to get started and generate basic graphic elements. Although the degree of freedom is very high, it requires a large amount of code to build a complete chart. If you want to quickly generate common statistical charts based on data, you can use more sophisticated tools such as Observable Plot, another tool developed by the D3 team, or Vega-Lite, another open source visualization tool

The development environment

There are several ways to introduce the D3 library into a project

  • Download the source code locally from the official website or Github, and introduce native JavaScript files into your project

  • Introduce projects as modules through package management tools

    Enter the following command on the terminal to install d3.js and its dependent packages

    # for npm
npm install d3 --save

# for yarn
yarn add d3 --save
Copy the code

    Import d3.js in your project

    <script type="module">
// Import all modules of d3.js
import * as d3 from "d3";
// Select all div elements of the page with d3
const div = d3.selectAll("div");
</script>
Copy the code

  • Through CDN import (note the version number referenced), you can use the source provided on the official website

    <script src="https://d3js.org/d3.v7.js"></script>

<! -- minified version -->
<script src="https://d3js.org/d3.v7.min.js"></script>
Copy the code

    💡 can also use sources provided by other services such as jsDelivr, CDNJS, or UNPKG

D3 is composed of various modules, and some modules in D3 can be introduced separately according to the needs of the project, for example, d3-Selection can be used separately:

  • Import using CDN
<script src="https://d3js.org/d3-selection.v3.js"></script>
Copy the code
  • When building with the packaging tool
// Load the D3 Scale module scaleLinear function in the project
import {scaleLinear} from "d3-scale";
Copy the code

💡 D3 can also run in Node and Web Workers environments. But in the Node environment you need to provide your own DOM, for example using JSDOM.

// Introduce D3 in the Nodejs environment
const d3 = require("d3");
Copy the code

It is also possible to import multiple modules and then consolidate them into an Object named D3 using object.assign

const d3 = Object.assign({},
    require("d3-format"),
    require("d3-geo"),
    require("d3-geo-projection"));
Copy the code