fix: debug rendering of chart into a specific container

Author: jaanli

docs/income.md

@@ -42,6 +42,9 @@ async function incomeChart(db, selectedYear, width) {
   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
+
   // Create a histogram with a logarithmic base.
   return Plot.plot({
     width,
@@ -70,6 +73,36 @@ 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>
@@ -78,5 +111,16 @@ async function incomeChart(db, selectedYear, width) {
   <h1 style="margin-top: 0.5rem;">${selectedYear}</h1>
   ${yearInput}
   </div>
-  ${resize((width) => incomeChart(db, selectedYear, width))}
+  <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));
+}
+```