Update DGP + app

app.qmd

@@ -10,8 +10,6 @@ execute:
 highlight-style: github
 ---
 
-## B-spline Basis Functions
-
 ```{ojs}
 d3 = require("d3@7")
 ```
@@ -43,36 +41,36 @@ chart = {
     .style("gap", "20px");
   // μ slider control
   const muControl = controlsContainer.append("div").style("display","flex").style("align-items","center").style("gap","10px");
-  muControl.append("label").text("μ:").style("font-size","16px");
+  muControl.append("label").text("Mu:").style("font-size","20px");
   muControl.append("input")
     .attr("type","range").attr("min",minMu).attr("max",maxMu).attr("step",0.2)
     .property("value",selectedMu)
     .on("input", function() { selectedMu = +this.value; muControl.select("span").text(selectedMu); updateChart(filteredData()); });
-  muControl.append("span").text(selectedMu).style("font-size","16px");
+  muControl.append("span").text(selectedMu).style("font-size","20px");
   // sigma control
   const sigControl = controlsContainer.append("div").style("display","flex").style("align-items","center").style("gap","10px");
-  sigControl.append("label").text("Sigma:").style("font-size","16px");
+  sigControl.append("label").text("Sigma:").style("font-size","20px");
   sigControl.append("input")
     .attr("type","range").attr("min", -2).attr("max", 2).attr("step", 1)
     .property("value", Math.log2(selectedSig))
     .on("input", function() { selectedSig = 2 ** (+this.value); sigControl.select("span").text(selectedSig); updateChart(filteredData()); });
-  sigControl.append("span").text(selectedSig).style("font-size","16px");
+  sigControl.append("span").text(selectedSig).style("font-size","20px");
   // nonc control
   const noncControl = controlsContainer.append("div").style("display","flex").style("align-items","center").style("gap","10px");
-  noncControl.append("label").text("Non-centrality:").style("font-size","16px");
+  noncControl.append("label").text("Noncentrality:").style("font-size","20px");
   noncControl.append("input")
     .attr("type","range").attr("min", -4).attr("max", 4).attr("step", 2)
     .property("value", selectedNonc)
     .on("input", function() { selectedNonc = +this.value; noncControl.select("span").text(selectedNonc); updateChart(filteredData()); });
-  noncControl.append("span").text(selectedNonc).style("font-size","16px");
+  noncControl.append("span").text(selectedNonc).style("font-size","20px");
   // tail weight control
   const tailwControl = controlsContainer.append("div").style("display","flex").style("align-items","center").style("gap","10px");
-  tailwControl.append("label").text("Tail weight:").style("font-size","16px");
+  tailwControl.append("label").text("Tailweight:").style("font-size","20px");
   tailwControl.append("input")
     .attr("type","range").attr("min", -2).attr("max", 2).attr("step", 1)
     .property("value", Math.log2(selectedTailw))
     .on("input", function() { selectedTailw = 2 ** (+this.value); tailwControl.select("span").text(selectedTailw); updateChart(filteredData()); });
-  tailwControl.append("span").text(selectedTailw).style("font-size","16px");
+  tailwControl.append("span").text(selectedTailw).style("font-size","20px");
   // Build SVG
    const width = 800;
    const height = 400;
@@ -80,9 +78,9 @@ chart = {
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
    // Set container width to match SVG plot width
-   container.style("max-width", `${width}px`).style("width", "100%");
+   container.style("max-width", "none").style("width", "100%");
    // Set controls container width to match SVG plot width
-   controlsContainer.style("max-width", `${width}px`).style("width", "100%");
+   controlsContainer.style("max-width", "none").style("width", "100%");
    // Distribute each control evenly and make sliders full-width
    controlsContainer.selectAll("div").style("flex", "1").style("min-width", "0px");
    controlsContainer.selectAll("input").style("width", "100%").style("box-sizing", "border-box");
@@ -101,9 +99,10 @@ chart = {
    
    // Create SVG
    const svg = d3.create("svg")
-     .attr("width", width)
+     .attr("width", "100%")
-     .attr("height", height)
+     .attr("height", "auto")
      .attr("viewBox", [0, 0, width, height])
+     .attr("preserveAspectRatio", "xMidYMid meet")
      .attr("style", "max-width: 100%; height: auto;");
    
    // Add chart title
@@ -112,7 +111,7 @@ chart = {
   //    .attr("x", width / 2)
   //    .attr("y", 20)
   //    .attr("text-anchor", "middle")
-  //    .attr("font-size", "16px")
+  //    .attr("font-size", "20px")
   //    .attr("font-weight", "bold");
    
    // Create the chart group
@@ -124,12 +123,12 @@ chart = {
      .attr("transform", `translate(0,${innerHeight})`)
      .attr("class", "x-axis")
      .call(d3.axisBottom(x).ticks(10))
-     .style("font-size", "16px");
+     .style("font-size", "20px");
    
    const yAxis = g.append("g")
      .attr("class", "y-axis")
      .call(d3.axisLeft(y).ticks(5))
-     .style("font-size", "16px");
+     .style("font-size", "20px");
    
    // Add axis labels
   //  g.append("text")

test.R

@@ -23,7 +23,7 @@ generate_basis_data <- function(num_knots, mu_value, sig_value, nonc_value, tail
   )
   B_mat <- round(as.matrix(B),2)
   df <- as.data.frame(B_mat)
-  df$x <- grid
+  df$x <- round(grid,2)
   df_long <- pivot_longer(df,
     cols = -x,
     names_to = "b",