Extending Observable to the backend with a custom serverless runtime.
Innovative live-coding workflows against production traffic.
screenshot = {
runDemos;
const browser = await connect();
const page = await browser.newPage();
await page.goto("https://news.ycombinator.com");
const buffer = await page.screenshot();
const imgBlob = new Blob([buffer], { type: "image/png" });
const img = htl.html`<img width="400px" src=${URL.createObjectURL(imgBlob)}>`;
browser.close(); // Usage based pricing! Close when not in use!!!
return img;
}
scrapeDOM = {
runDemos;
const browser = await connect();
const page = await browser.newPage();
await page.goto("https://news.ycombinator.com");
await page.waitForSelector(".titlelink");
// Get the link to all the required books
let links = await page.$$eval(".titlelink", (links) =>
links.map((link, i) => ({
rank: i + 1,
href: link.href,
title: link.innerHTML
}))
);
browser.close(); // Usage based pricing! Close when not in use!!!
return Inputs.table(links, {
columns: ["rank", "title", "href"],
layout: "auto"
});
}
Plot.plot({
y: {
axis: null
},
marks: [
Plot.barX(completeEvents, {
x1: "ts",
x2: "te",
y: "depth",
fill: "#000",
})
]
})
traceData = {
runDemos
const browser = await connect()
const page = await browser.newPage();
// Drag and drop this JSON file to the DevTools Performance panel!
await page.tracing.start({categories: ['blink', 'cc', 'netlog', 'v8', 'sequence_manager', 'toplevel']});
await page.goto('https://observablehq.com');
const buffer = await page.tracing.stop();
await browser.close();
return buffer
}
htl.html`
<a download="profile.json" href="${URL.createObjectURL(new Blob([JSON.stringify(JSON.parse(traceData))], {type: "application/json"}))}"> download profile data</a>
<p>Its compatible with <a href="https://chromedevtools.github.io/timeline-viewer/">timeline-viewer</a>
`
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.
