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!
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.
If so, ... how?
I used this in a few projects after playing around with wrapper libraries. This gave me the most flexibility.
It is indeed a lot more difficult to learn than other solutions, but with the experience it becomes second nature to "think in it" and explore data iteratively, building visualizations along the way all while having fun (and its concepts map very nicely with how Edward Tufte lays out things in his books).
All this to say: thank you.
I was always curious about your thoughts about how d3's paradigm is similar to React/Svelte/SwiftUI/<any other UI lib>.
I feel that d3's approach is similar in the sense that you have some data, and you describe in code how you want the data to be map to a UI (DOM in this case).
With selection/joins it seems that d3 adds an extra capability that allows one to "do something" before and after data changes.
In a way of analogy this would be similar to have finer grained control to when props change in React: d3 is similar in being able to transition specific prop numerical values (or something of this kind?).
Anyway would love a TLDR on what you think about d3 and its similarity to other libs.
Second, the main difference with d3-selection (the part of D3 that does focus on the DOM) is that it focuses on transformation rather than representation. You describe changes that you want to apply to the DOM, rather than the desired current state of the DOM. This makes it harder to use (more complexity) than more declarative frameworks (UI as pure functions of state) such as React. But the advantage is that you can control exactly what happens as you change the DOM, which can make it faster, and makes it easier to animate transitions.
I would be curious to see how d3 scales in complexity for reactive UI apps... such as todo lists, forms, pages with buttons, etc.
It’s not very mobile friendly given I had yet to learn about bootstrap!
If you do want to use the DOM on the server, you could use JSDOM. d3-selection and d3-transition use JSDOM heavily for unit testing and it’s worked well, but I’ve never used it for server-side rendering.
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.
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.
EDIT: Oh, i just found this: https://observablehq.com/collection/@d3/learn-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.
Is there a good community for it I don't know about? Great tool either way though.
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.
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 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?
I generally like to stick with React for DOM manipulation, and use D3 like a utility library.
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.
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.
EDIT: Check out their about page for an explanation:
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.
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.
I learned from this repo https://github.com/sxywu/react-d3-example/tree/master/src/vi... . I have been using this combo for a while now so let me know if you have any questions about it
Because of this, D3 might not be suitable for 3d work. Of course, you could do the math yourself to project 3d shapes onto the 2d plane, but you won't find those sorts of helper functions in D3.
Instead, D3 is a collection of tools to help map data to UI elements. It is up to you to use D3's tooling to generate, update, and delete UI elements.
networkD3 (for Sankey diagrams) - https://christophergandrud.github.io/networkD3/ ,
R2D3 - https://rstudio.github.io/r2d3/ , and
htmlwidgets - http://www.htmlwidgets.org/