Hello ! amazing 
one question: let say I finish my awesome notebook with a nice viz as result.
is there a way to save a .js file with the code ?
3 Likes
Not yet, but we are planning on open-sourcing the notebook runtime so that you can save your notebook as a JavaScript bundle and run it outside of Observable. Stay tuned!
24 Likes
I signup for the forum to ask the same question. What I am also interested in is the other way around, i.e., upload/import a notebook as a JavaScript bundle from local disk or external host.
In the sample https://beta.observablehq.com/@mbostock/introduction-to-notebooks, I can see that notebook can import another notebook hosted on observablehq.com,
https://beta.observablehq.com/@mbostock/randomized-flood-fill
is it possible to import/export notebook as standard ES6 module with custom configuration fields in package.json?
Thanks.
You can import an ES module using the standard dynamic import. For example, hereās how to load d3-fetch as an ES module:
d3 = import("d3-fetch")
Or more explicitly:
d3 = import("https://unpkg.com/d3-fetch@1.0.1/index.js?module")
Note that in the case of D3 modules, importing as ES modules is typically much slower than requiring:
d3 = require("d3-fetch")
Thatās because the D3 modules are authored as many small files, so importing d3-fetch as an ES module triggers 15 requests, whereas requiring d3-fetch loads its UMD bundle, which is only a single request. You can also import("d3"), but that triggers a whopping 550 requests!
(In the near future, Iāll probably release new versions of the D3 modules with module entry points in the package.json pointing to minified ES modules, rather than a deep tree of files, so that dynamic import is faster. In that case importing d3 will trigger only about thirty requests: one per D3 module.)
So you can publish your own ES modules, either to npm or to a server of your choosing, and then import them into your Observable notebook. You can convert your Observable notebook to a standard ES module (by hand for now), but since ES imports arenāt reactive and donāt support with for injection like Observable imports, the two are not exactly equivalent.
With the notebook runtime, does that mean weād be able to run and develop our notebooks locally? This is my #1 most wanted feature, and I think a prerequisite for seeing wider adoption and competing with jupyter-
2 Likes
As of last night, Observable will now store any unsaved changes to localStorage if you go offline while editing a notebook. This means you can continue working while offline and your changes will be stashed on your local computer, even if you reload the page or quit your browser. The next time you get online and visit your notebook, these stashed changes will be automatically synchronized with the cloud and saved.
(This automatic synchronization of stashed changes only happens if you havenāt concurrently edited your notebook on another computer in the meantime. In the future, I expect weāll have a user interface for resolving merge conflicts or letting you confirm the application of stashed changes.)
Weāre also looking at implementing Service Workers so that you can use Observable entirely offline. (Meaning, you donāt have to be online to start editing; we cache your notebooks on disk for offline editing.) But this isnāt trivial to implement, particularly since notebooks often load data and libraries from the web, so I canāt promise a specific date as to when this feature will be released.
The intent of the export feature is primarily to allow you to run your notebook outside of Observable, say to drive a realtime dashboard or to integrate an interactive chart prototyped in Observable in your app.
5 Likes
I am getting a:
SecurityError: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.
would this change be related?
Code to reproduce:
hpccMap = require("@hpcc-js/map")
@GordonSmith That error is not related to this thread. The issue is that the library you are requiring (the HPCC Visualization Framework tries to access localStorage within your notebook, and because notebooks are sandboxed, you get a security error.
Notebooks currently share a domain (static.observableusercontent.com), so we canāt add enable allow-same-origin in the sandbox; see Jeremyās post. A fix for this problem would be to change the HPCC library to only use localStorage if allowed. That is, the library should catch and handle the security error.
In the future, we might offer separate domains for notebooks so that we can enable allow-same-origin. But for now localStorage (and cookies, and sessionStorage) are off limits from within notebooks.
Thanks for the info. I didnāt think that library accessed local storage (I am the author) but a dependency might be.
Am also surprised its being accessed during the require as these modules should be āpureā.
(found it - loaded each dependency one at a timeā¦)
Glad to hear you are planning to open source the runtime! I think this is an important step in order to qualify for open scientific workflows.
As far as export is concerned: We are working on a spec (+ tools) for language-agnostic reproducible publications. The overall goal is to enable submissions to scientific journals. Weād be happy to consider a workflow for turning Observable notebooks into full-fledged journal submissions (including abstract, bibliography etc.) and later be able to run the code directly on a journalās website.
We recently did a community webinar, so if uāre interested you can watch a few minutes of demos and intros.
3 Likes
you can save your notebook as a JavaScript bundle and run it outside of Observable
@mbostock does ābundleā here mean something more like a compiled executable, a source file, or maybe a bit of both? Iāve been wondering about (some day) being able to hack on scripts/tools that could consume or produce notebooks.
I donāt exactly understand where Observable is saving/hosting notebooks? Are they versioned / can we see edit history? Are they in a git repository (or can they be put into one)? Is there a file format for notebooks (or maybe a multi-plain-text-file-in-a-directory format)?
Maybe this should be a new topic, but I would really love to be able to edit notebooks in my own text editor, push changes to github, and see updates in the online browser version (and vice versa). IDEs / text editors could have an observable mode created to integrate an offline runtime, etc.
Basically, if itās a plain text format built on regular files in a directory, then I can use whatever tools I want, and am not stuck in a browser. If not, I have to put in more manual work to copy/paste between local files and little browser text boxes.
4 Likes
+1 Import/export a notebook would work for me as well, it is hard to work without version control.
1 Like
watched your video and checked webpage. Indeed Observable looks like the right solution for literate publication, particularly when import/export, open source runtime etc is available. looks like that would also allow to engage Observableās runtime from a gh-page.
this sounds fantastic! I guess this would also allow us to develop observable notebooks as gh-pages.
This would really awesome. Talking use cases, I think it would be benificial to enable at least two kinds of exports: not just (1) a javascript bundle with all the newest javascript bundling details that modern web developers are into, for coders, but also (2) a āimmediately usable blog-postā kind of export, say with a html file included that layouts a document somewhat like the original notebook (maybe including reacitivity, maybe without, Iām not sure). This would target not-yet-so-experienced javascript developers, teachers, visual coders not into the details of javascript packaging, etc.
1 Like
Thank you for all of your great work!!!
I found Observable when I was looking for a solution to integrate d3.js into tiddlywiki5 for its comfortable UI and standalone notebook style.
So, question for the Wizards: is it a totally crazy idea trying to integrate the two system? I mean Observable and tiddlywiki5? Would their architecture allow trying it?
Yours sincerely, CodeXmonk
I like observables for really allowing me to understanding what is happening with the data and with concept visualization, but at some point I need to get back to writing Javascript for specific Web Applications. I know from Tom MacWright that the plan is to be able to export an observable as pure Javascript. Any thoughts from the community? Is this something you really want, or is it not very important (Observables are fine on their own)
I would really like to be able to export the awesome Observables into Javascript so that I can work with either platform. I think it would strengthen the importance of the Observable as a Javascript teaching tool. Presently it is easy to take a Javascript page and make it into an observable, but the other direction is fairly difficult to do.
1 Like
I think exporting will be great feature because
- Many Independent observable notebooks, will be very good static standalone web apps themselves (living on separate domain)
- Notebooks can be injected into separate things (web apps, blogs, articles )
- We may want to hide some variables info (a.k.a, edit generated code)
ā¦
I think this list will be big
4 Likes
I am loving Observable for my own data analysis and exploration. Its extremely easy and flexible.
However, I doubt Iāll be able to leverage this for the majority of work I do. Because of organizational restrictions, I wonāt be able to upload and analyze our data in āthe cloudā. An on-prem solution would be ideal. I understand the community is a huge goal of Observable, but I worry without an on-prem offering, you might be limiting your audience. Instead, Iām guessing many organizations will continue to use other notebooks like Jupyter.
Just my 2 cents. All this being said, keep up the fantastic work. I will try to use Observable as much as I can.
2 Likes