// fecthed 2023-07-15
// fetch(`https://en.wikipedia.org/w/api.php?format=json&origin=*&action=parse&prop=text&page=List_of_largest_cities§ion=5`).then((response) => response.json())
listLargestCities = FileAttachment("list-largest-cities_2023-07-15.json").json()
table.querySelector("tbody tr:nth-child(4)").cloneNode(true)
rowsHtml = table.querySelectorAll("tbody tr:nth-child(n+4)")
rowsData = Array.from(rowsHtml, (r) => ({
name: r.querySelector("th a").textContent.trim(),
title: r
.querySelector("th a")
.getAttribute("href")
.trim()
.replace(/^.*\//, "")
}))
Inputs.table(rowsData)
getWikiExtract = async function (name) {
const json = await fetch(
`https://en.wikipedia.org/w/api.php?format=json&origin=*&action=query&prop=text§ion=0&redirects=1&titles=${name}`
).then((response) => response.json());
return json;
}
// uncomment to test for yourself:
await getWikiExtract("Johannesburg")
getWikiExtract2 = async function (name) {
const json = await fetch(
`https://en.wikipedia.org/api/rest_v1/page/summary/${name}`
).then((response) => response.json());
return json;
}
{
const temp = await getWikiExtract2("London");
return md`${temp.extract}`;
}
// fetched 2023-07-15
// cityLabelText = Promise.all(
// rowsData.map(async (x) => ({
// label: x.name,
// text: await getWikiExtract(x.title)
// }))
// )
cityLabelText = FileAttachment("city-label-text_2023-07-15.json").json()
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.
