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

Move inputs into one loop

Browse Source
This commit is contained in:
Jonathan Berrisch
2025-05-18 23:00:41 +02:00
parent 2411b24e29
commit 82639a8b3a
1 changed files with 25 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app.qmd
View File

@@ -39,38 +39,31 @@ chart = {
const controlsContainer = container.append("div")
.style("display", "flex")
.style("gap", "20px");
// μ slider control
const muControl = controlsContainer.append("div").style("display","flex").style("align-items","center").style("gap","10px");
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","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","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","20px");
// nonc control
const noncControl = controlsContainer.append("div").style("display","flex").style("align-items","center").style("gap","10px");
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","20px");
// tail weight control
const tailwControl = controlsContainer.append("div").style("display","flex").style("align-items","center").style("gap","10px");
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","20px");
// slider controls
const sliders = [
{ label: 'Mu', get: () => selectedMu, set: v => selectedMu = v, min: minMu, max: maxMu, step: 0.2 },
{ label: 'Sigma', get: () => Math.log2(selectedSig), set: v => selectedSig = 2 ** v, min: -2, max: 2, step: 1 },
{ label: 'Noncentrality', get: () => selectedNonc, set: v => selectedNonc = v, min: -4, max: 4, step: 2 },
{ label: 'Tailweight', get: () => Math.log2(selectedTailw), set: v => selectedTailw = 2 ** v, min: -2, max: 2, step: 1 }
];
sliders.forEach(s => {
const ctrl = controlsContainer.append('div').style('display','flex').style('align-items','center').style('gap','10px');
ctrl.append('label').text(`${s.label}:`).style('font-size','20px');
ctrl.append('input')
.attr('type','range')
.attr('min', s.min)
.attr('max', s.max)
.attr('step', s.step)
.property('value', s.get())
.on('input', function() {
const val = +this.value;
s.set(val);
ctrl.select('span').text(s.label === 'Sigma' || s.label === 'Tailweight' ? (2 ** val) : val);
updateChart(filteredData());
})
.style('width', '100%').style('box-sizing', 'border-box');
ctrl.append('span').text(s.label === 'Sigma' || s.label === 'Tailweight' ? selectedSig : s.get()).style('font-size','20px');
});
// Build SVG
const width = 800;
const height = 400;