Introduction

Observablehq is an online notebook for tools like d3, threejs etc…

In order to display it in Fastpages blog . We need to add a display div element and some <script> from observablehq.


<div id='display'></div>


<script type="module">

// Load the Observable runtime and inspector.
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";

// Your notebook, compiled as an ES module.
import notebook from "https://api.observablehq.com/@rahuketu86/observable-demo.js?v=3";

// Load the notebook, observing its cells with a default Inspector
// that simply renders the value of each cell into the provided DOM node.
new Runtime().module(notebook, Inspector.into('#display'));

</script>

Here is a displayed notebook

Observable Demo

Table of Contents

Observable Fastpages Integration

This notebook will indicate how we can do a blog post by writing a notebook in Observable and adding the same inside a markdown file which is then rendered by Fastpages in a blog post

Steps involved in the process:

  • Add a blogpost in Observable notebook. Please take care of following guidelines for good looking post
    • Imports should be done at the bottom in a section called Appendix
    • For most of the notebook , it might be better to hide code cells by unpinning them
    • Integrating TOC can be useful. A function is defined at the bottom
    • Title cell "h1" can be dynamically hidden using style. as indicated at the bottom
    • Start everything with h2 or '##' for the heading . This will combine well with title of markdown which is set in Fastpages Frontmatter

Example of Tex

E=mc2E = mc^2 v=stv = \frac{s}{t}
∫01x2 dx \int_0^1 x^2\,dx

Example of Static Plot

050100150200250300350400↑ Frequency1.5 ≤ x < 2 172 ≤ x < 2.5 652.5 ≤ x < 3 1383 ≤ x < 3.5 2403.5 ≤ x < 4 3174 ≤ x < 4.5 3644.5 ≤ x < 5 4355 ≤ x < 5.5 3805.5 ≤ x < 6 3266 ≤ x < 6.5 2186.5 ≤ x < 7 2007 ≤ x < 7.5 1407.5 ≤ x < 8 888 ≤ x < 8.5 688.5 ≤ x < 9 449 ≤ x < 9.5 299.5 ≤ x < 10 2310 ≤ x < 10.5 1310.5 ≤ x < 11 1011 ≤ x < 11.5 911.5 ≤ x < 12 912 ≤ x < 12.5 612.5 ≤ x < 13 813 ≤ x < 13.5 1113.5 ≤ x < 14 914 ≤ x < 14.5 1014.5 ≤ x < 15 515 ≤ x < 15.5 815.5 ≤ x < 16 316 ≤ x < 16.5 316.5 ≤ x < 17 517 ≤ x < 17.5 217.5 ≤ x < 18 318 ≤ x < 18.5 318.5 ≤ x < 19 219 ≤ x < 19.5 019.5 ≤ x < 20 220 ≤ x < 20.5 020.5 ≤ x < 21 221 ≤ x < 21.5 021.5 ≤ x < 22 122 ≤ x < 22.5 022.5 ≤ x < 23 023 ≤ x < 23.5 123.5 ≤ x < 24 024 ≤ x < 24.5 124.5 ≤ x < 25 025 ≤ x < 25.5 025.5 ≤ x < 26 026 ≤ x < 26.5 1234567891011121314151617181920212223242526Unemployment rate (%) →

Example of Dynamic Widget

count = 12
12

Example of SVG

Appendix

toc = ƒ(…)
d3 = Object {event: null, format: ƒ(t), formatPrefix: ƒ(t, n), timeFormat: ƒ(t), timeParse: ƒ(t), utcFormat: ƒ(t), utcParse: ƒ(t), FormatSpecifier: ƒ(t), active: ƒ(t, n), arc: ƒ(), area: ƒ(), areaRadial: ƒ(), ascending: ƒ(t, n), autoType: ƒ(t), axisBottom: ƒ(t), axisLeft: ƒ(t), axisRight: ƒ(t), axisTop: ƒ(t), bisect: ƒ(n, e, r, i), bisectLeft: ƒ(n, e, r, i), …}
height = 202
width = 640
margin = Object {top: 20, right: 0, bottom: 0, left: 30}
data = Array(366) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]
fruits = Array(8) [Object, Object, Object, Object, Object, Object, Object, Object]
x = ƒ(n)