Published
Edited
Aug 17, 2020
8 stars
data
importCell("chart", notebook.definition, { data: data })
data
notebook.data
Runtime = (await require("@observablehq/runtime@4")).Runtime
gallery = fetch("https://api.observablehq.com/@d3/gallery.js?v=3")
.then(r => r.text())
.then(t => t.match(/\{\n\s{2}path([\s\S]*?)\}/g))
.then(t => t.map(d => JSON.parse(d.replace(/\n\s{2}/g, "\"").replace(/\:/g, "\":"))))
.then(a => Promise.all(a.map(async d => ({...d, definition: (await import(`https://api.observablehq.com/${d.path}.js?v=3`).then(m => m.default).catch(() => false))}))))
.then(m => m.filter(({definition}) => definition))
.then(m => m.reduce(async (acc, n) => await getCell("data", n.definition, true) && await getCell("chart", n.definition, true) ? [...await acc, n] : acc, []))
.then(m => Promise.all(m.map(async d => ({...d, data: await getCell("data", d.definition)}))))
.then(f => f.sort((a, b) => a.title.localeCompare(b.title)))
mutable notebook = gallery.filter(n => vaguelySimilar(data, n.data))[0]
async function getCell(cell, definition, exists = false) {
const runtime = new Runtime();
const module = runtime.module(definition);
const value = exists ?
await module.value(cell).then(() => true).catch(() => false) :
await module.value(cell);
runtime.dispose();
return value;
}
// Adapted from https://observablehq.com/@mbostock/dataflow
async function importCell(
cell, // e.g., "chart"
definition, // e.g., "@d3/bar-chart"
injections = {} // e.g., {data: [{name, value}, …]}
) {
const runtime = new Runtime();
const main = runtime.module();
for (const name in injections) {
main.define(name, [], () => injections[name]);
}
const imported = runtime.module(definition);
const derived = imported.derive([...Object.keys(injections)], main);
return Generators.observe((notify) => {
main.variable({
fulfilled(value) { notify(value); },
rejected(value) { notify(Promise.reject(value)); }
}).import(cell, derived);
return () => runtime.dispose();
});
}
mutable all = false;
html = (await require("htl@0.2")).html
function preview(notebook) {
let { path, title, author, thumbnail } = notebook
return html`<a target="_blank" title="${title} by ${author}" style="display: inline-flex; flex-direction: column; align-items: start; font: 400 .75rem var(--sans-serif); color: #1b1e23; width: 100%;" onmouseover=${event => (event.currentTarget.firstElementChild.style.borderColor = "#1b1e23")} onmouseout=${event => (event.currentTarget.firstElementChild.style.borderColor = "#e8e8e8")} onclick=${event => { mutable notebook = notebook; }}>
<div style="border: solid 1px #e8e8e8; border-radius: 4px; width: 100%; padding-top: 62.5%; background-size: cover; background-image: url(https://static.observableusercontent.com/thumbnail/${encodeURI(thumbnail)}.jpg);"></div>
<div style="width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">${title}</div>
</a>`;
}
// https://stackoverflow.com/a/35047888
function objectsHaveSameKeys(...objects) {
const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
const union = new Set(allKeys);
return objects.every(object => union.size === Object.keys(object).length);
}
function vaguelySimilar(...datasets) {
let similar = false;
if(datasets.every(obj => obj instanceof Map)) {
// If the datasets are maps then pass their values
similar = vaguelySimilar(...datasets.map(obj => [...obj.values()][0]));
} else if (datasets.every(obj => Array.isArray(obj))) {
if (datasets.every(obj => Array.isArray(obj[0]))) {
// Give arrays of arrays the benefit of the doubt
similar = true;
} else {
// If the datasets are arrays of objects then pass their first elements to objectsHaveSameKeys
similar = objectsHaveSameKeys(...datasets.map(obj => obj[0]));
}
} else {
similar = objectsHaveSameKeys(...datasets);
}
return similar;
}
datasets = new Map([
["Apple stock price", FileAttachment("aapl.json").json().then(res => res.map(d => ({...d, date: new Date(d.date)})))],
["Diamonds", FileAttachment("diamonds_xy.json").json()],
["D3 package hierarchy", FileAttachment("d3.json").json()],
["mtcars MPG", FileAttachment("mtcars-mpg.json").json()],
["US population 2016", FileAttachment("us-popl-2016.json").json()],
])
mutable data = datasets.get("Apple stock price")
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.