Observablehq Web Component

Another web experiment creating ways to publish and layouting Observablehq notebooks content.

A web component might make sense as it creates a private scope for styles, so you can import multiple cells from different notebooks.

Usage

Add the script tag to your html page

<script src="https://cdn.jsdelivr.net/npm/observablehq-web-component" defer></script>

create an <o-cell> element

<o-notebook class="flex-child" url="@d3/bar-chart" cell="chart" injections={"height":400,"color":"darkgray"}></o-cell>

`<o-notebook>`

I've name the component as <o-notebook> as for Observablehq notebook and <o-cell> for Observablehq cells.

This is a very simple implementation:

you can inject and redefine attributes from your original notebook
you can select different cells
mount the entire notebook
width is set from the parent wrapper, making it fully responsive to the parent layout, although, there are few problems related to this
you can nest under<o-notebook> multiple <o-cell> in case you want to layout multiple cells from the same notebook.

Attributes

`url`: required

notebook handle, normally user/notebook or d/hash for shared/private notebooks

`cell`: optional

if you're mounting a single notebook cell, juste name it as <o-notebook cell="NAME">, if you have multiples, read below about <o-cell>

`injections`: optional

a JSON like string with cell values you want to override example: {"height":300,"color":"brown"}, ps it's a bit annoying a JSON string as an html attribute, however, this is the easiest way to make it simple as possible

`<o-cell>`

You can nest cells from the same notebook under <o-notebook>

<o-notebook url="d/aaa64eeb1e6ec93f">
    <div class="flex">
        <o-cell name="viewof dateView" class="flex-child"></o-cell>
        <o-cell name="viewof weight" class="flex-child"></o-cell>
    </div>
</o-notebook>

Attributes

notebook handle, normally user/notebook or d/hash for shared/private notebooks

`name`: require

cell name your mounting

Example 1

Original Notebooks
- @observablehq/introduction-to-views
- @fil/synchronized-projections
link
source

<!-- multiple injections  -->
    <div class="flex">
        <o-notebook class="flex-child" url="@d3/bar-chart" cell="chart" injections={"height":300,"color":"brown"}>
        </o-notebook>
        <o-notebook class="flex-child" url="@d3/bar-chart" cell="chart" injections={"height":400,"color":"red"}>
        </o-notebook>
        <o-notebook class="flex-child" url="@d3/bar-chart" cell="chart" injections={"color":"gray"}></o-notebook>
    </div>
    <!-- viewof cell example  -->
    <o-notebook url="@observablehq/introduction-to-views" cell="viewof point"></o-notebook>
    <!-- whole notebook example -->
    <o-notebook url="@fil/synchronized-projections"></o-notebook>

    <o-notebook class="flex-child" url="@d3/bar-chart" cell="chart" injections={"height":400,"color":"darkgray"}></o-cell>

Example 2 Dashboard

Original Notebook @pierreleripoll/vegasync
link
source

<!-- single notebook multiple cells -->
    <o-notebook url="d/aaa64eeb1e6ec93f">
        <div class="flex">
            <o-cell name="viewof dateView" class="flex-child"></o-cell>
            <o-cell name="viewof weight" class="flex-child"></o-cell>
            <o-cell name="viewof sport" class="flex-child"></o-cell>
            <o-cell name="viewof sankeyView" class="flex-child"></o-cell>
            <o-cell name="viewof medalsPieView" class="flex-child"></o-cell>
            <o-cell name="viewof nationality" class="flex-child"></o-cell>
        </div>
    </o-notebook>

inception example https://observablehq.com/d/dec1870d937612eb

Problems / TODOs

If you embed two cells from the same notebook, they won't be reactive/communicate.

Other simliar projects

Aknowlegements

I was inspired by Dataflow Bostock notebook

radames / observablehq-web-component Goto Github PK