
D3 6.0 - catacombs
https://github.com/d3/d3/blob/master/CHANGES.md
======
cjv
I've always been curious on what Mike would do if he could completely rewrite
D3. I saw some experiments with a declarative API [0] which seems really
interesting.

It seems like the main learning curve for learning D3 is deeply understanding
the underlying web technologies (looking at you SVG), so could something
D3-like have a more abstracted renderer?

Anyway, once you use Observable - Jupyter notebooks are forever ruined, which
is the highest praise I can give. Thanks for all your hard work Mike!

[0] [https://observablehq.com/@unkleho/introducing-d3-render-
trul...](https://observablehq.com/@unkleho/introducing-d3-render-truly-
declarative-and-reusable-d3)

~~~
_spoonman
While learning D3 I was stuck on a simple bar chart problem. Just could not
figure it out. Asked on the D3 slack. None other than Mike himself took the
time to look at my code and point out the error. Then he gave me some general
tips that he noticed. The guy is so generous with his time and expertise and I
admire him a great deal.

~~~
raxor53
Mike is everywhere D3 is, it's incredible. Most of the popular D3 questions on
StackOverflow are answered by him.

------
atonse
The first few days I used d3, I really struggled. And I got very frustrated. I
simply couldn’t understand why the library was so popular. But I powered
through because people whose thought patterns I respected, swore by it.

Then I read some blog post somewhere. I wish I could give that author the
credit they deserved. It explained the fundamental building blocks of d3, the
selection APIs, etc with such clarity.

Once the light bulb went off, I was able to quickly iterate on some pretty
awesome totally custom stuff quickly and have sung d3’s praises ever since
(it’s been 5 years).

~~~
summitsummit
can you share that post? im of the former camp as of right now

~~~
infogulch
Presumably, gp has forgotten.

> I wish I could give that author the credit they deserved.

~~~
siddboots
These two posts by the creator, Mike Bostock, sound similar to what the gp
described.

