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!
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.
Actually you can use d3's maths functions standalone and then use react or vue's declarative templating to render. It's not too dissimilar from what you'd have to know using d3 DSL directly. Here's an example:
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).
i can confirm that i dreadfully wished for something like this when i muddled through the freecodecamp d3 curriculum in 2017! it was especially confusing as everyone was switching from v3 to v4 right then.
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!
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).
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?
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.
D3 started out as an academic project and Vega/Vega-Lite come from the same lab. Also, while Vega does not generate D3 code (Vega is a declarative visualization language and reactive runtime), it uses the D3 libraries internally and is heavily inspired by some of the core principles (e.g. data join).
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.
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.
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)
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
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!
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.
Readit News
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://github.com/timwis/vizwit/blob/v2/src/components/char...
Front page of the website doesn't seem to work on the latest Chrome (version 85.0.4183.83 (Official Build) (64-bit)) on macOS.
Oops, an unexpected error occurred.
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).
https://wattenberger.com/blog/d3
also, hey :)
> I wish I could give that author the credit they deserved.
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!
Will the talk be recorded and hosted anywhere?
[1] https://vega.github.io/ [2] https://altair-viz.github.io/ [3] https://vega.github.io/vega/about/vega-and-d3/
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?
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.
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.
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.
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)
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