BerriJ/PHD-Presentation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update app.qmd (add inputs)

Browse Source
This commit is contained in:
Jonathan Berrisch
2025-05-18 22:11:57 +02:00
parent b3d5255898
commit f7de9da53a
2 changed files with 57 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app.qmd
View File

@@ -19,10 +19,6 @@ d3 = require("d3@7")
```{ojs}
bsplineData = FileAttachment("basis_functions.csv").csv({ typed: true })
knotValues = Array.from(new Set(bsplineData.map(d => d.knots))).sort((a, b) => a - b)
minKnots = Math.min(...knotValues)
maxKnots = Math.max(...knotValues)
muValues = Array.from(new Set(bsplineData.map(d => d.mu))).sort((a, b) => a - b)
minMu = Math.min(...muValues)
maxMu = Math.max(...muValues)
@@ -31,31 +27,20 @@ maxMu = Math.max(...muValues)
```{ojs}
chart = {
// State variables for selected parameters
let selectedKnots = minKnots;
let selectedMu = 0.5;
const filteredData = () => bsplineData.filter(d => selectedKnots == d.knots && Math.abs(selectedMu - d.mu) < 0.001);
let selectedSig = 1;
let selectedNonc = 0;
let selectedTailw = 1;
const filteredData = () => bsplineData.filter(d =>
Math.abs(selectedMu - d.mu) < 0.001 &&
d.sig === selectedSig &&
d.nonc === selectedNonc &&
d.tailw === selectedTailw
);
const container = d3.create("div").style("margin-bottom", "20px");
const controlsContainer = container.append("div")
.style("display", "flex")
.style("gap", "20px");
// Knots slider control
const knotsControl = controlsContainer.append("div")
.style("display","flex")
.style("align-items","center")
.style("gap","10px");
knotsControl
.append("label")
.text("Knots:")
.style("font-size","16px");
knotsControl
.append("input")
.attr("type","range")
.attr("min",minKnots)
.attr("max",maxKnots)
.attr("step",1)
.property("value",selectedKnots)
.on("input", function() { selectedKnots = +this.value; knotsControl.select("span").text(selectedKnots); updateChart(filteredData()); });
knotsControl.append("span").text(selectedKnots).style("font-size","16px");;
// μ 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");
@@ -64,6 +49,21 @@ chart = {
.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");
// 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("select").selectAll("option").data([0.25,0.5,1,2,4]).enter().append("option").attr("value", d => d).property("selected", d => d === selectedSig).text(d => d);
sigControl.select("select").on("change", function() { selectedSig = +this.value; updateChart(filteredData()); });
// 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("select").selectAll("option").data([-4,0,2,4]).enter().append("option").attr("value", d => d).property("selected", d => d === selectedNonc).text(d => d);
noncControl.select("select").on("change", function() { selectedNonc = +this.value; updateChart(filteredData()); });
// 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("select").selectAll("option").data([0.25,0.5,1,2,4]).enter().append("option").attr("value", d => d).property("selected", d => d === selectedTailw).text(d => d);
tailwControl.select("select").on("change", function() { selectedTailw = +this.value; updateChart(filteredData()); });
// Build SVG
const width = 800;
const height = 400;