Observable notebooks are like spreadsheets, where cells run automatically whenever you edit or values change. That’s not how conventional (imperative) programming languages work, so sadly you can’t simply copy-paste a whole notebook into a vanilla JavaScript application.
We recognize that this is a change and a disruption: a new thing to learn. And we need to do a better job of helping you learn Observable (and explaining why you should bother).
Yet despite our shortcomings, we fundamentally believe that Observable is a better way to code: easier to understand, easier to tinker, easier to adapt and reuse, easier to collaborate and share.
You can download the vanilla JavaScript for any notebook by clicking Download Code in the notebook menu. (See Downloading and Embedding for details.) This code can be self-hosted so you can run whatever you create in Observable anywhere. And our embeds are much more powerful than iframes, allowing deep integration (e.g., with React). We’re making this easier; see Jeremy’s Handy Embed Code Generator for a start. This transpiled code isn’t intended to be edited directly; we recommend you edit on Observable.
As to the broader question of why go to the trouble to introduce a new language, a live editor, and a collaboration platform to accompany it: our goal is to help people help each other. We want to foster collaboration and creativity. For this to succeed, code must become more approachable, which means breaking a few eggs. There’s an incredible community of people on Observable that can help you (through comments and suggestions) and a wealth of techniques to learn from and reuse (through forks and imports). With the Observable community, the D3 examples can be so much better than what I could ever make on my own.