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

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more