
How to learn D3.js - slowhand09
https://wattenberger.com/blog/d3
======
greenail
D3.js is great, DC.js is amazing. [https://github.com/dc-
js/dc.js](https://github.com/dc-js/dc.js)

DC combines D3 and crossfilter for multidimensional filtering so you easily do
things like click an element to use it as a filter for your other elements.

~~~
krikou
Shameful plug here - and yes dc.js is great! An alternative web-component
based approach to dc.js is available here:
[https://github.com/PolymerEl/multi-verse](https://github.com/PolymerEl/multi-
verse). It is still based on Polymer 2.0, migration to lit-element in the way.

~~~
_coveredInBees
I recall seeing your project almost 2 years ago. A bit of unsolicited advice -
It would _really_ help if your Github and docs page linked to a few actual
interactive examples showcasing the different chart types supported, and the
general capabilities of your library. Screenshots really don't do justice to
projects like dc.js and your lib that hinge on interactions between users and
charts/data.

It also appears that your demo for multi-chart is:

1\. Broken

2\. Blocked by most browsers and requires manual override of security
suggestions (probably related to https and some sort of cross-domain things
going on).

I'd be curious to see any working examples like the one dc.js has on it's main
doc page. Cheers

~~~
krikou
Thanks a lot for your advice! Live demo used to be working on
webcomponents.org - one service powering them has stopped working...

I launched this approx 2 years ago - using it in prod, but not had proper time
to devote on better doc/demo/presentation. Looking forward to it during
current migration to lit-element.

~~~
_coveredInBees
Awesome. Sounds good. Best of luck! I know that it's hard to find time for any
of this stuff when it's all a labor of love in your free time.

------
dlivingston
As someone involved in computational geoscientific research, finding new ways
to visualize and present data is a persistent challenge. We don't use
Javascript much (read: ever) in day-to-day work, but I think there is enormous
potential there for viz of post-processed data.

This article gives a great intro to D3.js, and I'll be looking into it more. A
colleague also recently showed me Dash by Plotly [0] which may be of interest
to folks in a similar situation.

[0]: [https://dash-gallery.plotly.host/Portal/](https://dash-
gallery.plotly.host/Portal/)

~~~
mikepurvis
My issue with D3 and other DOM-oriented systems is that it's rare I have a
small enough amount data that it would work for them. There's a certain amount
preparation and filtering that can be done, but particularly with time-series
or geographic data, if you're in exploratory mode, you want to be able to
slice and dice as part of the interactive browser presentation.

~~~
k__
As far as I know, D3 can also render into a canvas, which should eliminate the
DOM/SVG nodes overhead.

~~~
MurrayHill1980
Yes, in my experience this can get to considerable scale (hundreds of
thousands and beyond) but at a price. You need to do all your own management
for things DOM/SVG were doing (e.g. hit detection, styling). You still need to
send the data to the client and probably store it locally (customers will
enjoy learning how to start Chrome from the command line with flags like
--args --js-flags="\--max_old_space_size=8192"). The client environment still
doesn't have much support for data management or processing unless you bring
in some other JS libraries. I'm a big fan of JS development but the criticism
is on target.

~~~
k__
True story.

There is no endless RAM, even for browsers :)

DOM-nodes are rather heavy compared to simple JS objects, so getting rid of
them can bring some visualizations that are too heavy for the browser back
into the realm of doable.

After that you have to optimize your other data-structures. If you have
objects with many boolean fields or strings that are essentially used as
enums, you can try to replace them with bit-fields, I read some library
creators (BlueBird promise) got much performance gains with them.

------
zepearl
Just fyi

I used d3.js back in 2016 and it was already at that time very nice, but I
always had problems to keep control of it (a lot of code and the end-results
sometimes didn't work 100% as intended as my code did not cover all possible
constellations of potential input data).

