One of the latest features released by the Observable team is the ability to download and embed notebooks, which is what I’ve done below, thanks to some help from Philippe Rivière. Behind the scenes a notebook I’ve created is requesting data from a MapD GPU database and rendering visual output to an HTML Canvas element using D3JS.
Try selecting a different airline name from the dropdown menu below and you’ll see the map and legend update in real time.
This works as follows:
First, you need to grab a link to a notebook’s source code by clicking on the Ellipsis icon (
…) and then “Download Code”. I’m linking to a notebook I created called Mapping Airline Data From a MapD Database, and here’s the link to download that Notebook’s source code:
Next, by using a
<script> tag in your webpage you may import your notebook. Note that the type of script is not your typical
In the code snippet above I’m rendering cells selectively from my notebook (thanks again Phillipe!), rather than all of them, so I also have to add a few DOM elements for the selected cells to mount to:
The elements above with the
ids are used by the Observable Runtime to mount cells to. The
div.fullwidth simply wraps a couple of cells so that they may use the full width of the browser’s viewport.
Top it off with some CSS, and 🎉🎉🎉!!!, we have Observable Notebooks embedded in our website.