[https://bost.ocks.org/mike/join/](https://bost.ocks.org/mike/join/)
[https://observablehq.com/@d3/selection-
join](https://observablehq.com/@d3/selection-join)

~~~
tonto
The data join thing is interesting. I'd be curious about other future
opportunities for d3 to sync up more with react. Posts like this [0] show that
d3 can "just generate the path" and then at that point you can use different
renderers like React e.g. return <path d={line(data)}/>. It is more limited
doing it this way but more ties into the react model would be wonderful

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

~~~
jwilber
I don’t have any public codebase examples at hand, but what we’ve done at work
also works quite well: basically we implement our D3 charts as a class with
methods corresponding to desired lifecycle events. We then create a Component
wrapper around said class and call the methods during their corresponding
lifecycle events. (Idk how confusing or not that was but I wish I had a repo
to share to make it clearer).

There’s also a book I read while ago from Swizec Teller on d3 + react
integration[0]. It may be dated by now as it’s been some time since I last
read it, but it’s worth looking into!

[0] [https://leanpub.com/reactd3jses6](https://leanpub.com/reactd3jses6)

------
enjalot
We are hosting a d3 meetup online Thursday 8/27 (tomorrow) more info here:
[http://meetu.ps/e/Jh8GY/1kwFr/d](http://meetu.ps/e/Jh8GY/1kwFr/d)

Mike Bostock will be doing an AMA at the end if you have burning d3v6
questions (though you can expect some more documentation on upgrading to come
very soon!)

I'll also plug our other two speakers, Mike Freeman and Amelia Wattenberger
who are amazing d3 educators & authors.

It's exciting that this is the first big online d3 meetup since the pandemic
put a stop to in-person events, and as a consequence of being online anyone
can participate!

~~~
azemetre
oh man, I'd love to attend but that is such an awkward time for me.

Will the talk be recorded and hosted anywhere?

~~~
lbuchman
Yes, the recording will be posted to the Observable to YouTube channel after
the event.
[https://www.youtube.com/channel/UCCD2tAKN32ya7V639gkbWhg](https://www.youtube.com/channel/UCCD2tAKN32ya7V639gkbWhg)

------
jedbrown
For those looking for higher level interfaces for interactive visualization
via D3, check out Vega/Vega-Lite [1] and Altair [2] (a Python library based on
Vega-Lite).

[1] [https://vega.github.io/](https://vega.github.io/) [2] [https://altair-
viz.github.io/](https://altair-viz.github.io/) [3]
[https://vega.github.io/vega/about/vega-
and-d3/](https://vega.github.io/vega/about/vega-and-d3/)

~~~
kqr
One of the things I really like about D3 is how there's nothing it won't do,
precisely because it's a lower level interface.

With many higher level interfaces, things go great until I eventually run into
a situation where I would like to do a tiny tweak that would improve
readability a lot, and it turns out the higher level interface does not
support that, so I'm out of luck.

That said, I haven't tried Vega. What are your experiences in terms of that
problem with Vega?

~~~
gampleman
I think they serve different use cases. I love Vega-lite for exploratory
analysis and for quick prototyping. You can get fantastically complex
visualisations very quickly with it. But for building "production"
visualisations, I think the low level approach is better: you'll get much
smaller bundle sizes, you have much more control over the final look and that
control tends to be expressed "naturally" rather than in convoluted
configuration.

~~~
awake
I would not even touch vega, it’s the engine vega lite is built on. Vega lite
is a declarative json format for representing charts. The spec is very well
thought out and you can rapidly iterate on prototypes. Altair is a python
wrapper for vega lite

------
vmception
I just wish all the cool animated examples of D3 were updated to use the
latest version of the library.

Mike had such cool and colorful ideas for the web 8 years ago which still wow
supporters of any project. But I have had to spend significant time and money
updating things to work with Vue or React while simultaneously trying to
figure out what changed across versions of D3 while simultaneously trying to
figure out what the inherited version of D3 was even doing.

Mike seems to have opted for more practical designs in the latter half of the
decade in his exploration of data visualizations. While other contributors
lack inspiration of using this as an art form.

~~~
mbostock
We’ve updated hundreds of examples to the latest version. Here’s the gallery:
[https://observablehq.com/@d3/gallery](https://observablehq.com/@d3/gallery)

We’re still in the process of republishing some of them and were hoping to
announce tomorrow but it looks like someone noticed and here we are on HN.

~~~
vmception
Good to see you here today, and glad to know that.

Why ES2015 specifically? Like where are the compatibility issues or is this a
necessary upgrade path for older versions and then you’ll phase into es6 or
leapfrog that to something even newer?

Or if ES2015 is “good enough”? Javascript can be a hot mess, there isn’t
always a need to keep up and the troubles arise when you try to.

~~~
mbostock
Collections (Map and Set) and iterables; the latter practically requires for-
of syntax and so can’t be supported in older browsers. d3.group and d3.rollup
are much more enjoyable to use than d3.nest.

~~~
vmception
Is this a consideration of many JS library maintainers? Or just you because D3
has broad appeal.

This and other compatibility charts shows only Internet Explorer continuing to
be the bane of your existence.

[https://kangax.github.io/compat-table/es6/](https://kangax.github.io/compat-
table/es6/)

~~~
nicoburns
IE11 is still widely supported across a lot of the industry. It's use is
declining, but I suspect it'll be a a good while yet before it disappears
because there are still so many IE-only internal apps.

------
Waterluvian
Does the full adoption of ES6 modules result in trivial tree shaking? I’ve
found that’s one of my favourite effects of libraries adopting the newer
module styles

Edit: it’s modular but the modules I peeked at have sideEffects set and look
pretty clean. I’m excited to see what I can do and keep tiny bundles! (I’m
obsessed lately with making neat gadgets that load instantly)

~~~
mbostock
D3 has been written in ES modules since the beginning of 2016 when we adopted
Rollup for bundling. The difference now is that we’re adopting ES2015 language
features that can’t be transpiled (namely for-of).

We didn’t get around to it for 6.0 (mostly for fear of breaking backwards-
compatibility in Node), but we plan on adopting type: "module" for Node in the
nearish future. In the meantime you can consume D3 as an ES module using
Skypack if desired. [https://cdn.skypack.dev/d3](https://cdn.skypack.dev/d3)

------
tylerscott
As a former Protovis user whose mouth hit the floor the day he discovered D3,
I never cease to be amazed at the quality of work Mike does. Thanks, Mike!

~~~
mbostock
Thank you!

------
motohagiography
Sankey diagrams are still blowing enterprise minds in 2020. I don't know what
award it would be, but it should be important, and the author should get it.

~~~
jeffbee
Didn't the inventor of flow diagrams die in the 19th century?

------
jakecopp
Is anybody else annoyed by how tightly coupled D3.js is with
[https://observablehq.com](https://observablehq.com)?

It's basically impossible to get started with D3 without using the Observable
online playground, I find it so frustrating.

~~~
jiofih
Hmm no. It is not coupled to Observable at all, what problems exactly are you
facing to use it elsewhere?

~~~
jakecopp
Both the introduction link [1] and examples link [2] on the D3 homepage [3]
and Github [4] only shows sketches on Observable - is there any official D3
getting started documentation _not_ on Observable?

Similar frustations are aired in a forum post: "I want to learn D3. I don`t
want to learn Observable. Is that ok?" [5].

[1]:
[https://observablehq.com/@d3/learn-d3](https://observablehq.com/@d3/learn-d3)
[2]:
[https://observablehq.com/@d3/gallery](https://observablehq.com/@d3/gallery)
[3]: [https://d3js.org/](https://d3js.org/) [4]:
[https://github.com/d3/d3/wiki](https://github.com/d3/d3/wiki) [5]:
[https://talk.observablehq.com/t/i-want-to-learn-d3-i-don-
t-w...](https://talk.observablehq.com/t/i-want-to-learn-d3-i-don-t-want-to-
learn-observable-is-that-ok/1957)

~~~
addicted
The vast majority of library documentation of even major libraries is simply
text with no playground.

The fact that they’ve made the effort to add a playground by leveraging a
fairly easy to use tech should not be held against the open source
maintainers!

Besides, all those examples are trivially reproducible locally, the way you
would have to do it for the vast majority of languages which don’t give such
fancy interactivity in their tutorials.

------
renewiltord
Which wrapper library around d3 that's declarative would people recommend? I'm
thinking something where I can swap the state in React between renders and it
updates intelligently with animations etc.

~~~
iaml
Just use d3 directly in react, rendering svg is ok for most cases. You would
want to ignore all the dom manipulation parts of d3, but otherwise they work
well together.

~~~
yoran
Indeed. When you Google for "React/Vue/Ember D3", the tutorials always use the
DOM manipulation layer of D3. But every front-end framework already comes with
a great reactive system to ensure the DOM is in sync with the data. And those
are a lot easier to use than D3's in my opinion.

The only tutorial that doesn't do this and that "gets" it is one by Amelia
Wattenberger: [https://wattenberger.com/blog/react-
and-d3](https://wattenberger.com/blog/react-and-d3). I recommend this tutorial
to understand how to use D3 in React.

------
romanr
It seems like a very versatile framework, but nowhere I can find any recipe or
guide of a very simple case - how to combine different types of charts in one?
Like simple line chart overlaying the bar chart. It seems to be only possible
by rendering them as completely separate charts and then overlaying one on top
of each other in DOM? Which seems hacky.

~~~
fourthark
D3 is pretty low level - geometry and binding data to create DOM elements.
It’s not really a charting library - look for libraries built on top of it for
abstractions like “composite chart” or whatever.

So yeah at the D3 level you would just draw one chart and then draw another
chart on top, probably each wrapped in a <g> if you’re using SVG. Maybe they’d
share X/Y scales.

------
d0m
What's the best resource(s) to learn D3 for an experienced dev? I find most
books/tutorials to be overly verbose.

~~~
mbostock
I published a new tutorial for D3 earlier this year:
[https://observablehq.com/@d3/learn-d3](https://observablehq.com/@d3/learn-d3)

~~~
Ao7bei3s
Thanks.

Is there anything in it that is now outdated?

It would be nice to mention the D3 version targeted in the very first
paragraph.

~~~
mbostock
This tutorial, along with the hundreds of other examples we maintain on
Observable, are kept up-to-date with all D3 releases.

------
ldd
Oh, D3.js is awesome, and all the cool visualizations that I saw over the
years makes me glad it exists.

Let's share our creations here!

Here's mine: a tech tree using D3.js made many years ago:
[https://github.com/ldd/tech-tree-js](https://github.com/ldd/tech-tree-js)

------
jwilber
Awesome, I’m always shocked by how much D3 has to offer and the quality amount
of time + effort Mike Bostock continues to invest into the project.

On a different note, hoping the CORS issued I received when using a v6 version
d3-fetch with local files got updated

~~~
mbostock
Thanks. Philippe Rivière has been helping substantially and making amazing
contributions!

If you think you’ve found a bug please file an issue on GitHub. (That said,
d3-fetch is just a trivial wrapper on the native Fetch API, so any CORS error
there is probably expected.)

------
yoran
I love D3. I tried plenty of other higher level libraries but very quickly you
run into customization issues. So for Backtest
([https://backtest.curvo.eu/](https://backtest.curvo.eu/)), I moved all the
charts to D3. It's a bit lower level and was more work to set up initially,
but now I'm in full control and can easily extend any chart. D3 is a great
piece of software!

------
ricardonunez
I use d3 in my map generator app. I’ll look into this update to add and
rewrite some of the features. Labels have been an issue lingering around for
too long.

------
in9
For me, a data scientist, learning D3 feels so far off since the background
needed to learn it seems vastly connected with some notion of frontend
concepts, which for me are very foreign. And honestly, I don't care much about
UI programming.

Is this impression correct? Is there a way around this? A learning source that
covers both?

------
canada_dry
I love D3, have been using it on and off for years.

The biggest pain point I have coming back to it - esp after a release or two -
are the scope of the changes!!

Many methods and properties have changed thus most of the examples, blog
posts, and stackoverflow assistance are outdated so it generally takes much
longer than I had hoped - but the results are always worth it.

------
daemonk
Awesome. I am a huge fan of D3. I am still using v4. But I will definitely
spend some time migrating on my next refactoring.

~~~
mbostock
The changes between v4 and v5 are tiny (adopting promises in d3-fetch instead
of callbacks). The changes between v5 and v6 are also largely backwards-
compatible, so hopefully your upgrade will be painless. A migration guide is
here:
[https://observablehq.com/d/f91cccf0cad5e9cb](https://observablehq.com/d/f91cccf0cad5e9cb)

------
zebraflask
I have several charts on my development list that I have been planning to use
D3 for - this new release is perfect timing.

------
ncmncm
Just won't render, at all, for me. Lotta "Notebook not responding. There may
be an infinite loop that has crashed this notebook, or a notebook open in
another tab.".

So why should something happening in another tab be allowed to mess anything
up? (Not that there is anything.)

No, sir, I didn't like it.

------
RocketSyntax
exciting to see event listeners drag, zoom. they make data come alive

