Update src/App.svelte

src/App.svelte

@@ -6,23 +6,30 @@
   import { extent, bisector } from 'd3-array';
   import { line as d3line, area as d3area, curveMonotoneX } from 'd3-shape';
 
-  // ---- Data types (now include rice columns) --------------------------
+  // ---- Data types (now include Veggie Starter columns) ----------------
   type Row = {
     time_min: number;
     croissant_mgdl_delta: number;
     croissant_with_anti_spike_mgdl_delta: number;
+    croissant_with_veggie_starter_mgdl_delta: number;
     white_rice_mgdl_delta: number;
     white_rice_with_anti_spike_mgdl_delta: number;
+    white_rice_with_veggie_starter_mgdl_delta: number;
   };
 
   let rows: Row[] = [];
   let loaded = false;
 
-  // ---- Toggle state ---------------------------------------------------
+  // ---- Toggles --------------------------------------------------------
   type Food = 'croissant' | 'rice';
-  let food: Food = 'croissant'; // default
+  type Mod  = 'anti' | 'veggie';
+
+  let food: Food = 'croissant'; // default food
+  let mod:  Mod  = 'anti';      // default modifier
+
   $: topLabel = food === 'croissant' ? 'Croissant' : 'Rice';
-  $: bottomLabel = `${topLabel} + Anti-Spike`;
+  $: bottomHead = mod === 'anti' ? 'With Anti-Spike' : 'With Veggie Starter';
+  $: bottomLabel = `${topLabel} + ${mod === 'anti' ? 'Anti-Spike' : 'Veggie Starter'}`;
 
   // ---- Layout ---------------------------------------------------------
   const w = 960;
@@ -79,21 +86,27 @@
 
   // Images
   const CROISSANT = "/croissant.png";
-  const RICE = "/rice.png";
+  const RICE      = "/rice.png";
   const ANTISPIKE = "/antispike.png";
+  const BROCCOLI  = "/broccoli.png";
+
   $: topImg = food === 'croissant' ? CROISSANT : RICE;
+  $: bottomImg = mod === 'anti' ? ANTISPIKE : BROCCOLI;
 
   onMount(async () => {
     updateResponsive();
     window.addEventListener('resize', updateResponsive);
 
-    const text = await (await fetch('/glucosedata2.csv')).text();
+    // Use your new CSV with Veggie Starter columns
+    const text = await (await fetch('/glucosedata3.csv')).text();
     rows = csvParse(text, d => ({
       time_min: +d['time_min']!,
       croissant_mgdl_delta: +d['croissant_mgdl_delta']!,
       croissant_with_anti_spike_mgdl_delta: +d['croissant_with_anti_spike_mgdl_delta']!,
+      croissant_with_veggie_starter_mgdl_delta: +d['croissant_with_veggie_starter_mgdl_delta']!,
       white_rice_mgdl_delta: +d['white_rice_mgdl_delta']!,
-      white_rice_with_anti_spike_mgdl_delta: +d['white_rice_with_anti_spike_mgdl_delta']!
+      white_rice_with_anti_spike_mgdl_delta: +d['white_rice_with_anti_spike_mgdl_delta']!,
+      white_rice_with_veggie_starter_mgdl_delta: +d['white_rice_with_veggie_starter_mgdl_delta']!
     })) as unknown as Row[];
 
     loaded = true;
@@ -101,18 +114,20 @@
 
   onDestroy(() => window.removeEventListener('resize', updateResponsive));
 
-  // ---- REACTIVE accessors (reassign when `food` changes) --------------
-  // This is the key fix: these variables CHANGE when `food` changes,
-  // so all dependent $: blocks recompute.
+  // ---- REACTIVE accessors --------------------------------------------
   $: topAcc = food === 'croissant'
     ? ((r: Row) => r.croissant_mgdl_delta)
     : ((r: Row) => r.white_rice_mgdl_delta);
 
   $: botAcc = food === 'croissant'
-    ? ((r: Row) => r.croissant_with_anti_spike_mgdl_delta)
-    : ((r: Row) => r.white_rice_with_anti_spike_mgdl_delta);
-
-  // ---- Scales (react to rows + accessors) -----------------------------
+    ? (mod === 'anti'
+        ? ((r: Row) => r.croissant_with_anti_spike_mgdl_delta)
+        : ((r: Row) => r.croissant_with_veggie_starter_mgdl_delta))
+    : (mod === 'anti'
+        ? ((r: Row) => r.white_rice_with_anti_spike_mgdl_delta)
+        : ((r: Row) => r.white_rice_with_veggie_starter_mgdl_delta));
+
+  // ---- Scales (auto-fit to the two displayed series) -----------------
   $: if (loaded) {
     const xDomain = extent(rows, d => d.time_min) as [number, number];
     const yMin = Math.min(...rows.map(topAcc), ...rows.map(botAcc));
@@ -124,6 +139,7 @@
   const X = (t: number) => (x ? x(t) : t);
   const Y = (v: number) => (y ? y(v) : v);
 
+  // Paths + filled area (only 0..100 and only above baseline)
   const makePath = (acc: (r: Row) => number) =>
     d3line<Row>().x(d => X(d.time_min)).y(d => Y(acc(d))).curve(curveMonotoneX);
   const makeArea = (acc: (r: Row) => number) =>
@@ -138,7 +154,7 @@
     areaBot = makeArea(botAcc)(windowed) ?? '';
   }
 
-  // Interpolation for tooltips (uses reactive accessors)
+  // Interpolation for tooltips
   const rightAt = bisector<Row, number>(d => d.time_min).right;
   function yAtTime(acc: (r: Row) => number, t: number) {
     const i = Math.max(0, Math.min(rows.length - 2, rightAt(rows, t) - 1));
@@ -156,7 +172,7 @@
   }
   function onLeave() { pointerT = null; }
 
-  // Tooltip values (react to food!)
+  // Tooltip values
   let markerX: number | null = null;
   let topVal: number | null = null, botVal: number | null = null;
   let topY: number | null = null,   botY: number | null = null;
@@ -192,13 +208,10 @@
   $: topMsgText = topVal !== null ? msgTop(topVal) : "";
   $: botMsgText = botVal !== null ? msgBot(botVal) : "";
 
-  // y-axis title placement
-  function clamp(n: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, n)); }
-  // Fixed pixel anchor so the title doesn't move when the scale changes
+  // Fixed pixel anchor so the axis title doesn't move when scale changes
   $: yTitleX = xTickCol - 6;
   $: yTitleY = plotY + (isMobile ? 20 : 30);
   $: yTitleDy = yTitleFS + (isMobile ? 28 : 4);
