Open Source Adventures: Episode 28: Introduction to D3

#javascript #d3

D3 is a JavaScript framework for data visualization. I've used it a bit a while back, even created Opal Ruby bindings, but that was many versions ago.

So let's see what it's like now.

What is D3 even

D3 has far more disjointed set of functionality than most libraries or frameworks. It basically contains anything that could possibly be used for data visualization.

Here's just some of the many things you can find in D3:

color manipulation functions
data fetching
data interpolation system
extra data structures like d3.set and d3.map
extra functionality for existing JavaScript arrays like max, mean, quantile etc.
generate random numbers from various distributions
geographical data handling system
jQuery-like data manipulation framework
parsers for formats like CSV
printf like formatting
scale system
timer management
visualization components for various types of data

Back in the days, it used to be a single library doing all those things. Later it got separated into multiple separate packages, as these tasks are mostly not very related. Quite a few of them are deprecated, for example there's no real need to use d3.set now that JavaScript has standard Set built-in.

How to use D3

You can either get the latest D3 as a single-file script like in the olden days, or go through npm and bundlers, only requiring the parts you need, at cost of additional complexity.

After that there are two ways to use D3:

use data manipulation parts of D3, and also its jQuery-style framework to integrate that data with the DOM
use data manipulation parts of D3, and one of standard frameworks like React or Svelte to interact with the DOM