
Learn D3 - mbostock
https://observablehq.com/@d3/learn-d3
======
mbostock
Most intros to D3 (including D3’s own home page, for now) focus first on
selections for DOM manipulation. Selections are great, but given how many
viable approaches there are today for DOM (React, Svelte, hypertext literals,
etc.), I wanted to emphasize the modularity of D3. So selections and joins
aren’t introduced until part 7 where they’re framed as a tool for animation
and interaction: efficient, incremental DOM transforms. I think that’s a
better way of thinking about joins, and hopefully helps people focus first on
building effective static visualizations before getting into dynamic graphics.

~~~
oroul
Hi Mike! I really like what you've done with D3. I've been hesitant to include
D3 in my personal projects though just because of how complex both DOM
manipulation and async data binding through APIs can get.

Most tutorials focus on D3 itself, but I haven't been able to find much on how
to properly integrate D3 into a complete web application (e.g. a REST API
build on Express/Koa serving data to a React/Vue frontend). Is this an area
where you think there is a lack of tooling, or perhaps simply a lack of
information? Given how many companies use D3 I feel like I must be missing
something!

~~~
wattenberger
one thing that might help is this blog post I'm (slowly) putting together:

[https://wattenberger.com/blog/react-
and-d3](https://wattenberger.com/blog/react-and-d3)

I've done a lot of work that uses d3 within a JS framework (React, Vue,
Svelte, & Angular), and the key is to understand 1. how to create shapes in
plain SVG, and 2. how to use the parts of d3 that don't do DOM manipulation.
I've found the least-hacky way is to handle DOM manipulation with the
framework, and use d3 for things like data manipulation, creating SVG path
strings, creating scales to map from the data domain to the visual properties,
etc.

~~~
oroul
This is a great resource, thanks for putting this together.

------
jake-low
This looks like a great new introduction to D3. It uses Observable as an
interactive playground for D3 example code, which I think is an ideal
environment for teaching concepts like these. I hope this will help more folks
get started in visualization.

If anyone hasn't given Observable a try yet, I highly encourage you to do so.
It's more than just "IPython/Jupyter but for JavaScript" — it's reactive, like
a spreadsheet. You define "cells" of JS code that are automatically re-
evaluated whenever one of their dependencies (another cell) changes.

It's an amazingly productive programming environment. These days, most of my
JavaScript projects start off as Observable notebooks because it's such a
great platform for experimentation. And I find myself wishing for Observable's
features whenever I'm developing in other languages.

I know reactive programming is nothing new, but Observable has been my first
opportunity to use it regularly, by "backporting" reactivity into one of the
languages I work in most often. Being able to use it for prototyping and
visualization for the past couple years has given me a really warm, fuzzy,
"what-a-time-to-be-alive" feeling.

------
mbostock
A different introduction to D3 was published a few weeks ago by Arvind
Satyanarayan of MIT, if you want another perspective. Here’s the link and
discussion on that.

[https://observablehq.com/@mitvis/introduction-
to-d3](https://observablehq.com/@mitvis/introduction-to-d3)

[https://news.ycombinator.com/item?id=22476930](https://news.ycombinator.com/item?id=22476930)

~~~
appleiigs
In my opinion, the Observable introductions and learn-by-example posts[1] are
the best way to learn D3. They are very well written and easy to follow. I
have a couple books on D3 and: 1) they are all out-of-date because of the
changes in V4 to V5, 2) the authors write/use D3 in weird ways. I look at
Observable's code examples as the canonical way of using the library. Please
keep up the good work!

One suggestion is to have some sort of curriculum or categorization of the
posts from easy to hard. For example, I had to skim through 120 posts to find
the easy examples (bar chart, line chart, pie chart) then moved on to the more
difficult.

