Add filter by level to scatterplot

index.html

@@ -11,9 +11,10 @@
   <div id="scatterplot-container">
     <svg id="scatterplot"></svg>
     <ul class="legend" id="scatterplot-legend">
-      <li><span class="legend-e easy" id="scatterplot-legend-easy"></span> Easy</li>
-      <li><span class="legend-e intermediate" id="scatterplot-intermediate"></span> Intermediate</li>
-      <li><span class="legend-e difficult" id="scatterplot-difficult"></span> Difficult</li>
+      <p>Filter by level:</p>
+      <li id="scatterplot-legend-Easy"><span class="legend-e easy"></span> Easy</li>
+      <li id="scatterplot-legend-Intermediate"><span class="legend-e intermediate"></span> Intermediate</li>
+      <li id="scatterplot-legend-Difficult"><span class="legend-e difficult"></span> Difficult</li>
     </ul>
   </div>
   <script type="module" src="/src/ts/main.ts"></script>

src/css/style.css

@@ -88,4 +88,9 @@ body {
   background: #2a8d46;
 }
 
+#scatterplot-container p {
+  font-weight: 900;
+  color: #2a8d46;
+}
+
 /* #endregion */
\ No newline at end of file

src/ts/main.ts

@@ -3,19 +3,46 @@ import { Scatterplot } from './scatter';
 import '/src/css/style.css';
 import * as d3 from 'd3';
 
+const selectedDifficulties: string[] = [];
+let data: any[] = [];
+const scatterplot = new Scatterplot(new ChartConfiguration("#scatterplot"));
+function handleLevelSelectionEvent(element: any, difficulty: string) {
+    const index = selectedDifficulties.indexOf(difficulty);
+    if (index > -1) {
+        // Difficulty is in the array, remove it
+        selectedDifficulties.splice(index, 1);
+        d3.select(element).style("opacity", 1);
+    } else {
+        // Difficulty is not in the array, add it
+        selectedDifficulties.push(difficulty);
+        d3.select(element).style("opacity", 0.5);
+    }
+    const filteredData = data.filter(item => !selectedDifficulties.includes(item.difficulty));
+    scatterplot.data = filteredData;
+    scatterplot.updateVis();
+}
+const difficulties = ["Easy", "Intermediate", "Difficult"]
+// Add click event listeners for each difficulty level
+for (const level of difficulties) {
+    const id = `#scatterplot-legend-${level}`
+    d3.select(id)
+        .on("click", function () {
+            handleLevelSelectionEvent(this, level);
+        });
+}
 /**
  * Load data from CSV file asynchronously and render scatter plot
  */
-const scatterplot = new Scatterplot(new ChartConfiguration("#scatterplot"));
 d3.csv('/data/vancouver_trails.csv')
-    .then(data => {
+    .then(inputData => {
         // Convert strings to numbers
-        data.forEach((d: any) => {
+        inputData.forEach((d: any) => {
             d.time = +d.time;
             d.distance = +d.distance;
         });
+        data = inputData;
         // Initialize chart
-        scatterplot.data = data;
+        scatterplot.data = inputData;
         // Show chart
         scatterplot.updateVis();
     })