Public
Edited
Feb 4, 2024
viewof site = htl.html`<input type=text placeholder="type a wiki site">`
audit
async function* stepwiseLoad(url) {
const state = {
url,
label: 'unstarted',
log: [],
};
function report(label, data={}) {
state.label = label;
state.log.push({...data, event: label, date: new Date()});
return state;
}
try {
let p, response;
yield report('created');
p = fetch(url, {method: 'head', mode: 'cors'});
yield report('head-requested');
response = await p;
yield report('found', {response});
if (!response.ok)
throw new Error(response.status);
if (!url.endsWith('.json')) {
yield report('done');
return;
}
p = fetch(url, {mode: 'cors'});
yield report('body-requested');
response = await p;
yield report('body-responded', {response});
if (!response.ok)
throw new Error(response.status);
const data = await response.json();
yield report('parsed', {data});
const tally = tallyKeys(data);
yield report('tallied', {tally});
yield report('done');
} catch (error) {
state.error = error;
yield report('failed', {error});
}
return;
}
function tallyKeys(data) {
if (!_.isArray(data)) {
throw new Error('expected top-level of wiki sitemap to be an array');
}
let tally = {
entries: data.length
};
for(let entry of data) {
for(let key of Object.keys(entry)) {
tally[key] ||= 0;
tally[key] += 1;
}
}
return tally;
}
viewof fred = {
function* doit(seed) {
yield {where:'first', seed};
yield {where:'second', seed};
yield {where:'third', seed};
yield {where:'fourth', seed};
yield {where:'fifth', seed};
}
const iter = doit({bar:'PLUGH'});
const container = htl.html`<div><button onclick=${next}>click</button></div>`;
container.value = iter.next().value;
function next(event) {
const what = iter.next();
if (!what.done) {
container.value = what.value;
container.dispatchEvent(new Event('input'));
} else {
event.currentTarget.disabled = true;
}
}
return container;
}
fred
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.