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>
`
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.