Software developer and power user
Published
Edited
Feb 6, 2021
5 stars
Also listed in…
Interactivity
progress = html`<progress max="100"></progress>`
{
restart;
progress.value = 0;
while (progress.value < progress.max) {
await Promises.delay(100);
progress.value += 1;
yield progress.value;
}
}
viewof restart = html`<button>Restart</button>`
feather = require("feather-icons");
icon = (name) =>
feather.icons[name]
.toSvg({
width: "1em",
height: "1em", // feather icons scale well with text
})
references = {
return FileAttachment("references-per-2021-02-06.json").json(); // comment out to update the references
return getReferences(); // to be saved as JSON for re-attachment
}
getReferences = async () => {
const references = [];
const notebooks = [
{owner: "mbostock", slug: "showing-progress"},
{owner: "observablehq", slug: "introduction-to-html"},
{owner: "tmcw", slug: "exploring-viewof"},
{owner: "observablehq", slug: "a-brief-introduction-to-viewof"},
{owner: "observablehq", slug: "introduction-to-generators"},
{owner: "mbostock", slug: "wait-until-button"},
{owner: "mootari", slug: "displaying-progress"},
{owner: "tmcw", slug: "progress-cell"},
{owner: "observablehq", slug: "introduction-to-views"},
{owner: "mbostock", slug: "fetch-progress"}
];
for (const {owner, slug} of notebooks) {
const notebookInfo = await getNotebookInfo(owner, slug);
const published = toDate(notebookInfo.publish_time);
let updated = toDate(notebookInfo.update_time);
if (updated === published) {
updated = null;
}
references.push({
published,
updated,
author: notebookInfo.creator.name,
title: notebookInfo.title,
url: `https://observablehq.com/@${notebookInfo.owner.login}/${notebookInfo.slug}`,
changes: notebookInfo.publish_version,
likes: notebookInfo.likes,
forks: notebookInfo.forks,
});
Promises.delay(1000); // be nice to the server
}
return references;
}
getNotebookInfo = (owner, slug) => {
const url = getRequestUrl(owner, slug);
return fetch(url).then(response => response.json());
}
getRequestUrl = (owner, slug) => {
const proxy = "https://observable-cors.glitch.me";
const endpoint = "https://api.observablehq.com/document";
return `${proxy}/${endpoint}/@${owner}/${slug}`;
}
toDate = (dateTimeString) => dateTimeString.slice(0, 10)
html`<style>
.feather {
vertical-align: middle
}
th > .feather {
stroke-width: 3;
}
</style>`
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.
