Dear All,
Is there any way I can remove the metadata shown below the force-directed graph?
I had downloaded the project as “Download Code” in which inspector.css and runtime.js were included.
I didn’t find any lines of code which displaying such metadata information in any of JavaScript file.
I attached the screenshot.
Please kindly help advise how to remove that metadata.
with Metta,
Ye
In the included index.html change the following line:
const main = runtime.module(define, Inspector.into(document.body));
to
const inspect = Inspector.into(document.body);
const main = runtime.module(define, name => {
if (name === "chart") return inspect(name);
});
Hi Mootari,
It works as expected. Thank you very much for the valuable information and help.
As I am new to front-end development, I have some questions related to the observable notebooks code.
How can I run the downloaded source code as pure JavaScript without including the observable code?
Is there any dependency conflict if I use “runtime.js” in my web development?
How can I run the downloaded source code without runtime.js?
With Metta,
Ye
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.
Hi Mootari,
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?
Does it mean that I just extract the required cells from the notebook and paste in the visual studio code as JavaScript code?
If that so, do I need to create a container in html and append svg or how to handle?
With Metta,
Ye
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):
Hi Mootari,
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.
With Metta,
Ye
Hi Mootari,
I encountered 2 issues after I forked the project as “Private Notebook”.
IFrame
After I copied the IFrame code and added into my html page, it showed that following banner (is it needed to pay to remove)?
![banner.PNG|690x355]
Run with JavaScript.
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”.
If I compiled with the original notebook with original Json file, it was able to show and embed in my html page.
Please help advice,
Ye
Removing the attribution banner on iframe embeds is an Enterprise tier feature, as advertised on the option.
Check your browser’s JavaScript console for the actual error. Unfortunately It’s unclear to me from your description alone where or how you changed the file name.
Hi Mootari,
Here are the steps I executed:
Fork from Force-Directed Graph / Biki Deka | Observable as “Only you” visibility.
Download the “miserables.json” from Open File Pen.
Replace Mvriel data with Tester1 in above json file.
Replace the original “miserables.json” with the modified “miserables.json” via Open File Pen.
The modified filename changed to miserables@1.json from miserables.json.
The modified json data still can be used and showed properly in Observalbe notebooks.
However, when I do “Embed Cells” via “Export”, I started encountering issues:
7.a) 1st Issue (Runtime with Javascript)
I create a notebook via “Runtime with Javascript” option with private key (with "Never Expiration option" and not select for Only this version).
After that, It show me 2 errors as folow:
7.a.1. chart = RuntimeError: Failed to fetch
7.a.2. data = TypeError: Failed to fetch
Here is the screenshot:
Is it due to the filename including the special character '@' (miserables@1.json)?
How can I rename the **Json filename** in observable?
I noticed that it was changed automatically.
With Metta,
Ye
Unfortunately you’ll have to share your notebook as unlisted or public if you want to access file attachments via a JavaScript embed. Attachments in private notebooks are currently only available through iframe embeds.
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.
Hi Mootari,
Now, I changed to public from private and the chart can be shown successfully in my application.
To me, the observable platform is very nice to use as we don’t need to do coding so much and we can more focus on business logic instead.
So far it is ok and I will ask for help if there will be a issue when the web goes live.
Thank you very much for your support along the way.
With Metta,
Ye