here to learn
Notebook stepperNotebook import inspector (deprecated)Version Pinning for NotebooksSandpiles in the reactive runtimeWebSocket-powered notebook editing toolsExporting notebooks with their sourcefromV1From raw notebook source to Observable runtime V1 modulesNotebook Visualizer (Firefox-compatible)Imports: tips and tricksFind non-default global objects for "require""Force Update Pattern" in Observable
Importing data from Google Spreadsheets into a notebook / webpage
google_sheet_url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRKr_1kDne212LSVpRLgMAvQQtqItsktEXn-dgBDvCnjXCcoK_Uv4uHlIoZQ-5H_Wl9g-YBKO8cAhTO/pub?gid=1310204758&single=true&output=tsv'
url = google_sheet_url
names = { // this is a JS Array of Objects; the key-value pairs consist of the column headers and the cell data
let names =[];
const spreadsheet = await d3.tsv(url).then(data => data.forEach(d => names.push(d))); // d3.tsv returns a Promise
return names;
}
{
const randomMember = () => names[Math.floor(Math.random()*names.length)]['First name'];
const theTime = () => new Date().toLocaleString().replace(",","").replace(/:.. /," ");
const output = () => md`${randomMember()} is the member of the minute! (${theTime()})`;
yield output();
while (true) yield Promises.delay(60000, output());
}
{
function toDate (str) {
const s = str.split('/');
return new Date(s[2] /* year */, s[0]-1 /* month */, s[1]-1 /* day */);
}
const tosort = Array.from(names);
tosort.sort((a,b) => {
const datea = toDate(a['Join date']);
const dateb = toDate(b['Join date']);
let comparison = 0;
if (!isNaN(datea) && !isNaN(dateb)) comparison = dateb - datea;
else if (isNaN(datea)) comparison = -1;
else if (isNaN(dateb)) comparison = 1;
return comparison;
} );
return md`Here's a list of our club members from newest to oldest: <br><br>${tosort.map(
d => `${d['First name']} from ${d['State']} (joined ${d['Join date']})`).join(',<br>')}`;
}
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.
