incomeDashboard = { const apiRoot = "https://api.datacommons.org"; // The public trial key is quota-limited. If it is throttled, comment out this line, // add DC_API_KEY under Resources > Secrets, and uncomment the Secret line below. const apiKey = "AIzaSyCTI4Xz-UW_G2Q2RfknhcfdAnTHq5X5XuI"; // const apiKey = Secret("DC_API_KEY"); const availabilityEndpoint = `${apiRoot}/sdmx/v3/availability/dataflow/DC/DF_OBS/1.0.0/*`; const dataEndpoint = `${apiRoot}/sdmx/v3/data/dataflow/DC/DF_OBS/1.0.0/*`; const incomeBrackets = [ ["Count_Household_IncomeOfUpto10000USDollar", "$0–10k"], ["Count_Household_IncomeOf10000To14999USDollar", "$10–15k"], ["Count_Household_IncomeOf15000To19999USDollar", "$15–20k"], ["Count_Household_IncomeOf20000To24999USDollar", "$20–25k"], ["Count_Household_IncomeOf25000To29999USDollar", "$25–30k"], ["Count_Household_IncomeOf30000To34999USDollar", "$30–35k"], ["Count_Household_IncomeOf35000To39999USDollar", "$35–40k"], ["Count_Household_IncomeOf40000To44999USDollar", "$40–45k"], ["Count_Household_IncomeOf45000To49999USDollar", "$45–50k"], ["Count_Household_IncomeOf50000To59999USDollar", "$50–60k"], ["Count_Household_IncomeOf60000To74999USDollar", "$60–75k"], ["Count_Household_IncomeOf75000To99999USDollar", "$75–100k"], ["Count_Household_IncomeOf100000To124999USDollar", "$100–125k"], ["Count_Household_IncomeOf125000To149999USDollar", "$125–150k"], ["Count_Household_IncomeOf150000To199999USDollar", "$150–200k"], ["Count_Household_IncomeOf200000OrMoreUSDollar", "$200k+"] ]; const variableIds = incomeBrackets.map(([dcid]) => dcid); const bracketLabels = new Map(incomeBrackets); const baseConstraints = { "c[variableMeasured]": variableIds.join(","), "c[observationAbout.containedInPlace+]": "country/USA", "c[observationAbout.typeOf]": "State" }; function queryUrl(endpoint, constraints) { const url = new URL(endpoint); url.search = new URLSearchParams(constraints); return url; } async function availability(component, constraints) { const url = queryUrl(`${availabilityEndpoint}/${component}`, constraints); const response = await fetch(url, { headers: {"X-Api-Key": apiKey} }); if (!response.ok) throw new Error(`Availability request failed: ${response.status}`); const body = await response.json(); return { url: url.href, values: (body.data ?? []).map((item) => String(item.value ?? item)) }; } async function observations(provenance, measurementMethod) { const constraints = { ...baseConstraints, "c[provenance]": provenance, "c[measurementMethod]": measurementMethod, "c[TIME_PERIOD]": "LATEST" }; const url = queryUrl(dataEndpoint, constraints); const rows = await d3.csv(url, { headers: { Accept: "application/vnd.sdmx.data+csv;version=2.0.0", "X-Api-Key": apiKey } }, (row) => ({ ...row, OBS_VALUE: row.OBS_VALUE === "" ? null : Number(row.OBS_VALUE) })); return {url: url.href, rows}; } function fillSelect(select, values, selected, labels = new Map()) { select.replaceChildren(...values.map((value) => { const option = document.createElement("option"); option.value = value; option.textContent = labels.get(value) ?? value; option.selected = value === selected; return option; })); } const provenanceSelect = html``; const methodSelect = html``; const stateSelect = html``; const status = html`

`; const chart = html`

`; const table = html`

`; const metadata = html`

`; const root = html`

${status}

Provenance
${provenanceSelect} Measurement method
${methodSelect} State
${stateSelect}

Households by income bracket

${chart}

Raw values

${table}

${metadata}

`; let currentRows = []; let stateNames = new Map(); let availabilityUrls = []; let dataUrl = ""; function renderState() { const state = stateSelect.value; const rows = currentRows .filter((row) => row.observationAbout === state) .sort((a, b) => variableIds.indexOf(a.variableMeasured) - variableIds.indexOf(b.variableMeasured)) .map((row) => ({...row, bracket: bracketLabels.get(row.variableMeasured)})); chart.replaceChildren(Plot.plot({ height: 480, marginBottom: 90, x: {label: "Household income bracket", tickRotate: -45}, y: {grid: true, label: "Households"}, marks: [ Plot.barY(rows, {x: "bracket", y: "OBS_VALUE", tip: true}), Plot.ruleY([0]) ] })); table.replaceChildren(Inputs.table(rows, { columns: ["bracket", "variableMeasured", "OBS_VALUE", "TIME_PERIOD", "unit"], header: {bracket: "Income bracket", variableMeasured: "StatisticalVariable", OBS_VALUE: "Households"}, rows: 16 })); const first = rows[0] ?? {}; metadata.replaceChildren(html`

Observation and API details

State: ${stateNames.get(state) ?? state}

Date: ${first.TIME_PERIOD ?? "Unavailable"}

Provenance: ${provenanceSelect.value}

Measurement method: ${methodSelect.value}

Facet: ${first.facet ?? "Unavailable"}

Availability queries:${availabilityUrls.map((url) => html`${url}`)}

Data query:${dataUrl}

`); } async function loadData() { status.replaceChildren(html`

Loading live Data Commons observations…

`); const placeAvailability = await availability("observationAbout", { ...baseConstraints, "c[provenance]": provenanceSelect.value, "c[measurementMethod]": methodSelect.value }); const result = await observations(provenanceSelect.value, methodSelect.value); availabilityUrls = [...availabilityUrls.slice(0, 2), placeAvailability.url]; dataUrl = result.url; currentRows = result.rows; const availablePlaces = new Set(placeAvailability.values); const counts = d3.rollup(currentRows, (rows) => new Set(rows.map((row) => row.variableMeasured)).size, (row) => row.observationAbout); const states = Array.from(counts, ([dcid, count]) => ({dcid, count})) .filter(({dcid, count}) => availablePlaces.has(dcid) && count === variableIds.length) .map(({dcid}) => dcid); ({names: stateNames} = await fetchNodeNames(states, {apiKey})); states.sort((a, b) => stateNames.get(a).localeCompare(stateNames.get(b))); const previousState = stateSelect.value; const defaultState = states.includes(previousState) ? previousState : states.find((dcid) => stateNames.get(dcid) === "Washington") ?? states[0]; fillSelect(stateSelect, states, defaultState, stateNames); renderState(); status.replaceChildren(html`

LIVE ${currentRows.length.toLocaleString()} SDMX rows; ${states.length} places with all 16 brackets

`); } async function loadMethods() { const result = await availability("measurementMethod", { ...baseConstraints, "c[provenance]": provenanceSelect.value }); availabilityUrls = [availabilityUrls[0], result.url]; const preferred = result.values.includes("CensusACS5yrSurvey") ? "CensusACS5yrSurvey" : result.values[0]; fillSelect(methodSelect, result.values, preferred); await loadData(); } const provenanceAvailability = await availability("provenance", baseConstraints); availabilityUrls = [provenanceAvailability.url]; const preferredProvenance = provenanceAvailability.values.includes("dc/base/CensusACS5YearSurvey") ? "dc/base/CensusACS5YearSurvey" : provenanceAvailability.values[0]; fillSelect(provenanceSelect, provenanceAvailability.values, preferredProvenance); await loadMethods(); const onProvenance = () => loadMethods().catch((error) => status.replaceChildren(html`

${error.message}

`)); const onMethod = () => loadData().catch((error) => status.replaceChildren(html`

${error.message}

`)); provenanceSelect.addEventListener("change", onProvenance); methodSelect.addEventListener("change", onMethod); stateSelect.addEventListener("change", renderState); invalidation.then(() => { provenanceSelect.removeEventListener("change", onProvenance); methodSelect.removeEventListener("change", onMethod); stateSelect.removeEventListener("change", renderState); }); return root; }