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.

#d3js #data-visualization #html #observablehq