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?
On
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
On
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
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.