If you like the idea of using D3 for data visualization but you want something a bit higher level, check out Observable Plot[1], a library by the D3 team that adds a lot of conventions and conveniences on top of D3, specifically for building plots, charts and graphs.<p>And even beyond that, there's Observable Framework[2], a static site generator for building visualization dashboards (that supports Plot, D3 and lots of other libraries).<p>1: <a href="https://observablehq.com/plot/" rel="nofollow">https://observablehq.com/plot/</a><p>2: <a href="https://observablehq.com/framework/" rel="nofollow">https://observablehq.com/framework/</a>
I like d3 and have built a lot of things in it but every time I go back to it after not using it for a few years, I can never remember much, the docs just confuse me more, and I feel like I’m back at square one.<p>Whereas you could show me some partial differential equations to solve that I haven’t touched in 10 years and that somehow comes back quicker.<p>But I also think the d3 reference docs are absolutely horrible too.
Even if you never end up using it professionally, I think it's worth it to learn D3. The core point that the library makes is that your projection of the data (say, a 1080p screen, 1920x1080) is always different from the dimensions of the data itself (say, grading from 0-100). At some point you need to decide how to scale the data (0-100) so that it draws correctly according to the projection (1920x1080). You can do the math yourself, or you can use a library like D3 to do the math for you.<p>Even if you don't draw data on the web, you'll probably eventually draw data somewhere, and you'll be glad to look for an equivalent in that ecosystem.
The real problem with D3 is that, as a library, it doesn't really do visualizations. It gives you functions and exmaples to compose your own visualizations, whose key requirement is an expert-level understanding of JavaScript (particularly closures and functional programming). What mbostock says is the core "abstraction" of D3, the select and select diffing, is only an affordance for writing reentrant "paint()", with the flourish that your paint statements are expressed as builder statements, which themselves are scoped to select and can be broken up for various effects. Especially in animated examples, D3 does suprisingly little for you, as it's up to you to write the outer loop and track state over time. Nor does D3 give you any abstraction for encapsulating a visualization, as a function or otherwise. This is left as an exercise for the reader. All of this comes as a big surprise, or shock, to the new D3 user. It would be like adopting a new database and finding only a library for file IO and BTree indices and query optimizers, that you need to wire up yourself.
I've been in love with D3.js and have used it as the key technology for dozens of data visualization projects, both commercial and personal. However, its rendering syntax now feels dated, reminiscent of the jQuery era. While I still use various auxiliary functions (e.g., for ease or scaling), I now create actual components in a modern framework (in my case, Vue 3 and TypeScript).<p>Despite this shift, I am grateful to D3.js for the beautiful years it gave me and for teaching me various good practices in data visualization. The defaults and demos by Mike Bostock have been both an inspiration and an example of good standards, aligned with Tufte's minimalism.
Learn D3 then (assuming you're doing something chart-like as most of us are) move to something like VisX or some non-React equivalent and never look back.<p>I view D3 and jQuery as being somewhat similar and both are very prone to spaghetti. Something like VisX adds a lot of structure over the D3 you're using to keep things sane.
D3 is inspired by the Grammar of Graphics by Wilkinson.<p>Another tool also inspired by GG is aptly named ggplot2 and for the R language. It offers a much more terse and functional inspired interface that also works well with an uncommon tool named Rush, R one-liners for the Shell, for quickly creating graphics from CSVs piped into the tool.
I keep searching for entirely not-web based diagramming/charting solutions. That can be driven via CLI or using some library, and output SVG or PNG.<p>All of these things usually depend on browser functionality or use some janky as fuck SSR solution using a headless browser to generate them server side.<p>Of particular note, I’d also like to be able to programmatically generate Venn diagrams. It seems there is, bizarrely, a complete dearth of anything in this space. A couple of JavaScript chart libraries support them, but generally speaking there seems to be hardly any support for them.<p>gnuplot seems good - just no Venn diagram support.
I've heard great things about Vega [1], which sits on top of D3. It's a dependency of OpenSearch Dashboards, allowing users to create custom dashboards on log and observability data [2]. The vega library might alleviate some of the concerns others are expressing about the learnability of D3.<p>[1] <a href="https://vega.github.io/vega/docs/" rel="nofollow">https://vega.github.io/vega/docs/</a>
[2] <a href="https://opensearch.org/docs/latest/dashboards/visualize/vega/" rel="nofollow">https://opensearch.org/docs/latest/dashboards/visualize/vega...</a>
I love the visualizations created but something about D3 syntax has just never clicked for me. It seems overly convoluted, verbose and from an old era. We've thankfully moved to a more declarative way of doing things.
D3 has an unnecessarily non-intuitive API design, and I think that kills it for a lot of people.<p>For example, why must a data join be performed like `selection.data(array).join(element-type)` instead of something like `selection.join(element-type, array)`. Looking from a pure API-design perspective, not getting bogged down in the technical details.<p>Lazy eval method chaining is a natural fit for applying+branching large amounts of HTML/CSS state updates but I feel that the designers took it a bit too far with the core D3 operations.
I just picked up D3 + React for a VS Code webview project. Pretty easy to pick up but I find jumping in with examples very black box (as someone who doesn't have a ton of web experience). That plus going from JS to TS had some quirks that I didn't realize when in JS land.<p>I could really use a "start from the basics" tutorial.<p>I will say Github Copilot has been excellent at helping me with random TS errors when porting my graphs from JS to TS. It's nice how typed D3 can be when you finally opt into it.
D3 is a terrific toolkit. The fact that it is a low-level toolkit means you have to write more code, but on the other hand, you have more power. One of the negatives of D3 is that D3 charts are not responsive by default. Whether the chart fills the screen, or fills a small area in a dashboard, the grid lines are spaced the same and fonts are the same size. You can add responsiveness manually. It would be nice if a future version was responsive out of the box.
I really like the force directed graphs in the d3 examples but I've found that they often settle in poor configurations as the nodes and edges grow. I wonder if I need a 3d visualization at higher scale? Maybe someone else has experience with these.<p>Here's a recent example I built: <a href="https://alexsci.com/rss-blogroll-network/" rel="nofollow">https://alexsci.com/rss-blogroll-network/</a>