From dc550129639326c402b702e0b6eef9c482c03bc9 Mon Sep 17 00:00:00 2001
From: Jonathan Berrisch <Jonathan@Berrisch.biz>
Date: Sun, 18 May 2025 23:04:31 +0200
Subject: [PATCH] Simplify code

---
 app.qmd | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/app.qmd b/app.qmd
index cf24135..420a12e 100644
--- a/app.qmd
+++ b/app.qmd
@@ -46,24 +46,22 @@ chart = {
     { 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 slider controls with D3 data join
+  const sliderCont = controlsContainer.selectAll('div').data(sliders).join('div')
+    .style('display','flex').style('align-items','center').style('gap','10px')
+    .style('flex','1').style('min-width','0px');
+  sliderCont.append('label').text(d => d.label + ':').style('font-size','20px');
+  sliderCont.append('input')
+    .attr('type','range').attr('min', d => d.min).attr('max', d => d.max).attr('step', d => d.step)
+    .property('value', d => d.get())
+    .on('input', function(event, d) {
+      const val = +this.value; d.set(val);
+      d3.select(this.parentNode).select('span').text(d.label.match(/Sigma|Tailweight/) ? 2**val : val);
+      updateChart(filteredData());
+    })
+    .style('width', '100%');
+  sliderCont.append('span').text(d => (d.label.match(/Sigma|Tailweight/) ? d.get() : d.get()))
+    .style('font-size','20px');
   // Build SVG
    const width = 800;
    const height = 400;