🏠 back to Observable

Examples of websites that embed from observable

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?

4 Likes

I did this one for the Brown Daily Herald:

5 Likes

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? :slight_smile:

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!

2 Likes

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!

1 Like

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!

1 Like

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.

1 Like

@mbrownshoes,

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).

5 Likes

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/

3 Likes

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: