Full source code of Observable page?

Hi,

I’m new to both D3.js and Observable.
Thanks to the great work of Observable,
I found many beautiful example here.

However, for a newbie, it’s frustrating that there is
no simple way to get full source code of a page.

Is there any workaround?

Thanks

Have you tried the “Download code” option in the notebook menu in the upper right?

This screenshot is from the beta version of Observable, in this case https://next.observablehq.com/@d3/sortable-bar-chart (the “next.” at the start gets you the beta), but it’s also in ‘classic’ Observable.

That’s the compiled source of a notebook. I know it can look sort of intimidating, especially if you’re also new to D3; it’s not easy to copy and paste the whole thing directly into a different environment. We think the price is worth it, because it’s necessary to make Observable a nice reactive place to code, but it can definitely be frustrating! I once went through and annotated an example of what you get from that download, which might be helpful: An Observable Notebook.

We also have embedding options for if you want to just e.g. paste in an iframe somewhere: https://next.observablehq.com/@observablehq/introduction-to-embedding?collection=@observablehq/embedding-notebooks

2 Likes