Convert D3 Observable to standalone webpage - like blocks.org?

Question

I would like to run this D3 visualization

https://beta.observablehq.com/@mbostock/d3-zoomable-sunburst

as a standalone webpage, like this one here

https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099

Does Observable have a function to export to a .html file? Or what would I need to change to make it standalone?

Thionate

a couple of Copy/Paste actions – Sullyprudhomme

Have you seen Downloading and Embedding Notebooks and the discussion on how to Export final code?. – Maggiemaggio

The process of converting an Observable notebook to standalone html and/or js is clearly not as simple and copying and pasting. The use of Observable notebooks for all D3 examples has made the introduction to the library much more challenging for this reason. – Wardmote

You can download Observables Notebook by a simple clicking. However, the downloaded codes are not pure javascript like you see in bl.ocks.org It still heavily depends on Observables libraries. Some simple notebooks, you can easily copy and paste. But if it uses React.js heavily that is not something easy to do. I have read most of their tutorials and can do some work in Observable environment. But if you want to convert it to pure javascaript, depending on how much heavily it depends on Observable environment, it can be a lot of work. – Mnemosyne

Answer 1

Sadly, it's not that easy any more.

They have "archived" bl.ocks.org and are pushing the adoption of ObservableHQ notebooks. You can actually embed notebooks with a little effort, but they are served from https://api.observablehq.com. There are other options, but nothing that lets you easily pull out the html, javascript and css and host it yourself, as bl.ocks.org did. At best, you'll have to cobble a bunch more stuff together now. One method is to click the top-right context menu on some notebooks and select Export > Download code. Another possible option is this tool.

< relevant-humble-opinion > I don't know if d3 bl.ock.org examples just got so good that the suits moved in... or if Mike Bostock (our story's hero) really believed we needed "dataflow"... but things look bad from here... nothing good seems to last... < /relevant-humble-opinion >

UPDATE: see my other answer for more helpful advice

Concrescence

Answer 2

On an Observable example page, I clicked the triple three dots next to the fork option. Then chose export and then "download code". I extracted the tar file to a folder on my machine. In the Readme it suggests that you run $ npx http-server in a terminal, to run a local server on your machine. Open up the location in your browser and it should show nearly the same thing as a web page. It should be close enough to what you are looking for.

Observable page used Reusable Choropleth Map

Airing

Answer 3

I love D3 and needed a real answer to this problem, so I dove in further.

In researching the problem, I found that Observable notebooks are not bad, per se, but they obfuscate things like imports and data formatting, and mess with the order of the code blocks. That said, many of Mike Bostock's Observables examples are clean JavaScript for which you just need a framework where you can paste the example code.

I found that you can copy/paste the Observables notebook code into a javascript module with pretty good success, and minimal tweaking. You need to import d3, and feed the example code its required data and options.

It was too hard to just "take notes" on what to do to get everything in place in every example, so I wrote a skeleton. It's hosted on github and gitlab so hopefully it can remain a viable resource for this problem.

Concrescence