[1] [https://observablehq.com/explore](https://observablehq.com/explore)

EDIT: Oh, i just found this:
[https://observablehq.com/collection/@d3/learn-d3](https://observablehq.com/collection/@d3/learn-d3)

~~~
mbostock
Rating the difficulty of the examples is a great idea, thanks! The gallery
currently leads with harder ones because they tend to be more interesting
(animation and interaction), but you can find easier ones farther down.

[https://observablehq.com/@d3/gallery](https://observablehq.com/@d3/gallery)

------
ahstilde
I've always enjoyed Amelia Wattenberger's approach to teaching D3. Her intro
blog post
([https://wattenberger.com/blog/d3](https://wattenberger.com/blog/d3))
actually pushed me to purchase her book
([https://www.newline.co/fullstack-d3](https://www.newline.co/fullstack-d3)).
I found her on the last D3 post on HN
([https://news.ycombinator.com/item?id=22480270](https://news.ycombinator.com/item?id=22480270)).

~~~
justaguyhere
I'm on the fence about purchasing the book. How do you find it?

~~~
kickout
I bought it as well and it served its purpose (then I transitioned to
Observable). Worth it if you are serious and want some 'hand-holding' getting
started.

------
vosper
As someone who has a codebase with a number of custom D3-based visualations:
complex D3 could be your future maintenance headache (unless you have someone
who really understands D3).

It's so different from other parts of web development that a developer
probably can't just jump into the code and fix a bug, you have to understand
D3's coding model, and then read the code you've got to build a mental model
of how it's translating to what you're seeing on screen (the mental model
building is hardly unique to D3, but you're not going to be reusing any of
your existing mental modelling skills here). Then you will go back to your
normal web-dev, forget everything you learned, and have to go through the
whole process again in 6 months when you have to make another change.

D3 is super powerful, and very fun to use, but for production we stick to
Highcharts whenever we possibly can. There's lots of stuff you get out of the
box from a good charting library that you're going to be building for yourself
if you use D3. Though I have been told that D3 v5 is easier to learn and use.

------
tengbretson
D3 is pound-for-pound probably the most powerful tool for front-end
development. However, its imperative interface makes it really hard to use
when combined with most modern stacks. Are there any tools out there with
similar feature sets to D3 that use a more declarative interface?

~~~
mbostock
The “imperative” part only applies to selections. I encourage you to read the
tutorial to get a better sense of the other declarative parts of D3 (d3-scale,
d3-shape), and how you can use these parts with whatever UI library you
prefer. Selections aren’t even mentioned until near the end of the tutorial.

------
deckar01
I tried to learn D3 over the weekend. Observable was one of the worst
experiences I have ever had with code examples. Every other line is riddled
with console output, which makes it hard to take in the example as a whole.
Downloading and modifying the example is even worse. It gives you the compiled
output of their GUI coding tool.

I ended up using plotly's libraries that are built on top of D3, and it really
made me appreciate how much work they put into making it so easy to use.

~~~
mbostock
I’m so sorry you had a bad experience. We’re trying really hard to make it
great! Our entire reason for being is to make it easier for people to tinker
with and share examples.

One of the least obvious things of Observable is that it’s not actually
JavaScript—it’s a reactive extension of the language. We’re making that more
apparent by making the dataflow visible, and we’d love to hear any more
feedback or suggestions you’re willing to share.

[https://observablehq.com/@observablehq/observables-not-
javas...](https://observablehq.com/@observablehq/observables-not-javascript)

[https://observablehq.com/@observablehq/introducing-visual-
da...](https://observablehq.com/@observablehq/introducing-visual-dataflow)

~~~
deckar01
No where on the site do I see how to use these tools in my development
environment. Even searching the topic produces no results. A quick browse of
your GitHub does not lead to any obvious entry point for developing with
Observable locally. This feels like a startup has prioritized onboarding
people onto their platform rather than providing examples that are
representative of how D3js is actually used. I am baffled as to why these are
the official code examples.

~~~
ejstronge
It seems that Observable is an online environment - it's true that this is not
explicitly stated, but it's alluded to throughout the homepage.

EDIT: Check out their about page for an explanation:
[https://observablehq.com/about](https://observablehq.com/about)

~~~
catacombs
> It seems that Observable is an online environment

The site's interface is a massive turn off. I love using my editor, and if
there's a way for me connect it to Observable, I'd use the platform full time.

------
mlurp
I've done a few small personal projects in d3 and I like it a lot. My biggest
gripe though, is that I can't find decent online help for it. It's not popular
enough to have its own subreddit/stack exchange. So often when I've been
stuck, I end up having to find 5 year old stack overflow threads that work
about half the time.

Is there a good community for it I don't know about? Great tool either way
though.

~~~
mbostock
Our goal is for Observable to support the D3 community, but we’re not quite
there yet in terms of collaboration features (e.g., making it easier to
comment and ask questions on notebooks). We do have a nice forum, also:
[https://talk.observablehq.com](https://talk.observablehq.com)

The D3 slack is another place you can ask questions if you don’t want to use
Stack Overflow. And you’re always welcome to ask me questions on Twitter, and
I’ll try to point you to the relevant example or make a new one.

~~~
DonHopkins
"Slack Overflow" ;)

------
Bishonen88
Having created mostly static in excel, I found the premise of d3 awesome! As
the complexity to use it was kind of overwhelming, I ended up using plotly.js
and its react wrapper for an analytical app at work.

Whilst this works great and is super straightforward, there's many little
things that you can't easily control in plotly (and other similar libraries).
They come with some bugs/quirks that perhaps are meaningless to 95% of their
users, but limit me from making my ideal dashbaord.

E.g. plotly doesn't seem to support formatting a date as a week with a ISO8601
(%V):
[https://github.com/plotly/plotly.js/issues/424](https://github.com/plotly/plotly.js/issues/424)
and many other little things.

What's the best way to use d3 with react these days, then? Is there some
recommendation from Mike or someone else who is experienced in this area?

~~~
wattenberger
Repeating a comment I made above, this semi-finished blog post I'm working on
might be helpful:

[https://wattenberger.com/blog/react-
and-d3](https://wattenberger.com/blog/react-and-d3)

I generally like to stick with React for DOM manipulation, and use D3 like a
utility library.

------
jrandm
> This may feel like cheating, but it’s okay! Examples are not merely reusable
> templates but tools for learning, hinting at subjects for study. “Breaking”
> an example by tinkering—changing stuff and seeing what happens—helps you
> achieve understanding faster than passive reading.

I haven't had to use d3 in anger for some time but have an idea that means I
need to re-learn it; I haven't finished yet but this is a great article.
Thanks all for writing and/or sharing it.

------
benrbray
In my limited experience, I've found that D3 excels interactive graphs / data
visualizations. However, when I've tried to use it for interactive math
diagrams, I've found that it doesn't save me much effort. I found it was still
necessary to manually track state and enforce geometric constraints. (not
mine, but here is an example where d3 doesn't help much:
[https://observablehq.com/@renatoppl/torus-
knots](https://observablehq.com/@renatoppl/torus-knots))

Does anyone have tips for getting more mileage out of D3? Or using other
tools? I'd be especially curious if anyone's successfully used React+SVG for
interactive science/math diagrams.

~~~
rhodysurf
I have!!! I use d3 and react (and react native!!) together with SVG to create
the charts on my site here: [https://hopewaves.app](https://hopewaves.app)

I learned from this repo
[https://github.com/sxywu/react-d3-example/tree/master/src/vi...](https://github.com/sxywu/react-d3-example/tree/master/src/visualizations)
. I have been using this combo for a while now so let me know if you have any
questions about it

------
catacombs
This tutorial is the best reference I've read in the six years I've used D3.
Previously, the documentation was too esoteric for the normal person to learn.
Now, this really opens it up for more people. Nice work.

------
rb808
D3 is great, but last time I looked at D3 it worked a lot more like jquery
than modern frameworks. Is it still worth using or in the decade there are
better ways to work with React/Vue/Angular.

~~~
mbostock
One of the primary goals of this new introduction to demonstrate that D3 is
not primarily a DOM framework, so you can use it with React, Vue, or Angular
if that’s what you prefer. I encourage you to read the post!

~~~
rb808
Thanks! I feel honored you replied. I'm mostly a backend programmer who tries
a bit of front end work so dont have a lot of time to learn everything. I will
try again because every beautiful visualization I've seen is d3 based.

------
hmottestad
Had decent amount of success with learning plain SVG and generating it from
Angular/React/Vue.js. It's very nice to be able to mix some SVG into your
webapp, lot's of tools can generate SVG for you too...in one of my home
projects I drew my apartment in Draw.io, exported it to SVG, copied it into a
React project and added some lamp icons. Now I have a custom IOT frontend for
my ikea lamps.

------
_of
I learned it a little bit when working on my scientific analysis tool for
single cell RNA-seq analysis. It takes time to learn, but there are many
examples out there.

[https://alona.panglaodb.se/results.html?job=uOBMsjyQfFK8G7wQ...](https://alona.panglaodb.se/results.html?job=uOBMsjyQfFK8G7wQjdPPXM3VacfYkm_5e665c15c718d)

------
robertelder
I'll provide another voice to support the idea that d3 is a really great
library. For anyone who has tried to learn it in the past and found it a bit
too complicated, I'd suggest you approach it with the following perspective:
Learning d3 is more about learning SVG than it is about learning d3 (unless of
course you already know SVG).

------
rustybolt
There are more and more articles on hacker news where I find myself reading an
article about X, only to find myself wondering the same thing as before I read
the article: "What is X?".

------
javieranton
D3 has fascinated me for the past 3 years. I've spent this time embedding
interactive charts in mobile apps. Thanks for creating this

------
nicdc
Interesting. Is there a reason someone would prefer D3 versus say R's ggplot2
or Python's seaborn for a non-interactive graph?

~~~
hashmal
One of the reasons I love d3 is that it's built on standards such as CSS and
SVG/HTML. They are so widespread you can't go wrong learning them, and that
knowledge is immediately usable elsewhere (other related benefits include
extremely powerful graphic capabilities and tons of documentation).

