Ah, the good old "you’re not allowed to criticise open source projects, because they’re open source!"

Observable is cool when you want to build data notebooks. Observable is obnoxious if you want to add a D3 pie chart to your Vue application and have to untangle calls to D3’s API from reactive cell values, which look like ordinary JavaScript, but are not, and will cause compilation and runtime errors when copied.

The problem is that D3 resources mix D3 documentation with demos of D3 itself, and demos of Observable, into a single, inseparable combination. Nobody would complain were those three things separate resources; alas, they’re not.

Every time someone raises this issue, they are shot down by people like you, with the same nonsensical argument—just because the maintainers write cool demos in a fringe datavis DSL, that doesn’t automatically mean it’s helpful for the 99% use case of rendering charts in normal apps.

"Observable is obnoxious if you want to add a D3 pie chart to your Vue application and have to untangle calls to D3’s API from reactive cell values, which look like ordinary JavaScript, but are not, and will cause compilation and runtime errors when copied."

Yep - as I wrote: "If you want to just blindly copy and paste d3 code, you may have issues with the docs being hosted on observable."

If instead you learn the core api (selections, bindings, and update patterns), any chart is really just a matter of using the correct layout/generator.

Here's d3 pie: https://d3js.org/d3-shape/pie

No need for going into Observable at all, as the pie generator is completely documented.

But if, as you mentioned, you prefer to copy the code from Observable, the linked pie example is extremely simple to do so: https://observablehq.com/@d3/donut-chart/2

Zero reactive cells, you can literally just copy the code inside the cell statement (e.g. the curly braces).