wip: puma map new york cbsa

Author: jaanli

docs/data/income-histogram-historical-new-york-area.parquet

@@ -15,40 +15,40 @@ const selectedYear = Generators.input(yearInput);
 yearInput.querySelector("input[type=number]").remove();
 ```
 
+
+```js
+// Fetch the mapping of PUMA codes to their names
+const pumaNameMapping = await db.query(`
+  SELECT DISTINCT puma, puma_name, state_code FROM data
+`).then(data => new Map(data.map(d => [d.puma, d.puma_name, d.state_code])));
+```
+
 ```js
-const uniquePUMAs = await db.query(`
-  SELECT DISTINCT puma FROM data
-  WHERE year = 2020
-`).then(data => data.map(d => d.puma));
+const selectedPUMAName = pumaNameMapping.get(selectedPUMA);
 ```
 
 ```js
-const uniquePUMAs = await db.query("SELECT DISTINCT puma FROM data WHERE year = 2020").then(data => data.map(d => d.puma));
-const selectedPUMA = Inputs.select(uniquePUMAs, {label: "Select PUMA", value: uniquePUMAs[0]});
+const uniquePUMAs = await db.query(`SELECT DISTINCT puma FROM data WHERE year = ${selectedYear}`).then(data => data.map(d => d.puma));
+const PUMAInput = Inputs.select(uniquePUMAs, {label: "Select PUMA", value: uniquePUMAs[0]});
+const selectedPUMA = Generators.input(PUMAInput);
 ```
 
 ```js
-const orderSectors = Generators.observe(change => {
-  const mostRecentYear = uniqueYears[uniqueYears.length - 1];
-  const query = `
-    SELECT sector, SUM(income * count) / SUM(count) AS mean_income
-    FROM data
-    WHERE year = ${mostRecentYear} AND puma = '${selectedPUMA}'
-    GROUP BY sector
-    ORDER BY mean_income DESC
-  `;
-  db.query(query).then(data => change(data.map(d => d.sector)));
-});
+const mostRecentYear = uniqueYears[uniqueYears.length - 1];
+const orderSectors = await db.query(`
+  SELECT sector, SUM(income * count) / SUM(count) AS mean_income
+  FROM data
+  WHERE year = ${mostRecentYear}
+  GROUP BY sector
+  ORDER BY mean_income DESC
+`).then(data => data.map(d => d.sector));
 ```
 
 ```js
-const income = Generators.observe((change) => {
-  const query = `
-    SELECT income, count, sector FROM data
-    WHERE year = ${selectedYear} AND puma = '${selectedPUMA}'
-  `;
-  db.query(query).then(change);
-});
+const income = db.query(`
+  SELECT income, count, sector FROM data
+  WHERE year = ${selectedYear} AND puma = ${selectedPUMA}
+`);
 ```
 
 ```js
@@ -83,13 +83,14 @@ function incomeChart(income, width) {
 ```
 
 <div class="card">
-  <h2>The sectors in which people earn the most money have shifted over the past two decades</h2>
-  <h3>How much income per year x million people reported earning in the 2000–2022 American Community Surveys run by the United States' Census Bureau, categorized by their sector of employment, specifically for PUMAs overlapping with the New York-Newark CBSA in 2020.</h3>
+  <h2>The sectors in which people earn the most money shift across time and space</h2>
+  <h3>How much income per year x million people reported earning in the 2010–2022 American Community Surveys run by the United States' Census Bureau, categorized by their sector of employment, specifically for areas overlapping with the New York-Newark-Jersey City core-based statistical area in 2020.</h3>
   <h3><code style="font-size: 90%;"><a href="https://github.com/jaanli/exploring_american_community_survey_data/blob/main/american_community_survey/models/public_use_microdata_sample/figures/income-histogram-with-sector-historical-inflation-adjusted-industry-mapped.sql">Code for data transform</a></code></h3>
   <div style="display: flex; align-items: center;">
     <h1 style="margin-top: 0.5rem;">${selectedYear}</h1>
     ${yearInput}
-    ${selectedPUMA}
+    <h1 style="margin-top: 0.5rem;">${pumaNameMapping.get(selectedPUMA)}</h1>
+    ${PUMAInput}
   </div>
   ${resize((width) => incomeChart(income, width))}
 </div>