DEV Community

Tomasz Wegrzanowski
Tomasz Wegrzanowski

Posted on

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:

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.

Top comments (2)

projektorius96 profile image
Lukas Gaucas

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

taw profile image
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.