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.json files don’t quite have the right format to be viewed with the code. At the bottom level, the entries look like this: {"name": "AgglomerativeCluster", "value": 3938}, whereas they should look like this: {"name": "AgglomerativeCluster", "size": 3938}, To fix this, you can either substitute “size” for “value” in the json files, or substitute “value” for “size” in the JS code.

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 similarly-named functions (possibly with extra inputs) and adapting the rest of the code (possibly importing the standard library), but this is still going to be a case-by-case sort of process. One way to check the complexity of this task is to put your notebook in the visualizer and see if you can tell whether copying the cells into functions in a vanilla JS script will lead to something with the same execution order. 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.

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 script tags to index.html which import the d3 and d3-require libraries as well as the Observable standard library: Next I added an svg element to serve as a target for the visualization: Then I added another script tag, and copied each of the notebook cells below data as functions / variables (making sure that the variables are defined in an order that makes sense): const color = d3.scaleSequential(d3.interpolateMagma).domain([8, 0]); const format = d3.format(",d"); const width = 932; const height = width; const pack = data => d3.pack() .size([width - 2, height - 2]) .padding(3) (d3.hierarchy(data) .sum(d => d.size) .sort((a, b) => b.value - a.value)); The cell data fetches a file asynchronously, so we’ll have to wrap the rest of the code inside a promise. Put the following inside the above script tag. d3.require('@observablehq/flare') .then(data => { // add code here }); I then took the code from the main cell and copied it into the function inside then above, so that it will run after the data is successfully fetched. The only changes I made were to change the main d3 selection from DOM.svg to a selector which picks out the target SVG element we added above, and then to comment out some references to DOM.uid in the standard library which weren’t working. The latter causes the text labels to spill outside the circles. I’ll see if I can figure out what’s going on with that later. (By the way, it doesn’t look like you’ve changed anything from Mike Bostock’s notebook. Might you possibly have forgotten to share your edits?)

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 library which weren’t working. The latter causes the text labels to spill outside the circles. I’ll see if I can figure out what’s going on with that later. Yes please, let see how the Observable standard library should work in your vanilla JavaScript example. [image] bgchen: (By the way, it doesn’t look like you’ve changed anything from Mike Bostock’s notebook. Might you possibly have forgotten to share your edits?) I only forked it. My aim was to transform a Notebook into a vanilla JavaScript which you did perfectly. Thank you.

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://blockbuilder.org/bryangingechen/ffd619bb5889d146fe6c5d581d3ea00e edit: Since stdlib exports (a slightly wrapped version of) d3-require, you can even get rid of the script tag which fetches d3-require above (although the syntax to use require is slightly changed). See the latest version, which includes the following: const {DOM, require} = new observablehq.Library; require()('@observablehq/flare') // need the extra () because require in the stdlib wraps d3-require in a weird way .then(data => {

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	2127	May 20, 2020
Export final code? Help	39	22819	December 18, 2018
Observable Javascript is not working in browser Help	4	933	April 28, 2022
Mobile Patent Suits Help	2	703	May 16, 2021
Export observablehq js to vanilla js Help	6	4031	January 27, 2020

Notebook to Vanilla JavaScript Steps

Related topics