Update app

app.qmd

@@ -78,13 +78,13 @@ chart = {
      .attr("style", "max-width: 100%; height: auto;");
    
    // Add chart title
-   svg.append("text")
-     .attr("class", "chart-title")
-     .attr("x", width / 2)
-     .attr("y", 20)
-     .attr("text-anchor", "middle")
-     .attr("font-size", "16px")
-     .attr("font-weight", "bold");
+  //  svg.append("text")
+  //    .attr("class", "chart-title")
+  //    .attr("x", width / 2)
+  //    .attr("y", 20)
+  //    .attr("text-anchor", "middle")
+  //    .attr("font-size", "16px")
+  //    .attr("font-weight", "bold");
    
    // Create the chart group
    const g = svg.append("g")
@@ -101,18 +101,18 @@ chart = {
      .call(d3.axisLeft(y).ticks(5));
    
    // Add axis labels
-   g.append("text")
-     .attr("x", innerWidth / 2)
-     .attr("y", innerHeight + 35)
-     .attr("text-anchor", "middle")
-     .text("x");
+  //  g.append("text")
+  //    .attr("x", innerWidth / 2)
+  //    .attr("y", innerHeight + 35)
+  //    .attr("text-anchor", "middle")
+  //    .text("x");
    
-   g.append("text")
-     .attr("transform", "rotate(-90)")
-     .attr("x", -innerHeight / 2)
-     .attr("y", -30)
-     .attr("text-anchor", "middle")
-     .text("y");
+  //  g.append("text")
+  //    .attr("transform", "rotate(-90)")
+  //    .attr("x", -innerHeight / 2)
+  //    .attr("y", -30)
+  //    .attr("text-anchor", "middle")
+  //    .text("y");
    
    // Add a horizontal line at y = 0
    g.append("line")
@@ -165,8 +165,8 @@ chart = {
      const dataByFunction = Array.from(d3.group(data, d => d.b));
      
      // Update the chart title
-     svg.select(".chart-title")
-       .text(`B-spline Basis Functions (${selectedKnots} knots, μ = ${selectedMu})`);
+    //  svg.select(".chart-title")
+    //    .text(`B-spline Basis Functions (${selectedKnots} knots, μ = ${selectedMu})`);
      
      // Create a key function to track basis functions
      const keyFn = d => d[0];
@@ -182,9 +182,9 @@ chart = {
          .attr("d", d => line(d[1].map(pt => ({x: pt.x, y: 0}))))
          .style("opacity", 0),
        update => update,
-       exit => exit.transition().duration(750).style("opacity", 0).remove()
+       exit => exit.transition().duration(1000).style("opacity", 0).remove()
      )
-     .transition().duration(750)
+     .transition().duration(1000)
        .attr("d", d => line(d[1]))
        .attr("stroke", (_, i) => color(i))
        .style("opacity", 1);