D3.js

As explained in Everyday Data Visualization

D3.js is a free, open-source JavaScript library for producing dynamic, data-driven documents and visualizations in web browsers.

D3.js—also called D3 or Data-Driven Documents—is a free, open-source JavaScript library for creating dynamic, data-driven visualizations in web browsers. It combines web standards with a flexible, sometimes pleasantly wordy, approach to chart construction. section 1.5.3

D3.js is especially useful when you need to:

• Create custom browser visualizations using SVG, HTML5, and CSS. section 1.5.3
• Choose only the library components a visualization needs instead of importing everything. section 1.5.3
• Work alongside front-end frameworks such as React or Angular. section 1.5.3

A basic bar chart

A simple fruit-data bar chart can be created in roughly 50 lines of D3.js code. D3 visualizations also appear in web publications such as The New York Times. section 1.5.3

Figure 1.9 A basic bar chart created in d3.js

Use the figure to inspect a basic D3.js bar chart built from fruit data. section 1.5.3

How Everyday Data Visualization covers it

How deep it goes

Demonstrates a basic bar chart and core technologies, but defers coding instruction and detailed implementation.

Examples

Uses fruit data, a basic bar chart, and web visualizations such as those published by The New York Times.

What it assumes

Assumes some comfort with JavaScript and asynchronous behavior while explicitly avoiding foundational coding instruction.

What you can do after

Build a basic browser bar chart with D3.js using approximately 50 lines of code.

How it connects

Connects JavaScript, SVG, HTML5, CSS, React, Angular, and asynchronous browser behavior.

liveBookmanning.com

Read Everyday Data Visualization on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  D3.js in Action, Third EditionD3.js is a JavaScript library for binding data to documents and creating interactive, customizable visualizations in web browsers.
• 

  liveBookmanning.com
  Build Financial Software with Generative AI (From Scratch)D3.js is a JavaScript library for binding data to documents and creating dynamic, interactive data visualizations.

Compare how 3 books explain D3.js →

Related concepts

• SVGuses · SVG, or Scalable Vector Graphics, is an XML-based standard and file format for describing scalable, resolution-independent two-dimensional vector graphics.
• JavaScriptuses · JavaScript is a high-level, dynamically typed, multi-paradigm programming language standardized as ECMAScript and used for web and general-purpose programming.
• selection.attr()uses · A D3 selection method that gets or sets attributes on elements in a selection, optionally deriving values from bound data.
• CSSuses · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
• HTMLuses · HTML (HyperText Markup Language) is the standard markup language for structuring content and elements in web documents.
• DOM manipulationuses · DOM manipulation is the programmatic inspection or modification of nodes, attributes, content, styles, or structure in a document object model.

This explainer was generated by Manning's knowledge graph from the text of Everyday Data Visualization. The section links point to the parts of the book it draws on.