Add interactive plot to the slides

25_07_phd_defense/app.qmd

@@ -86,7 +86,29 @@ chart = {
     .style('width', '100%');
   sliderCont.append('span').text(d => (d.label.match(/Sigma|Tailweight/) ? d.get() : d.get()))
     .style('font-size','20px');
-  // Build SVG
+  
+  // Add Reset button to clear all sliders to their defaults
+  controlsContainer.append('button')
+    .text('Reset')
+    .style('font-size', '20px')
+    .style('align-self', 'center')
+    .style('margin-left', 'auto')
+    .on('click', () => {
+      // reset state vars
+      selectedMu = 0.5;
+      selectedSig = 1;
+      selectedNonc = 0;
+      selectedTailw = 1;
+      // update input positions
+      sliderCont.selectAll('input').property('value', d => d.get());
+      // update displayed labels
+      sliderCont.selectAll('span')
+        .text(d => d.label.match(/Sigma|Tailweight/) ? (2**d.get()) : d.get());
+      // redraw chart
+      updateChart(filteredData());
+    });
+
+   // Build SVG
    const width = 800;
    const height = 400;
    const margin = {top: 40, right: 20, bottom: 40, left: 40};
@@ -105,7 +127,7 @@ chart = {
      .range([0, innerWidth]);
      
    const y = d3.scaleLinear()
-     .domain([0, 0.7])
+     .domain([0, 1])
      .range([innerHeight, 0]);
    
    // Create a color scale for the basis functions
@@ -184,7 +206,7 @@ chart = {
    const line = d3.line()
      .x(d => x(d.x))
      .y(d => y(d.y))
-     .curve(d3.curveBasis);
+     .curve(d3.curveLinear);
    
    // Group to contain the basis function lines
    const linesGroup = g.append("g")