At first, I was a little worried to use d3 to create data analysis tools since I am not very good with javascript, but after all the time investment was totally worth it.
So after creating a s imple visualization using d3 (Data Driven Decisions) Observable notebook, I wanted to test how to integrate it into a HTML page:
Table of contents
Option 1: embed a Observable notebook cell(s)
Let's consider the following Observable notebook Bar Chart Transitions. To embed the chart for example a solution is to go on the chart cell and to click on the 3 vertical dots on the left side (see image below)
and copy the code provided in the pop-up window:
Then you can create on your local machine for example a 'test.html' file and insert the code provided:
<!DOCTYPE html><html lang="en"><head><title>D3 Observable Testing</title></head><body><iframe width="100%" height="584" frameborder="0"src="https://observablehq.com/embed/@d3/bar-chart-transitions?cells=chart"></iframe></body></html>
if you now open the html file with a web browser (chrome for instance), you should get something like the following image:
Note that at the bottom there are links to Observable website and to the notebook (bottom links can't be removed).
It is also possible to embed multiple cells. For example the chart and the select button (after clicking on the 3 dots, select cells that you want to show: "chart" and "viewof order" here):
Then copy and paste the code:
<!DOCTYPE html><html lang="en"><head><title>D3 Observable Testing</title></head><body><iframe width="100%" height="627" frameborder="0"src="https://observablehq.com/embed/@d3/bar-chart-transitions?cells=chart%2Cviewof+order"></iframe></body></html>
Now we have the chart + the select button at the top:
Embedding a cell is a very fast and easy option if you want to share a d3 visualization. You can for example create pretty cool presentation using revealjs (an open source HTML presentation framework) and includes some d3 visualization in it.
Option 2: download the code
Another option is to do more adance embeding (see Observable Examples and Advanced Embedding and Downloading).
To do that, just download the notebook by clicking (see image below)
then unzip the file, go under the folder called "bar-chart-transitions" here and open the file index.html with a text editor. You should get:
<!DOCTYPE html><meta charset="utf-8"><title>Bar Chart Transitions</title><link rel="stylesheet" type="text/css" href="./inspector.css"><body><script type="module">import define from "./index.js";import {Runtime, Library, Inspector} from "./runtime.js";const runtime = new Runtime();const main = runtime.module(define, Inspector.into(document.body));</script>
To test the code a solution is to use for example python, just enter
python -m http.server 8001
in a command terminal.
Then open a web browser and enter the following url "http://127.0.0.1:8001/" (Note in the image below I used the port 8009 instead of 8001 but it doesn't matter)
you can see that all cells of the notebook have been displayed here. But what if we want to show only some cells ?. Then you need to update the index.html file. For example let's show only "chart" and "viewof order":
<!DOCTYPE html><meta charset="utf-8"><title>Bar Chart Transitions</title><link rel="stylesheet" type="text/css" href="./inspector.css"><div name="viewof order"></div><div name="chart"></div><script type="module">import define from "./index.js";import {Runtime, Library, Inspector} from "./runtime.js";const runtime = new Runtime();const main = runtime.module(define, name => {if (["chart", "viewof order"].includes(name)) {return new Inspector(document.querySelector(`[name='${name}']`));};if (name === "update") return true;});</script>
Note: that here the cell called "update" needs to be run as well (the cell is run but not displayed)
Results:
Note: to debug the code a solution is to use chrome: View -> Developer -> Developer Tools.
