availabilityDashboard = { const {default: sdmxRest} = await import("https://cdn.jsdelivr.net/npm/sdmx-rest@2.20.0/+esm"); const endpoint = "https://api.datacommons.org"; const service = { id: "DATACOMMONS", name: "Data Commons production", url: endpoint + "/sdmx/v3", api: "v2.0.0" }; const accept = "application/vnd.sdmx.structure+json;version=2.0.0"; const baseConstraints = { "c[variableMeasured]": "Count_Person", "c[observationAbout.containedInPlace+]": "country/USA", "c[observationAbout.typeOf]": "County" }; async function getAvailability(component, extraConstraints = {}) { const query = sdmxRest.getAvailabilityQuery2({ context: "dataflow=DC:DF_OBS(1.0.0)", key: "*", component }); const builderUrl = sdmxRest.getUrl(query, service); const constraints = {...baseConstraints, ...extraConstraints}; const url = new URL(builderUrl); for (const [name, value] of Object.entries(constraints)) { url.searchParams.set(name, value); } const response = await sdmxRest.request2(url.href, { headers: { Accept: accept, "X-Api-Key": "AIzaSyCTI4Xz-UW_G2Q2RfknhcfdAnTHq5X5XuI" } }); if (!response.ok) { throw new Error(`Data Commons SDMX request failed: ${response.status} ${response.statusText}`); } const payload = await response.json(); const values = (payload.data?.dataConstraints ?? []) .flatMap((constraint) => constraint.cubeRegions ?? []) .flatMap((region) => region.keyValues ?? []) .filter((keyValue) => keyValue.id === component) .flatMap((keyValue) => keyValue.values ?? []); return { component, client: "sdmx-rest@2.20.0 availability builder + request2", values: Array.from(new Set(values)).sort(), url: url.href, fetchedAt: new Date() }; } const root = document.createElement("div"); root.className = "availability-explorer"; root.innerHTML = '' + '

LOADINGQuerying Data Commons production availability…

' + '

Available provenances

—

' + '

Measurement methods

—

' + '

Counties for selected provenance

—

' + '

Counties for selected method

—

' + '

Availability coverage funnel

County availability narrows as provenance and measurement-method constraints are applied.

' + '

Available county DCIDs

Counties available for the selected provenance and measurement method.

' + '

Active SDMX Availability queries

' + '

Demo story: Availability discovers valid query choices and coverage before the SDMX REST Data notebook retrieves OBS_VALUE.

'; const status = root.querySelector(".status"); const statusText = root.querySelector(".status-text"); const provenanceSlot = root.querySelector(".provenance-slot"); const methodSlot = root.querySelector(".method-slot"); const chartSlot = root.querySelector(".chart-slot"); const tableSlot = root.querySelector(".table-slot"); const querySlot = root.querySelector(".query-slot"); function setStatus(kind, text) { status.className = "status " + kind; status.textContent = kind === "error" ? "ERROR" : kind === "loading" ? "LOADING" : "LIVE"; statusText.textContent = text; } function setCount(selector, value) { root.querySelector(selector).textContent = value == null ? "—" : value.toLocaleString(); } function renderQueries(results) { querySlot.replaceChildren(); for (const result of results) { const code = document.createElement("code"); code.textContent = result.component + ": " + result.url; querySlot.append(code); } } function renderCoverage(allCounties, provenanceCounties, methodCounties, provenance, method) { const coverage = [ {stage: "All available counties", count: allCounties.length}, {stage: "Counties for selected provenance", count: provenanceCounties.length}, {stage: "Counties for selected method", count: methodCounties.length} ]; chartSlot.replaceChildren(Plot.plot({ width: 900, height: 230, marginLeft: 175, marginRight: 70, x: {grid: true, label: "Available counties"}, y: {domain: coverage.map((d) => d.stage), label: null}, marks: [ Plot.barX(coverage, {x: "count", y: "stage", fill: "#2563eb", tip: true}), Plot.text(coverage, { x: "count", y: "stage", text: (d) => d.count.toLocaleString(), dx: 8, textAnchor: "start" }), Plot.ruleX([0]) ], caption: provenance + " · " + method })); } function renderCountyTable(values) { tableSlot.replaceChildren(Inputs.table( values.map((observationAbout) => ({observationAbout})), { columns: ["observationAbout"], rows: 20 } )); } setStatus("loading", "Loading available provenances and baseline county coverage…"); const [provenanceResult, allCountiesResult] = await Promise.all([ getAvailability("provenance"), getAvailability("observationAbout") ]); setCount(".provenance-count", provenanceResult.values.length); const defaultProvenance = provenanceResult.values.includes("dc/base/CensusACS5YearSurvey") ? "dc/base/CensusACS5YearSurvey" : provenanceResult.values[0]; if (!defaultProvenance) { provenanceSlot.textContent = "No provenances are available."; methodSlot.textContent = "No measurement methods are available."; setCount(".method-count", 0); setCount(".provenance-county-count", 0); setCount(".method-county-count", 0); renderCoverage(allCountiesResult.values, [], [], "No provenance", "No method"); renderCountyTable([]); renderQueries([provenanceResult, allCountiesResult]); setStatus("live", "Fetched " + new Date().toLocaleString() + " · no matching provenances"); return root; } const provenanceInput = Inputs.select(provenanceResult.values, { label: "Provenance", value: defaultProvenance }); provenanceSlot.replaceChildren(provenanceInput); let provenanceEpoch = 0; async function updateProvenance() { const epoch = ++provenanceEpoch; const provenance = provenanceInput.value; setStatus("loading", "Loading measurement methods and provenance coverage…"); methodSlot.textContent = "Loading measurement methods…"; try { const provenanceConstraint = {"c[provenance]": provenance}; const [methodResult, provenanceCountiesResult] = await Promise.all([ getAvailability("measurementMethod", provenanceConstraint), getAvailability("observationAbout", provenanceConstraint) ]); if (epoch !== provenanceEpoch) return; setCount(".method-count", methodResult.values.length); setCount(".provenance-county-count", provenanceCountiesResult.values.length); if (methodResult.values.length === 0) { methodSlot.textContent = "No measurement methods are available for this provenance."; setCount(".method-county-count", 0); renderCoverage( allCountiesResult.values, provenanceCountiesResult.values, [], provenance, "No method" ); renderCountyTable([]); renderQueries([ provenanceResult, allCountiesResult, methodResult, provenanceCountiesResult ]); setStatus("live", "Fetched " + new Date().toLocaleString() + " · no measurement methods"); return; } const methodInput = Inputs.select(methodResult.values, { label: "Measurement method", value: methodResult.values[0] }); methodSlot.replaceChildren(methodInput); let methodEpoch = 0; async function updateMethod() { const currentMethodEpoch = ++methodEpoch; const method = methodInput.value; setStatus("loading", "Loading county availability for the selected method…"); try { const methodCountiesResult = await getAvailability("observationAbout", { "c[provenance]": provenance, "c[measurementMethod]": method }); if (epoch !== provenanceEpoch || currentMethodEpoch !== methodEpoch) return; setCount(".method-county-count", methodCountiesResult.values.length); renderCoverage( allCountiesResult.values, provenanceCountiesResult.values, methodCountiesResult.values, provenance, method ); renderCountyTable(methodCountiesResult.values); renderQueries([ provenanceResult, allCountiesResult, methodResult, provenanceCountiesResult, methodCountiesResult ]); setStatus("live", "Fetched " + methodCountiesResult.fetchedAt.toLocaleString() + " from Data Commons production"); } catch (error) { if (epoch === provenanceEpoch && currentMethodEpoch === methodEpoch) { setStatus("error", error.message); } } } methodInput.addEventListener("input", updateMethod); await updateMethod(); } catch (error) { if (epoch === provenanceEpoch) { setStatus("error", error.message); } } } provenanceInput.addEventListener("input", updateProvenance); await updateProvenance(); return root; }