Hi all, I have my IDE setup ( Apache Netbeans ) for all kind of projects including D3 vanilla JavaScript. What are the steps to get from a (Observable) JavaScript notebook to a vanilla JavaScript index.html?

[image] daktari: d3.json(“ https://gist.githubusercontent.com/tasqon/0dcc5c87a54282a2d732ad04d19b4e64/raw/7a185428a3c234bd997a797b524ed3a1dc01fc82/flare.json ”).then(data => {… d3.json(“ https://raw.githubusercontent.com/d3/d3-hierarchy/v1.1.8/test/data/flare.json” ).then(data => {… These flare…

Yes, but the extra runtime environment is for me and I think for many others kind of a barrier towards a vanilla JavaScript index.html

The barrier is there because the way notebooks run is rather different from the way a typical “vanilla JS” script runs. If the code in your notebook is very simple and doesn’t rely much on the reactive functionality of the runtime, you might be able to get away with just copying notebook cells into…

If you have a specific notebook in mind I could take a quick look and try to give some suggestions on how you might begin converting it back to vanilla JS. Yes, a good starting point would be my notebook with Mike Bostock’s D3 Circle Packing example .

You’re lucky, this particular example is really simple. In particular, it really only has one main visualization cell, and one data fetching cell and the rest are just helper functions / variables. Here is a port to a “block”. To get to this, I worked roughly from bottom to top. First, I added a s…

Will this jsfiddle example help? https://jsfiddle.net/5w906pL1/20/

That was exactly what I was looking for. The link to the Observable Standard Library is gold. Though it looks that it did not work (with DOM.uid). Nevertheless that is now a kind of blueprint for me for other notebooks. [image] bgchen: … comment out some references to DOM.uid in the standard l…

Nope. I was looking for Bryan’s solution. But thanks.

OK, I figured out how to import the standard library. I should have just read the docs more carefully. The key thing to do was to add this line, which creates a new “Library” object and then extracts DOM from it: const {DOM} = new observablehq.Library; Here’s the link again https://blockbuild…

Many thanks Bryan, that will be my template now.

Notebook to Vanilla JavaScript Steps

Help

bgchen February 5, 2019, 2:48am 2

Have you looked at the “Downloading and embedding notebooks” tutorial?

Topic		Replies	Views
Yet another attempt to go from Observable to VanillaJS Help	2	2116	May 20, 2020
Export final code? Help	39	22689	December 18, 2018
Observable Javascript is not working in browser Help	4	915	April 28, 2022
Mobile Patent Suits Help	2	696	May 16, 2021
Export observablehq js to vanilla js Help	6	4011	January 27, 2020

Notebook to Vanilla JavaScript Steps

Related topics