fix: make income query outside of income chart function thanks to tip from @mbostock

Author: jaanli

docs/income.md

@@ -15,14 +15,6 @@ const selectedYear = Generators.input(yearInput);
 yearInput.querySelector("input[type=number]").remove();
 ```
 
-```js
-const mostRecentYear = uniqueYears[uniqueYears.length - 1];
-const income = await db.query(`
-  SELECT income, count, sector FROM data
-  WHERE year = ${mostRecentYear}
-`); 
-```
-
 ```js
 // Order the sectors by mean income
 const mostRecentYear = uniqueYears[uniqueYears.length - 1];
@@ -36,20 +28,20 @@ const orderSectors = await db.query(`
 ```
 
 ```js
-async function incomeChart(db, selectedYear, width) {
-  const income = await db.query(`
+const income = db.query(`
   SELECT income, count, sector FROM data
   WHERE year = ${selectedYear}
-  `); 
-
-  console.log(income); // Should show the resolved array of data, not a promise
-  console.log(orderSectors); // Should show an array of sector names
+`); 
+```
 
+```js
+function incomeChart(income, width) {
   // Create a histogram with a logarithmic base.
   return Plot.plot({
     width,
     marginLeft: 60,
     x: { type: "log" },
+    y: { axis: null }, // Hide the y-axis
     color: { legend: "swatches", columns: 6, domain: orderSectors },
     marks: [
       Plot.rectY(
@@ -73,36 +65,6 @@ async function incomeChart(db, selectedYear, width) {
 }
 ```
 
-```js
-// Assuming yearInput is already defined and set up as shown in your code.
-
-// Listen for changes on the yearInput to update the chart accordingly.
-yearInput.addEventListener('change', () => {
-  // Retrieve the current selected year from the input.
-  const selectedYear = yearInput.value;
-  
-  // Call renderChart with the selected year.
-  renderChart(selectedYear);
-});
-
-// Call renderChart initially to render the chart for the first time with the most recent year or a default year.
-renderChart(yearInput.value);
-
-function renderChart(selectedYear) {
-  incomeChart(db, selectedYear, window.innerWidth * 0.9) // Adjust width as needed
-    .then(chart => {
-      const chartContainer = document.querySelector("#chartContainer");
-      if (chartContainer) {
-        chartContainer.innerHTML = ''; // Clear the container before appending new content
-        chartContainer.appendChild(chart); // Append the chart
-      } else {
-        console.error("Chart container not found");
-      }
-    })
-    .catch(error => console.error("Failed to render chart:", error));
-}
-```
-
 <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 people reported earning in the 2000–2022 American Community Surveys, categorized by their sector of employment.</h3>
@@ -111,16 +73,5 @@ function renderChart(selectedYear) {
   <h1 style="margin-top: 0.5rem;">${selectedYear}</h1>
   ${yearInput}
   </div>
-  <div id="chartContainer"></div>
-</div>
-
-
-```js
-function renderChart(selectedYear) {
-  incomeChart(db, selectedYear, window.innerWidth * 0.9) // Assuming you want to use 90% of the window width for the chart
-    .then(chart => {
-      document.querySelector("#chartContainer").appendChild(chart); // Append the new chart
-    })
-    .catch(error => console.error("Failed to render chart:", error));
-}
-```
+   ${resize((width) => incomeChart(income, width))}
+</div>