Observable

Observable Blog

Notebooks can be embedded and customized anywhere on the web (or off it).

Embedding Notebooks

I can't seem to get oEmbed to work. For example, the following link indicates that it's not working with iframely:

https://iframely.com/embed/https%3A%2F%2Fobservablehq.com%2Fembed%2F%40d3%2Fsortable-bar-chart%3Fcell%3Dviewof%2Border%26cell%3Dchart

Mark McClure

We'll look into it! Our oEmbed PR (https://github.com/iamcal/oembed/pull/479) on GitHub is still waiting to be merged, that might do it. But maybe we need to reach out to iFramely and give them a heads up. This currently works with Embedly because we worked with them directly.

Thomas Ballinger

Yes - it does seem to work on Embedly - thanks!

I notice, though, when I past your example URL in the Embedly code generator that the chart shows up but not the drop down menu.

https://embed.ly/code

Good catch, we're still working with them on this. Currently you get one cell, the last one in your url, because their default query param handing code only expects one value for cell=. So you can currently embed entire notebooks or single cells, but multiple cells are coming soon!

Hi I also notice that with embedly cells viewof don't work, for  example https://embed.ly/docs/explore/oembed?url=https%3A%2F%2Fobservablehq.com%2Fembed%2F%40codingwithfire%2Fwhere-are-votes-outstanding-visualization-ideas%3Fcell%3Dviewof%2Bcartogram 

also notice it takes the last cell from the URL! again the viewof+order doesn't work

https://embed.ly/docs/explore/extract?url=https%3A%2F%2Fobservablehq.com%2Fembed%2F%40d3%2Fsortable-bar-chart%3Fcell%3Dchart%26cell%3Dviewof%2Border


https://embed.ly/docs/explore/extract?url=https%3A%2F%2Fobservablehq.com%2Fembed%2F%40d3%2Fsortable-bar-chart%3Fcell%3Dviewof%2Border%26cell%3Dchart

Radamés Ajna

Thank you Radamés, that's a bug on our side! I'll update here once this is fixed.

Hi @radames — I’m terribly sorry for the 3+ month delay, but I’ve finally fixed the Embedly issues (both viewof and multiple cells). It’s entirely my fault it took so long. Let me know if you have any issues.

Toph Tucker

hi @tophtucker thanks for the update! no worries about the delay!

[Broken link](https://observablehq.com/d/8bee408fe85392b4?collection=@observablehq/embed-trail) is broken ;)

@somethingelseentirely Thank you, good catch! That was pointing to an internal fork of the docs; I've fixed to point to https://observablehq.com/@observablehq/downloading-and-embedding-notebooks.

What if I want to change some variable from outside the js embed, in the "host" webpage where the embed is now sitting, so the dataviz embedded changes... is there a way to do it?

Andres Snitcofsky

@Andres: This question would probably be a better fit for the forum, with a full description of what you're trying to do:
https://talk.observablehq.com/

Having said that, you might be looking for Redefine:
https://observablehq.com/@observablehq/downloading-and-embedding-notebooks#redefine

No notebook is an island; it draws from others’ work, and it exists to say something to someone somewhere else. Sometimes, an image of a chart will not suffice; your notebook may be interactive, or it may pull live data. It’s dynamic, and the version you show elsewhere should be, too.

One platform to build and deploy the best data apps