-
 </script>
 
 <div class="container">
@@ -211,7 +224,7 @@
     <br> <i>Hint: it's interactive so feel free to hover over. </i>
   </div>
 
-  <!-- Image toggle (Croissant / Rice) -->
+  <!-- Food (image) toggle -->
   <div class="switcher imgs" role="tablist" aria-label="Choose food">
     <button class="imgbtn" class:selected={food==='croissant'}
             aria-selected={food==='croissant'}
@@ -227,20 +240,22 @@
     </button>
   </div>
 
-  <!-- =================== TOP: Selected food (alone) =================== -->
-  <div class="card" style="position:relative; margin-bottom:14px;">
+  <!-- =================== TOP: Food alone =================== -->
+  <div class="card" style="position:relative; margin-bottom:6px;">
     {#if loaded}
       <svg viewBox={`0 0 ${w} ${H}`} style="width:100%;height:auto;touch-action:none;display:block"
            on:pointermove={onPtr} on:pointerdown={onPtr} on:pointerleave={onLeave}>
 
+        <!-- Bands -->
         <rect x={plotX} y={plotY} width={plotW} height={Y(30) - plotY} fill="rgba(223,64,133,0.12)" />
         <rect x={plotX} y={Y(30)} width={plotW} height={plotBottom - Y(30)} fill="rgba(40,200,120,0.14)" />
 
+        <!-- y-axis title -->
         <text x={yTitleX} y={yTitleY} fill="#4a4f93" font-size={yTitleFS} text-anchor="end" dominant-baseline="text-before-edge">
           glucose <tspan x={yTitleX} dy={yTitleDy} text-anchor="end">(mg/dL)</tspan>
         </text>
 
-        <!-- Callout (dynamic) -->
+        <!-- Callout -->
         <text x={m.left + leftInset} y={plotY + calloutTop} fill="#111" font-weight="700" font-size={labelFS}>{topLabel}</text>
         <image href={topImg} x={m.left + leftInset} y={plotY + calloutTop + labelFS + 6} height={imgH} preserveAspectRatio="xMinYMin meet" />
 
@@ -248,6 +263,7 @@
         <line x1={plotX} x2={plotX + plotW} y1={Y(0)}  y2={Y(0)}  stroke="#cfd6ff" stroke-width="2" />
         <line x1={plotX} x2={plotX + plotW} y1={Y(30)} y2={Y(30)} stroke="#f8b9d0" stroke-dasharray="6 6" />
 
+        <!-- X labels + ticks -->
         {#each [{t:0,label:"eating time"},{t:120,label:"2 hours later"}] as xl}
           <text x={X(xl.t)} y={(H - m.bottom) + Math.min(m.bottom - 6, Math.round(axisXFS * 0.9))}
                 text-anchor="middle" fill="#4a4f93" font-size={axisXFS}>{xl.label}</text>
@@ -256,19 +272,14 @@
           <line x1={X(t)} x2={X(t)} y1={plotBottom - xTickLen} y2={plotBottom} stroke="#4a4f93" stroke-width="2" />
         {/each}
 
-        <!-- Y ticks in LEFT WHITE MARGIN -->
+        <!-- Y ticks -->
         <text x={xTickCol} y={Y(60) + yOff60} fill="#4a4f93" font-size={axisYFS} text-anchor="end">+60</text>
         <text x={xTickCol} y={Y(30) + yOff30} fill="#4a4f93" font-size={axisYFS} text-anchor="end">+30</text>
         <text x={xTickCol} y={Y(0)  + yOff0 } fill="#4a4f93" font-size={axisYFS} text-anchor="end">baseline</text>
 
-        <!-- Clip above baseline -->
-        <defs>
-          <clipPath id="clipTopAboveBaseline">
-            <rect x={plotX} y={plotY} width={plotW} height={Y(0) - plotY} />
-          </clipPath>
-        </defs>
-
-        <path d={areaTop} fill="#111" clip-path="url(#clipTopAboveBaseline)"/>
+        <!-- Clip + path -->
+        <defs><clipPath id="clipTop"><rect x={plotX} y={plotY} width={plotW} height={Y(0) - plotY} /></clipPath></defs>
+        <path d={areaTop} fill="#111" clip-path="url(#clipTop)"/>
         <path d={pathTop} fill="none" stroke="#111" stroke-width="3.5"/>
 
         {#if markerX !== null && topY !== null}
@@ -288,8 +299,14 @@
     {:else} Loading… {/if}
   </div>
 
-  <!-- =================== BOTTOM: With Anti-Spike =================== -->
-  <div class="card" style="position:relative;">
+  <!-- Modifier buttons (affect bottom plot) -->
+  <div class="switcher" role="tablist" aria-label="Choose modifier for comparison below" style="margin-bottom:14px;">
+    <button class:selected={mod==='anti'} aria-selected={mod==='anti'} on:click={() => mod='anti'}>Anti-Spike</button>
+    <button class:selected={mod==='veggie'} aria-selected={mod==='veggie'} on:click={() => mod='veggie'}>Veggie Starter</button>
+  </div>
+
+  <!-- =================== BOTTOM: Food + modifier =================== -->
+  <div class="card" style="position:relative; margin-bottom:6px;">
     {#if loaded}
       <svg viewBox={`0 0 ${w} ${H}`} style="width:100%;height:auto;touch-action:none;display:block"
            on:pointermove={onPtr} on:pointerdown={onPtr} on:pointerleave={onLeave}>
@@ -301,8 +318,9 @@
           glucose <tspan x={yTitleX} dy={yTitleDy} text-anchor="end">(mg/dL)</tspan>
         </text>
 
-        <text x={m.left + leftInset} y={plotY + calloutTop} fill="#111" font-weight="700" font-size={labelFS}>With Anti-Spike</text>
-        <image href={ANTISPIKE} x={m.left + leftInset} y={plotY + calloutTop + labelFS + 6} height={imgH} preserveAspectRatio="xMinYMin meet" />
+        <!-- Reactive callout for modifier -->
+        <text x={m.left + leftInset} y={plotY + calloutTop} fill="#111" font-weight="700" font-size={labelFS}>{bottomHead}</text>
+        <image href={bottomImg} x={m.left + leftInset} y={plotY + calloutTop + labelFS + 6} height={imgH} preserveAspectRatio="xMinYMin meet" />
 
         <line x1={plotX} x2={plotX + plotW} y1={Y(0)}  y2={Y(0)}  stroke="#cfd6ff" stroke-width="2" />
         <line x1={plotX} x2={plotX + plotW} y1={Y(30)} y2={Y(30)} stroke="#f8b9d0" stroke-dasharray="6 6" />
@@ -319,13 +337,8 @@
         <text x={xTickCol} y={Y(30) + yOff30} fill="#4a4f93" font-size={axisYFS} text-anchor="end">+30</text>
         <text x={xTickCol} y={Y(0)  + yOff0 } fill="#4a4f93" font-size={axisYFS} text-anchor="end">baseline</text>
 
-        <defs>
-          <clipPath id="clipBotAboveBaseline">
-            <rect x={plotX} y={plotY} width={plotW} height={Y(0) - plotY} />
-          </clipPath>
-        </defs>
-
-        <path d={areaBot} fill="#111" clip-path="url(#clipBotAboveBaseline)"/>
+        <defs><clipPath id="clipBot"><rect x={plotX} y={plotY} width={plotW} height={Y(0) - plotY} /></clipPath></defs>
+        <path d={areaBot} fill="#111" clip-path="url(#clipBot)"/>
         <path d={pathBot} fill="none" stroke="#111" stroke-width="3.5"/>
 
         {#if markerX !== null && botY !== null}
@@ -344,4 +357,10 @@
       {/if}
     {:else} Loading… {/if}
   </div>
+
+  <!-- Duplicate modifier buttons below the bottom plot (as requested) -->
+  <div class="switcher" role="tablist" aria-label="Choose modifier (bottom)">
+    <button class:selected={mod==='anti'} aria-selected={mod==='anti'} on:click={() => mod='anti'}>Anti-Spike</button>
+    <button class:selected={mod==='veggie'} aria-selected={mod==='veggie'} on:click={() => mod='veggie'}>Veggie Starter</button>
+  </div>
 </div>