It would be helpful if there was a list of websites or organizations that are embedding observable notebooks in their public websites. I’ve done it and I there was recently a presentation of the Chicago Reporter making use of it.
It would be good to have some more examples to help convince employers/clients that it was a proven way to go about things. Anyone know of any other examples?
I did this one for the Brown Daily Herald:
Nice thanks for sharing!
I don’t think that Observable should collect that stuff without explicit permission but a volunteer effort might make sense. In that spirit, many (though not all) of the visualizations here are built with Observable:
Really? 
I agree, it should be voluntary.
Yes, I’m embedding my covid modelling viz in an organizational page… it’s in dev now. Will post the link here when in prod.
Nice, example!
Hi @mcmcclur - Thanks for sharing the link to your site. I really like ‘The evolution of Buncombe home prices and UNCA salaries’, which appears to be one of the non-Observable based pages. I appreciate how you organize your HTML and JavaScript in the source code and how well documented your examples are (e.g. this one, with a nice attribution commented in).
Any plans to port over more of your past examples to Observable?
Best regards to all!
I have no systematic plans to do so but I do sometimes find that, if I want to expand or improve an old tool, then it’s easiest to just rebuild in Observable. I have a bunch of mainly mathematical visualizations on my academic page and I could definitely see transferring them over as I need them.
Thanks for the kind words!
This is publicly mentioned, so I feel I can highlight Trase’s incredible site https://insights.trase.earth/yearbook/summary/ which uses Observable embeds for most of its visualizations.
One nice (intricate and polished) example of notebook embedding is this OpenAI blog post on a multi-agent interaction AI model:
If you peek in the web inspector, you’ll notice that the page is embedding ten different Observable notebooks in order to render the various charts on the page: a few of which — like the Seekers/Hiders rewards chart that appears on the left hand edge as you scroll down — interact with JavaScript values from the page itself (here, the scroll position).
Here’s one from @kimadactyl:
Some nice examples! I’ve embedded notebooks a couple of times on my work website:
https://nchealthworkforce.unc.edu/blog/county_physician_beeswarm/
https://nchealthworkforce.unc.edu/blog/percent_65_and_older_map/
Oh, that is nice. Thanks!
Hi
here are some 2 work build on observable with D3.js
both with dynamic data file updated by php according to our database
https://www.grottes-et-karsts-de-chine.org/npds/gkc_rcex.php
=> in the Statistique
Slightly different take - allows you embed an Observable interpreter:
We have an embedded Observable on this site (when you click on “Timeline,” that is; the “Map” one is Flourish)
Another great example (in Korean, use your browser’s translation feature):
The article mixes editorial content with interactive, interdependent cells from this notebook:
Finally have my own to add here
embedded here
https://ico.hakai.org/
First off, this is very cool - thanks for sharing!
But… man it’s slow to load! And that kind of delay on load can really affect the user experience. I haven’t looked at your code in any real detail and can’t comment on ways to speed it up there. Fortunately, there are ways to speed up the presentation of the embedded output. Here’s an alternate approach to the embedding that renders much more quickly:
https://wncviz.com/temp/quick_embed.html
The basic idea is to use Observable’s embed tool to generate the embedding code for you. Then place pre-rendered content into each of those DIVs. That pre-rendered content is replaced by the Inpector once it’s ready.
For example, if the embed tool generates something like so:
<div id="observablehq-viewof-rects-4944eb30"></div>
replace that with
<div id="observablehq-viewof-rects-4944eb30">
HTML CODE
</div>
For this example, I simply got the HTML CODE using the Copy > Outer HTML contextual menu from my browser, though there might be a better way to get a handle on that - if you’re familiar with the material.
One caveat: This only affects the presentation. The cells aren’t actually live until there rendered from the code. Having said that, it’s generally a big improvement for user experience.
What the heck?! That’s cool! How does that even work? The site is actually a notebook embedded into a react app, so not sure if this technique is still possible when combining with react. I’ll have to look into what you’ve done, but thanks for showing me this!
A lot of the lag comes from data wrangling. Since new data dumps only occur once a month or so, I’m going to save the output from the wrangling notebook and manually upload to the viz notebook. Will see how much that speeds things up.
loads much faster now that I’ve excluded the data wrangling steps!