Observable Notebooks 2.0 Technology Preview (opens in new tab)

Thank you. I don’t want to commit to a public timeline on the web editor yet, but rest assured it is a top priority, and we also value the convenience of a web editor, instant collaboration, and community!

They probably could have explained better what hasn’t changed. Observable Notebooks work like a spreadsheet or makefile. The cells aren’t executed top to bottom (like a Jupyter Notebook). Instead they’re executed in dependency order.

Looks like this is still true with the new system:

> The Build API analyzes cell source code to find unbound references, such that the appropriate variable graph can be initialized using the Observable Runtime. For non-JavaScript cells (such as Markdown, HTML, and SQL), the Build API also transpiles the source into a tagged template literal expression.

This is unlike other document formats. They made the cells look like standard JavaScript now (versus the JavaScript variant they had before) but the file format is necessarily different, because the execution model is different. There is a build step to ensure that the cells will be executed in the right order on page load.

Have a look at https://observablehq.com/@observablehq and just poke around.

It's a neat tool that solves a lot of specific sharing/visualization problems (think of newsroom data analysis).

I like observable but I hate how much it feels like the service has been taken over by product managers looking for that next bump.

Im in the same boat. In theory JavaScript holds more potential to make finely crafted visuals. But you're right, the ecosystem is so mature I still find other ecosystems lacking.

But if anything would change my opinion this has the right set of values

Exporting as client-side webpages, maybe? I liked using it to prototype some interactive D3.js charts that I would later move to my website. Also some people just are more comfortable with JS than Python

Maybe I just don't know enough python libraries but I can get to a good-looking interactive visual in Observable in almost no time at all.

It depends where you're coming from, I suppose. The web is pretty popular. Web developers are more familiar with HTML, CSS, and JavaScript, and with various visualization libraries in the JavaScript ecosystem. I quite like Observable Plot [1].

I'm not familiar enough with Python or Jupyter to know how you would build similar visualizations with them. What would you use?

[1] https://observablehq.com/@observablehq/plot-gallery

I think marimo is a python version of the same idea: https://marimo.io/

> never felt that I couldn't do any visualization with Python

Yes but, probably what they are shooting for are mini apps that you can just copy pasted into a front-end codebase and not some weird-ass python dsl

We’re interested in adding a TypeScript cell mode, probably first with type stripping rather than validating types. I was hoping for a pure JavaScript implementation; maybe we’ll try https://github.com/bloomberg/ts-blank-space? I’ve also been looking at https://github.com/val-town/codemirror-ts for the editor, but it’s a lot of machinery.

Yeah. I can believe that this will improve in the future, and this is a technology preview and all. But my takeaway from the video is that it is still too vibey for me to trust it. If I was coaching a junior data analyst at my company, and they wrote this code, I would happily give some feedback so that they can improve. With AI, I'd probably just do the analysis myself.

In addition to the hardcoded lookup table, here are some other notes on the generated code:

1. Silently assuming that the first page of results contains all of the data feels a bit fragile. If we're not going to bother with paging otherwise, I'd at least assert that the first page contains everything.

2. Unlike the code comment claims, 2022 is not the latest year that has data available, 2023 is. The reason this is worrisome is not that the difference is massive, but because of methodological implications. It looks like the year 2022 came from "remembering" details from some other code that was analyzing this same data set instead of just looking at current version of the data set we're supposed to be analyzing.

3. The code for removing the world aggregate doesn't actually work (although it doesn't matter for the map). The place where it says d.country.id !== "WLD" should be either d.country.id !== "1W" or d.countryiso3code !== "WLD" instead. Also, if it would actually be important to filter this then presumably it would also be important to filter out a bunch of other aggregates as well.

4. The text says "darker colors indicating higher life expectancy", which is pretty much the opposite of how I would describe this color scheme.

5. The analysis given is: "Notice how certain regions tend to cluster together in terms of life expectancy, reflecting similar economic, healthcare, and social conditions". This is such a bland take. It feels like something I could have written before seeing the data. I would try to encourage the analyst to look for something more concrete and more interesting.

6. The actual thing that immediately pops out from the map is that the Central African Republic is a massive outlier with a life expectancy of 18.8 years, whereas every other country is over 50. This doesn't seem plausible. I would do something about that just so that it doesn't mess up the colors of the entire map.

> I wish Bostock et al got paid.

They do get paid. Observable sells team and enterprise licenses: https://observablehq.com/pricing

Who parks a Porsche in front of a fancy Pacific Heights (San Francisco) mansion with the license plate "D3JS"?

Say more?

I work on a quantitative user research team, and we've found notebooks to be really useful for crunching and visualizing the data from experiments we've run.

I work at Google and my UXR colleagues are more comfortable with Python than JS, so we use Google Colab, but I'd use Observable if those weren't true.

They made the syntax look familiar so that standard editors (and LLM’s) will work, but this is still a custom file format that requires a build step to convert into an HTML page. See my other comment.

The build tool is open source and unlike a Jupyter notebook, it’s easy to edit without a custom editor. So you don’t need their editor, but it will still be nicer to edit with their editor.

self-plug that you might be interested in: I built a thin wrapper around the Observable Runtime that allows you to more easily use it in a pure HTML context: https://maxbo.me/celine/

I think the goal is explicitly not to go all-in on normal web development, to maintain some opportunity to monetize.

D3.js started as/still is just a (collection of) JS libraries. Then Observable came along, and while it is a nice tool for tinkering with D3, it was not at all obvious how to then move your finished Observable D3 viz to a fully self-hosted, regular website (without paying a subscription to use their custom runtime or servers or whatever).

Now I guess they realize they strayed way too far from "the web" and are back-tracking.

I was wondering the same.

FWIW, the HTML custom elements spec does require a hyphen: https://html.spec.whatwg.org/multipage/custom-elements.html#...

Or get the golden ticket through an acquisition.

> Would this be open source?

No? How would they make money?

I don't know but it's nice if the local app doesn't have the 50MB file size limit that the hosted notebooks have.

Not exactly. Jupyter notebooks execute top-to-bottom at startup and then you can manually execute cells in whatever order you choose after that. I believe it’s the manual execution that gets people, because it can have inconsistent results. But just rerunning the entire file automatically (like reloading a web page) might be slow if some build steps are slow (they can read or write huge files), and some people have slow steps in their notebooks. They could use manual cell regeneration to intentionally avoid rebuilding cells, when stale data is acceptable.

On the other hand, I don’t know if Observable Notebooks 2.0 even does incremental builds anymore? If not, it’s just about presentation order, similar to literate programming.

Observable Framework had data loaders for creating static snapshots of data at build time. I don’t see any mention of how to handle data loading in Observable Notebooks 2.0.

Why should irrelevant nerd junk be at the top of my notebook? If the point of the notebook is to inform and educate the reader, that's a distracting limitation.

Because it makes the reactive model work - and work quite efficiently. Cells don't re-run just because of edits, but also if the reader interacts with any of the interactive inputs.