Open Source Adventures: Episode 28: Introduction to 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

Coming next

In the next few episodes, I'll write a few D3 visualizations, with different design patterns - D3+cdn, D3+npm, D3+React, D3+Svelte, and so on.

Comments

[LG]

I've was following Svelte + D3 for Electron, maybe you could do more concrete examples of D3 ? Follow up thereto !

[Tomasz Wegrzanowski]

Yes, I plan to make some D3 apps here. But first a few examples how to setup D3, as there are quite a few ways.