Add start year to area chart

index.html

@@ -24,7 +24,7 @@
     <div class="heading">
       <p class="title">S&P 500 Index</p>
       <span class="select-text">Start year</span><input type="number" min="2015" max="2020" value="2015"
-        id="area-chart-year-input">
+        onkeydown="return false;" id="area-chart-year-input">
     </div>
     <svg id="area-chart"></svg>
   </div>

src/ts/main.ts

@@ -52,7 +52,20 @@ import * as d3 from 'd3';
 /**
  * Load data from CSV file asynchronously and render scatter plot
  */
+
 const areaChart = new AreaChart(new ChartConfiguration("#area-chart"));
+let areaChartData: any[];
+d3.select('#area-chart-year-input')
+    .on('input', function () {
+        // Get the current value of the input
+        let value = d3.select(this).property('value');
+        value = +value;
+        console.log(areaChartData[0].date);
+        const areaChartFilteredData = areaChartData.filter(item => item.date.getFullYear() >= value);
+        areaChart.data = areaChartFilteredData;
+        areaChart.updateVis();
+
+    });
 
 d3.csv('/data/sp_500_index.csv')
     .then(inputData => {
@@ -62,17 +75,8 @@ d3.csv('/data/sp_500_index.csv')
             d.close = +d.close;
         });
 
+        areaChartData = inputData;
         areaChart.data = inputData;
         areaChart.updateVis();
     })
     .catch(error => console.error(error));
-
-setTimeout(() => {
-    const dateParser = d3.timeParse("%Y-%m-%d");
-    let t: any = { date: '2025-10-29', close: 0 };
-    t.date = dateParser(t.date);
-    t.close = +t.close;
-    areaChart.data.push(t);
-
-    areaChart.updateVis();
-}, 1000);
\ No newline at end of file