How to Insert an Observablehq Graph into a HTML Page
By: Angelica Lo Duca
Tags: Observablehq, Data Visualization, HTML, Data Science, D3js

Data Visualisation

How to Insert an Observablehq Graph into a HTML Page

Image by Author

Observablehq is a very popular notebook to write code exploiting the D3.js library. Thanks to the many examples and tutorials available on the Web, you can fork already built notebooks and customise them for your needs.

However, once built a graph, it is not immediately easy to embed into another Web site.

In this tutorial, I propose two strategies to embed a graph into a Web site:

through iframe

producing the Javascript of the graph.

In both cases, firstly, you must to publish your notebook, by clicking the publish button.

In addition, in both cases, you should follow the following steps:

download the embedding code from Observable

insert the code into your HTML page.

In this tutorial I use the example graph available at this link.

Iframe

The first solution is quite simple and it is also used for other Web sites. It is based on the use of iframes. In practice, an iframe is a HTML document embedded within another HTML document.

Download the embedding code

In order to download the embedding code, you must look at your graph in the Observable notebook, and click on the three vertical dots in the left part of your graph, as shown in the following figure:

Image by Author

A menu opens, such as the following one:

Image by Author

You can select Embed and then select iframe from the dropdown menu:

Image

Then you can click on the button Copy. Now the code is copied in your clipboard. The copied code looks like the following one:

Insert your code into a HTML Page

Now you can insert the copied code into your HTML page, exactly in the point were you want the graph is shown.

For example, you can insert after a paragraph:



<head>...</head>

<body>

<p>Before my graph</p>

<iframe width="100%" height="584" frameborder="0"

src="

</body>

</html> ... Before my graph https://observablehq.com/embed/@alod83/italian-covid-19-positives?cells=chart ">

Pros and Cons

The main advantage of using this technique is that it is very quick and fast.

However, an iframe does not inherit the parent document properties, such as fonts. In addition, usually an iframe is not responsive, in the sense that it cannot be adapted to small devices screens, such as smartphones and tablets.

Download the Javascript

Another strategy to embed an Observable graph into your HTML page involves downloading the full javascript which generated it.

Download the embedding code

This step is quite similar to that followed to download the code as iframe:

click on the three vertical dots in the left part of your graph

select Embed

The only difference is that when you must select the type of code from the dropdown menu, you must select Runtime with Javascript:

Image by Author

Then you click on copy. Your copied code could be very long, thus you should past into an empty document and call it graph.js . In my case, the produced code is not very long and looks like the following one:



<p>Credit: <a href=" Credit: https://observablehq.com/@alod83/italian-covid-19-positives ">Italian COVID-19 positives by Angelica Lo Duca

import {Runtime, Inspector} from "

import define from "

new Runtime().module(define, name => {

if (name === "chart") return new Inspector(document.querySelector("#observablehq-chart-0a7b99e8"));

});

</script> import {Runtime, Inspector} from " <a href="https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js" class="ek le" rel="noopener ugc nofollow">https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js</a> ";import define from " <a href="https://api.observablehq.com/@alod83/italian-covid-19-positives.js?v=3" class="ek le" rel="noopener ugc nofollow">https://api.observablehq.com/@alod83/italian-covid-19-positives.js?v=3</a> ";new Runtime().module(define, name => {if (name === "chart") return new Inspector(document.querySelector("#observablehq-chart-0a7b99e8"));});

You can see that there is a div at the beginning of the code, then a paragraph with credits and finally the javascript, which starts with <script> . This last part can be very long.

Insert your code into a HTML Page

The div will contain your graph, so you can copy it exactly where you want it appears in your html. The div should look like the following one:

<div id="observablehq-chart-0a7b99e8"></div>

For example you can copy after a paragraph:

<html>

<head>...</head>

<body>

<p>Before my graph</p>

<div id="observablehq-chart-0a7b99e8"></div>

</body>

</html>

And now you can clean the document chart.js in order to contain only the javascript code. You can remove credits and the script tags.

The final chart.js should appear as the following one:



import define from "

new Runtime().module(define, name => {

if (name === "chart") return new Inspector(document.querySelector("#observablehq-chart-0a7b99e8"));

}); import {Runtime, Inspector} from " https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js ";import define from " https://api.observablehq.com/@alod83/italian-covid-19-positives.js?v=3 ";new Runtime().module(define, name => {if (name === "chart") return new Inspector(document.querySelector("#observablehq-chart-0a7b99e8"));});

The last step involves the inclusion of the produced javascript file into the original HTML page, immediately after the div which will contain the graph:

<html>

<head>...</head>

<body>

<p>Before my graph</p>

<div id="observablehq-chart-0a7b99e8"></div>

<script src='chart.js'></script>

</body>

</html>

You can save the HTML page and now the graph is embedded in your HTML page!

Pros and Cons

This solution should be responsive and inherit all the layout of the parent document. However, it is more complex to implement than the previous one.

Summary

In this articles I have described two strategies to insert a graph produced with Observable into a HTML page:

iframe

javascript

Indeed, Observable also provides another strategy, Runtime with React, which I do not have dealt in this article.

If you wanted to be updated on my research and other activities, you can follow me on Twitter, Youtube and Github.

Related Articles