The avatar for @randomfractals
Taras Novak
I map 🗺️ & graph 📈 data 🈸
Published
Observable Notebooks
Edited
Aug 25, 2020
Fork of An Unofficial ObservableHQ Compiler 💻
17 stars
Insert cell
Insert cell
Insert cell
compiler = require('@alex.garcia/unofficial-observablehq-compiler@v0.5.0')
Insert cell
compile = new compiler.Compiler()
Insert cell
Insert cell
Insert cell
runtime = require('@observablehq/runtime')
Insert cell
// takes in a "define" function (from compiler) and renders it to an html element
render = define => {
const div = html`<div>`;
const rt = new runtime.Runtime();
rt.module(define, runtime.Inspector.into(div));
return div;
}
Insert cell
Insert cell
render(
await compile.module(`

a=1

b = 2

c = a + b
`)
)
Insert cell
Insert cell
import {getNotebookByUrl} from '@randomfractals/notebooks'
Insert cell
notebookUrl = '@randomfractals/notebook-info'
Insert cell
notebookMetadata = getNotebookByUrl(notebookUrl)
Insert cell
notebookModule = await compile.notebook(notebookMetadata)
Insert cell
Insert cell
notebookView = html`<div style="height: 600px; overflow: scroll; border: thin solid #666; padding: 0px; resize: vertical;">${render(notebookModule)}</div>`
Insert cell
Insert cell
Insert cell
render(
await compile.module(`

md\`This cell contains **markdown**
- ~~isn't~~
- *this*
- [cool](https://www.youtube.com/watch?v=dQw4w9WgXcQ)?\`

{
let i = 1;
while(i) {
yield Promises.tick(100, ++i);
}
}

d3 = require('d3-array')

html\`<img src="https://images.dog.ceo/breeds/dhole/n02115913_4117.jpg" width="100">\`

`)
)
Insert cell
Insert cell
render(
await compile.module(`
import {ramp} from "@mbostock/color-ramp"

ramp(t => \`hsl(\${t * 360}, 100%, 50%)\`)

import {map} from "@d3/interrupted-sinu-mollweide"

map

import {giraffe} from "https://observablehq.com/@lemonnish/animated-canvas-layers"

giraffe
`)
)
Insert cell
Insert cell
{
// Wait for user to scroll to this cell (hi!)
await visibility();

let define;
const div = html`<div>`;
yield div;
const rt = new runtime.Runtime();
const observer = runtime.Inspector.into(div);

// this is the starting definitions for a, b, c. We will redefine these cells later.
define = await compile.module(`

a = 1;

b = 2;

c = a + b;
`);
const main = rt.module(define, observer);

// wait 2 seconds, then redefine a to be 100. This means c will become 102.
await Promises.delay(2000);
await compile.cell(`a = 100`).then(({ redefine }) => {
redefine(main);
});

// Wait 2 more seconds, redefine b to be twice the value of a.
await Promises.delay(2000);
await compile.cell(`b = 2 * a`).then(({ redefine }) => {
redefine(main);
});

// Wait 2 more seconds, create new cell d to be a string.
await Promises.delay(2000);
await compile.cell(`d = "hi, I'm d!"`).then(({ define }) => {
define(main, observer);
});
}
Insert cell
Insert cell
compile.moduleToESModule(`a = 1

b = 2

c = a + b

viewof d = html\`<input type="text" value="current: \${c}">\`
`)
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more