If I remember correctly after a while I then tried Cytoscape (
[https://cytoscape.org](https://cytoscape.org) ) and coding was a lot simpler
and the results were more stable. I then dropped the project but I left with a
positive impression of Cytoscape. There was maybe as well some other good
candidate, but I just cannot remember anymore... (something that was doing at
that time initial experiments with WebGL as optional/secondary output-engine -
was it Cytoscape or something else?) .

Of course if you need max flexibility and very special results then D3 is #1.

~~~
cqz
For anyone confused by the link - Cytoscape confusingly exists as both a
javascript library and a Java desktop application. Cytoscape the desktop
application is a very biology-focused network visualization/analysis platform,
whereas Cytoscape.js is a pretty general purpose network/graph library. You
can find Cytoscape.js at
[[https://js.cytoscape.org/](https://js.cytoscape.org/)].

------
jordigh
D3.js was surprisingly pleasant for me to work with. It made it pretty easy to
implement x-splines.

[https://jordi.platinum.edu.pl/xsplines/splines.html](https://jordi.platinum.edu.pl/xsplines/splines.html)

Some day, I should try to work and get x-splines into more drawing programs; I
really do find them a lot easier to work with than other kinds of splines.

~~~
wattenberger
this is really great, thanks for sharing! I like the linked Papers We Love
slides - wish I could have seen the presentation!

~~~
jordigh
Yeah, for better or for worse, talks are intentionally not recorded. The idea
is that this way people will be less afraid of asking questions and it's more
of a guided discussion than a one-way presentation.

~~~
wattenberger
that makes total sense, and I love the concept. (even though I also want the
recording of the presentation!)

------
victor106
Great intro. I got the book and it was really good. I don't know or have any
association with them, just a satisfied user.

~~~
slowhand09
Good to know. I got the free 1st Chapter and am considering the entire book.
D3.js is awesome. You buy the std or the deluxe version?

~~~
ahstilde
I've gotten the React and RN books from FullStack. I reference them regularly
because they're both great workbooks and reference books. I'm sure
Wattenberger's D3.js book is similarly exceptional.

~~~
fjp
What kind of experience level would you recommend the React book too?

I've done small frontends in Angular 1, pure JS, jQuery, and fiddled around
with newer Angular and Vue. While I found Vue pretty intuitive, I kind of got
stuck jumping from the little tutorial components to a full page - how to
organzie components, the code modules themselves, etc.

It seems React is eating the frontend world, so I've always kind of kept it on
my to-to list.

------
shaklee3
Can someone familiar with d3 describe why you'd use it instead of the many
libraries that use it under the hood? For example, I think either bokeh or
plotly uses it, but you don't have to learn any of the d3 details, and also
have more capabilities like webgl.

~~~
zaphod4prez
One of the frustrating things w this whole ecosystem is you basically have two
choices:

* Use one of those higher-level libraries (bokeh, plotly) to create a chart that looks exactly like every other chart made by that library

* If you need to do _anything_ custom, at all, you end up having to build from the ground up w d3.

In other words, those libraries are super cool and I use them on the reg, but
they offer little to no customization, so people very often end up back at the
bare-metal build-it-yourself-w-d3.

~~~
nicolaskruchten
I can't speak for other libraries, but Plotly is extremely customizable: you
can change pretty much color, font, dimension etc. There are thousands of
attributes which can be tweaked, from the length of the tick markers to the
exact positioning of the titles, the shapes of the markers, etc.

Here's the full Javascript reference for all of these attributes:
[https://plot.ly/javascript/reference/](https://plot.ly/javascript/reference/)

------
flyGuyOnTheSly
OK so I have been dreading doing some graphing work for too long now and am
curious if anyone can help point me in the right direction.

How would you go about creating a live stock chart graph with D3.js?

All of the tutorials I have read assumed that the graph data was set in stone.
Take this data, produce this graph.

I have created a few mathematical indicators for equity price predictions
based on live data feeds, and I want to visualize them in real time in a
graph.

Do you just keep rebuilding the graph every time a new datapoint comes in?

~~~
tolien
Mike Bostock's got some examples of charts that update without redrawing the
whole thing (for example [1]) - you update the bound data and the
bars/points/whatever to be removed/added fall out "magically". The term you're
looking for is the "data join" [2].

1: [https://bost.ocks.org/mike/path/](https://bost.ocks.org/mike/path/)

2:
[https://www.tutorialspoint.com/d3js/d3js_data_join.htm](https://www.tutorialspoint.com/d3js/d3js_data_join.htm)

------
pixelmonkey
Super detailed and interactive exploration of the whole D3.js API. Beautiful
to click through, insightful to read!

------
mrec
Minor bug report in case the author's reading: in the "maps-and-globes"
section it says "Change the projection in the dropdown below to see how they
differ" but starts out with that dropdown populated with geoAzimuthalEqualArea
while showing the projected map for geoMercator.

~~~
wattenberger
ah! thanks for flagging that, just fixed it.

------
thecleaner
Anyone know articles on how to integrate d3 with virtual-dom libraries like
ReactJs ?

~~~
status_quo69
No article, but I've done it. You basically have to take on a lot of the
creation of the SVG element tags yourself, since having both D3 and React
manage the DOM is a bit awkward. However, a lot of D3 functions already give
back most of the properties that you need to construct the DOM anyways. For
example, the classic sunburst chart (example here:
[https://observablehq.com/@d3/zoomable-
sunburst](https://observablehq.com/@d3/zoomable-sunburst)) can be constructed
from the section of code that contructs and partitions the hierarchy:

    
    
        partition = data => {
          const root = d3.hierarchy(data)
             .sum(d => d.value)
              .sort((a, b) => b.value - a.value);
          return d3.partition()
              .size([2 * Math.PI, root.height + 1])
            (root);
        }
    

Some downsides to this:

* Zooming is non-trivial, you have to recreate it in React proper

* React has to re-render entire hierarchies or massive lists depending on the traversal method that you choose to use for hierarchical datasets (topological or depth first) and React chokes on these pretty easily since they tend to be wide and flat

* Quickly changing data sets can't really benefit from memoization or React.memo, since the layouts themselves will constantly change. It makes things a bit awkward when mixing with memoizable data.

However, once we got the groundwork down, we never really had to touch it
again. It was much easier to maintain than the pure d3 implementation using
useEffect or componentDidMount, since we didn't have to deal with any sort of
DOM state ourselves any more.

------
samtimalsina
I've been meaning to spend some time with D3.js for a side project.
Bookmarking this, casually scanning this it looks like it's exactly what I
needed. How's the book different from the web intro?

~~~
wattenberger
Good question! This is meant more as an overview, whereas the book dives right
into practical examples, while gradually weaving the basic concepts in. The
book is a lot more extensive and detailed, and gets into data visualization
fundamentals and more advanced concepts.

If you're curious, the first chapter is free to download and gives a good
sense of the flow:

[https://www.newline.co/fullstack-d3](https://www.newline.co/fullstack-d3)

------
sct202
I love using d3 to make visualizations, the only bad thing about it is that so
many demos and tutorials seem to have been made on v3 which requires some
minor adjustments to get the same code working on v4+.

~~~
chimi
The breaking changes from V3 to V4 was a real problem, imo. A lot of it was
the same functionality just reorganized.

A better approach would have been to leave the old code running with stubs to
the new method signatures. As it is, if you want to migrate code from V3 to
V4, it takes a lot of mostly annoying and tedious work that could have been
done once by a little bit of code that calls the new code from the old method
signature. Have a d3V3toV4.js translator library in there if you want, but
don't make people update years of code to get on the latest versions of the
API.

------
zmmmmm
This looks beautiful but it doesn't seem to directly attack the main
conceptual barriers that I find people run into with D3. These are: how its
API is driven in a declarative functional style rather than imperative, and
properly understanding the mapping from data space into the domain/range of
the plot. Without getting these concepts right up front it can be really
confusing. I would introduce those ideas first right up front before talking
about the other parts.

~~~
marble-drink
Yep. There is no point at all knowing anything that is presented here without
understanding how the API actually works from a high level. For me it was an
"aha" moment when suddenly everything made sense (and I realised how nice d3
actually is).

The other big problem with d3 is that you don't get much for free with it.
Many people are surprised that you have to draw a bar chart using rectangles.
But d3 doesn't "draw graphs", it just maps values from your data into
attributes in the DOM. You have to know HTML, SVG, CSS, and, of course,
Javascript very well already to have any success with d3.

------
bitcurious
Back in the day I learned d3 by reading a tutorial by Scott Murray [1]. It was
perfect for me as it also covered the basics of javascript itself, which I
hadn't used prior. It's written for v3 of d3.js, so a bit out of date now, I
still wanted to give it a shout out - thanks Scott!

[1]
[https://alignedleft.com/tutorials/d3](https://alignedleft.com/tutorials/d3)

------
therein
Nicely paced intro to D3.js except for the part where it matters the most. The
`d3-selection` section where this guide introduces "the pattern", things begin
to go downhill as the author loses the audience they claim to be targeting.

`.enter()` and `.exit()` is not covered at all, simply outsourced to the
guide/demo by Mike Bostock, which is actually a really nice demo however it
also omits explaining the mechanism.

~~~
wattenberger
Thanks for the feedback! There were so many rabbit holes that I had to prevent
myself going down - I scope creeped this article enough as it is!

I also specifically didn't want to go into the data join patterns for two main
reasons:

1\. there are lots of other articles that talk about it in depth, and 2\.
these days, I largely don't use it at all.

This is partially why I wanted to write this up, because the DOM manipulation
parts can seem like an integral part of D3, but there are really only 2
modules devoted to it. I mostly use D3 for its utility methods, and a JS
framework like React to handle all of the rendering, and I really want other
people to be able to discover those functions without first "learning d3".

~~~
thibautg
Your article is very impressive, really good work!

These days I also tend not to use d3 for DOM manipulation, but only for its
powerful helper functions (d3-scale, d3-array, d3-shape, d3-geo etc.)

I even try not to import d3-selection except for very specific cases.

I’m using Vue for DOM manipulation, and computed properties play very well
with d3 helper functions (i.e. a scale which auto-updates itself reactively).
In a way it’s very similar to ObservableHQ’s reactivity. Most examples from
Observable can be relatively easily converted to Vue with computed properties.

------
ashelmire
Awesome. Wattenberger's blog is also really good (from a cursory glance).
Really impressive stuff, can't wait to read it all.

~~~
wattenberger
thanks! I'm always open to requests for new posts as well, if there's anything
you want to read about.

------
duxup
It's nice to find a good D3 resource.

I've had a couple projects where I wanted to dive into D3.j but I found it to
be a huge topic and most of the time I end up with a D3 related framework
where I don't have to dive in to the depths of D3.... but still wishing I
could learn D3.js directly.

------
kube-system
If anyone is having issues loading this site like me -- it looks like DNSSEC
for this site isn't validating properly.

[https://dnssec-analyzer.verisignlabs.com/wattenberger.com](https://dnssec-
analyzer.verisignlabs.com/wattenberger.com)

~~~
tptacek
What makes you think that? Like almost all sites on the Internet, I don't see
DNSSEC set up for Netlify (or this content domain) at all.

~~~
kube-system
You’re right, I must have totally misread that page I linked. My resolver was
returning a bogus result, I toggled DNSSEC validation, and didn’t dig much
further. Looks like it‘s an issue with my resolver on this domain. Odd,
because I haven’t touched my configuration in ages and I haven’t seen this
problem before.

------
ihuman
How is D3.js these days? I last tried to use it 4 years ago for a side
project, and ended up using C3.js instead (its a D3 wrapper). Since then, I
haven't followed either library's development.

~~~
acomjean
We used c3. But switched to Vega-lite. It is another wrapper on D3 but it’s
well thought out and the defaults are really good. It has university backing.
We vega lite for our web based software (it reminds me of R’s ggplot2)

[https://vega.github.io/vega-lite/](https://vega.github.io/vega-lite/)

They have a python graphing lib too based on the same “grammar of graphics”

[https://altair-viz.github.io/](https://altair-viz.github.io/)

~~~
f00_
+1 vega-lite and altair

The interactive crossfilter part in particular

[https://altair-viz.github.io/user_guide/interactions.html](https://altair-
viz.github.io/user_guide/interactions.html)

[https://vega.github.io/vega-
lite/examples/interactive_seattl...](https://vega.github.io/vega-
lite/examples/interactive_seattle_weather.html)

------
flaviuspopan
Such a well paced tutorial, bookmarked!

------
_virtu
As someone who wrote a lot of charts in d3.js I must say that just using React
instead of d3.js is a lot less overhead. But that's my opinion.

~~~
wattenberger
I share your opinion! And that's actually partially why I wrote this post -
it's really great to know the different utility methods of d3.js to help
render a data viz (using React, etc).

------
cryptozeus
Great site op ! Great intro for d3

~~~
slowhand09
Thanks. Looking forward to learning it myself.

------
WatchDog
Really nicely put together page.

------
roland35
This looks interesting, I am looking for a new way to plot my fitbit data
exports (right now using Python with Pandas and Matplotlib), but I still need
to find a good way to store all that data before plotting it!

~~~
brlewis
Do you know SQL? Storing it in a local PostgreSQL database and using PostgREST
for D3 to access it would let you slice and dice in addition to graphing.

~~~
roland35
Yes thank you for the tip! PostgreSQL does sound like a great idea and it
would be easy to add new data points since I can check against the timestamp
before adding new data.

