The short answer is, you can’t. Observable’s platform and Runtime provide several conveniences that speed up prototyping and exploration, arguably the most important ones being its reactive dataflow and its Standard Library.
That in turn means that you cannot remove this layer quite as easily, as you’ll have to add back boilerplate code that Observable helps to avoid.
Not necessarily. Many of Observable’s users directly integrate compiled notebook modules into their applications, even React. One area where you can run into problems is bundling. Notebooks often rely on external libraries that are pulled in from a CDN (including many of the helpers exposed through the Standard Library), and bundlers may not be able to detect those dependencies.
If you want to remove the dependency on Observable’s Runtime and Standard Library, then my recommendation would be that you port the code directly from the notebook instead of trying to pull it out of the compiled notebook module.
For Question 2’s answer:
Can I assume that the downloaded source code is working properly in Visual Studio Code by running with Live Server: Open with Live Server ? If not, is there any recommendation steps for that?
For Question 3’s answer:
What does “port the code directly from the notebook instead of trying to pull it out of the compiled notebook module” mean?
If that so, do I need to create a container in html and append svg or how to handle?
Probably? Looks like that command is provided by an extension, and I don’t know how exactly that is implemented.
Basically yes. Notebook cells don’t map 1:1 to Runtime variables, as some macros like viewof produce multiple variables.
I would start by declaring static values as const, and then work your way down the dependency chain. Additionally you could inspect the compiled notebook through the following helper which lists each cell’s inputs more clearly (be sure to toggle the “Reformat sources” checkbox):
I tried to fork some of the community projects into my notebook. After that, I generate the code by embedding cell and paste it into my html code. It seems like more handy and not require extra headache.
I encountered 2 issues after I forked the project as “Private Notebook”.
After I copied the IFrame code and added into my html page, it showed that following banner (is it needed to pay to remove)?
I changed the JSON filename to D3links@4.json from D3link.json while keeping the format of JSON (Just changed few item names only). While notebook was able to be compiled successfully without error; however, when embedding the code and generating the key, It showed that “chart = RuntimeError: Failed to fetch” and “data = TypeError: Failed to fetch”.
The @ gets added by Observable to assign a unique name to each version of a file. When you replace a file all its references get updated automatically. If you want to assign an explicit name, I’d recommend to download the file, rename it and then replace the original file with the renamed one.