I want to learn D3. I don`t want to learn Observable. Is that ok?

Adding to the general sentiment here: I’m a software engineer, trying to build dashboards and charts for our product, deeply integrated in the corporate design, frontend framework and deployment process.
As much as I appreciate Observable for being an awesome, interactive playground for data, I don’t have the slightest intention of integrating an interactive playground in our product: I want to use D3, not Observable, because I’m a developer in need of a library, not a data scientist in need of a visualization platform.
I want to show visuals of non-public KPIs and stats to our customers, in a form I decide on, without displaying this data to unauthorized users. I want to build lean and fast web apps without any additional runtime from Observable, adding overhead I don’t want or need. I want to limit the number of dependencies of my apps so I don’t have to monitor them for updates or license changes impacting my own.

And most of all, I would like to have a usable and up-to-date documentation of the visualization library I use, without spending huge amounts of paid developer time to convert Observable examples to Typescript. I’m not complaining about the lack of official Typescript examples — That’s a requirement I set for my own team and I don’t expect this level of commitment from others. But having so many subtle pitfalls in the examples, like reliance on the Observable standard library, makes D3 a nightmare to get started with.
The examples on bl.ocks.org and other websites and blogs are outdated to a large extent, relying on an old version of D3. Sometimes its enough to google for renamed methods, at other times the differences are too large to adapt examples to a new D3 version if you’re not too familiar with the library.

Take the Sankey chart, for example:

  • observablehq[dot]com/@d3/sankey-diagram?collection=@d3/d3-sankey (D3@6, d3-sankey@0.12)
  • observablehq[dot]com/[at]mbostock/flow-o-matic (D3@5, d3-sankey@0.12)
  • www.d3-graph-gallery[dot]com/graph/sankey_basic.html (D3@4, undisclosed custom sankey function)
  • bl.ocks[dot]org/wvengen/cab9b01816490edb7083 (D3@3, undisclosed old fork of sankey)
  • bl.ocks[dot]org/d3noob/c9b90689c1438f57d649 (D3@3, own sankey implementation)

All of these can be found among the first Google results for “D3 Sankey”. Unless you know what you’re doing and what to watch out for, newbies have a high chance of getting it wrong, leading to frustration.

4 Likes