Update src/App.svelte

src/App.svelte

@@ -6,6 +6,7 @@
   import { extent, bisector } from 'd3-array';
   import { line as d3line, area as d3area, curveMonotoneX } from 'd3-shape';
 
+  /** ---------- Data types (now includes rice columns) ----------------- */
   type Row = {
     time_min: number;
     croissant_mgdl_delta: number;
@@ -17,62 +18,93 @@
   let rows: Row[] = [];
   let loaded = false;
 
-  /** -------- Food toggle -------------------------------------------- **/
+  /** ---------- Toggle state ------------------------------------------- */
   type Food = 'croissant' | 'rice';
-  let food: Food = 'croissant'; // default selection
+  let food: Food = 'croissant'; // default
   $: topLabel = food === 'croissant' ? 'Croissant' : 'Rice';
   $: bottomLabel = `${topLabel} + Anti-Spike`;
 
-  /** -------- Layout --------------------------------------------------- **/
+  /** ---------- Layout -------------------------------------------------- */
   const w = 960;
   let H = 432; // desktop height
+
+  // Add more left white space so y-labels never clip
   let m = { top: 20, right: 11, bottom: 28, left: 92 };
 
+  // Derived plot rect
   $: plotX = m.left;
   $: plotY = m.top;
   $: plotW = w - m.left - m.right;
   $: plotBottom = H - m.bottom;
 
+  // Callouts
   const leftInset = 54;
   let labelFS = 18;
   let imgH = 100;
   let isMobile = false;
   $: calloutTop = isMobile ? 26 : 24;
 
+  // Axes font sizes
   let axisXFS = 16;
   let axisYFS = 14;
+
+  // y-axis title “glucose (mg/dL)”
   let yTitleFS = 12;
 
+  // Tooltip position
   let tooltipW = 200;
   let tooltipTop = 28;
   let tooltipRight = 120;
 
+  // X ticks (inside the band, centered under labels)
   const xTicksVals = [0, 120];
   $: xTickLen = 10;
+
+  // Column where y-tick TEXT sits
   $: xTickCol = m.left - 12;
+
+  // Fine vertical nudges for tick text
   $: yOff60 = 30;
   $: yOff30 = 6;
   $: yOff0  = -8;
 
   function updateResponsive() {
     isMobile = window.matchMedia('(max-width: 640px)').matches;
+
     if (isMobile) {
       H = Math.round(432 * 1.5);
       m = { top: 22, right: 11, bottom: 56, left: 125 };
-      labelFS = 32; imgH = 130; axisXFS = 32; axisYFS = 28; yTitleFS = 28;
-      tooltipW = 130; tooltipTop = 24; tooltipRight = 12;
+
+      labelFS   = 32;
+      imgH      = 130;
+      axisXFS   = 32;
+      axisYFS   = 28;
+      yTitleFS  = 28;
+      tooltipW  = 130;
+      tooltipTop = 24;
+      tooltipRight = 12;
     } else {
       H = 432;
       m = { top: 20, right: 11, bottom: 28, left: 85 };
-      labelFS = 18; imgH = 100; axisXFS = 16; axisYFS = 14; yTitleFS = 12;
-      tooltipW = 200; tooltipTop = 28; tooltipRight = 120;
+
+      labelFS   = 18;
+      imgH      = 100;
+      axisXFS   = 16;
+      axisYFS   = 14;
+      yTitleFS  = 12;
+      tooltipW  = 200;
+      tooltipTop = 28;
+      tooltipRight = 120;
     }
   }
 
   let x: ((n: number) => number) | null = null;
   let y: ((n: number) => number) | null = null;
+
+  // Pointer state
   let pointerT: number | null = null;
 
+  // Images
   const CROISSANT = "/croissant.png";
   const RICE = "/rice.png";
   const ANTISPIKE = "/antispike.png";
@@ -82,6 +114,7 @@
     updateResponsive();
     window.addEventListener('resize', updateResponsive);
 
+    // IMPORTANT: glucosedata2.csv must include the two rice columns below.
     const text = await (await fetch('/glucosedata2.csv')).text();
     rows = csvParse(text, d => ({
       time_min: +d['time_min']!,
@@ -96,17 +129,21 @@
 
   onDestroy(() => window.removeEventListener('resize', updateResponsive));
 
-  /** -------- Accessors (react to toggle) ----------------------------- **/
+  /** ---------- Accessors that change with the toggle ------------------- */
   const topAcc = (r: Row) =>
     food === 'croissant' ? r.croissant_mgdl_delta : r.white_rice_mgdl_delta;
   const botAcc = (r: Row) =>
     food === 'croissant' ? r.croissant_with_anti_spike_mgdl_delta : r.white_rice_with_anti_spike_mgdl_delta;
 
-  /** -------- Scales --------------------------------------------------- **/
+  /** ---------- Scales (reactive to data + toggle) --------------------- */
   $: if (loaded) {
     const xDomain = extent(rows, d => d.time_min) as [number, number];
+
+    // Use the currently-selected food columns for y extents,
+    // so the range adjusts correctly when switching.
     const yMin = Math.min(...rows.map(topAcc), ...rows.map(botAcc));
     const yMax = Math.max(...rows.map(topAcc), ...rows.map(botAcc));
+
     x = scaleLinear().domain(xDomain).range([m.left, m.left + (w - m.left - m.right)]);
     y = scaleLinear().domain([yMin - 5, yMax + 5]).range([H - m.bottom, m.top]);
   }
@@ -114,6 +151,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) =>
@@ -122,12 +160,14 @@
   let pathTop = '', pathBot = '', areaTop = '', areaBot = '';
   $: if (loaded) {
     const windowed = rows.filter(d => d.time_min >= 0 && d.time_min <= 100);
+    // These react to `food` because topAcc/botAcc do.
     pathTop = makePath(topAcc)(rows) ?? '';
     pathBot = makePath(botAcc)(rows) ?? '';
     areaTop = makeArea(topAcc)(windowed) ?? '';
     areaBot = makeArea(botAcc)(windowed) ?? '';
   }
 
+  // Interpolation
   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));
@@ -145,7 +185,7 @@
   }
   function onLeave() { pointerT = null; }
 
-  // Tooltip values
+  // Tooltip values (reactive)
   let markerX: number | null = null;
   let topVal: number | null = null, botVal: number | null = null;
   let topY: number | null = null,   botY: number | null = null;
@@ -181,6 +221,7 @@
   $: topMsgText = topVal !== null ? msgTop(topVal) : "";
   $: botMsgText = botVal !== null ? msgBot(botVal) : "";
 
+  // y-axis title ABOVE +60 and to the LEFT of the +60 label
   function clamp(n: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, n)); }
   $: yTitleX = xTickCol - 6;
   $: yTitleY = (loaded && y)
@@ -199,40 +240,49 @@
     <br> <i>Hint: it's interactive so feel free to hover over. </i>
   </div>
 
-  <!-- Toggle buttons -->
-  <div class="switcher" role="tablist" aria-label="Choose food">
-    <button class:selected={food==='croissant'}
+  <!-- ========= IMAGE TOGGLE (croissant / rice) ========================= -->
+  <div class="switcher imgs" role="tablist" aria-label="Choose food">
+    <button class="imgbtn" class:selected={food==='croissant'}
             aria-selected={food==='croissant'}
-            on:click={() => (food='croissant')}>
-      Croissant
+            on:click={() => (food='croissant')}
+            title="Croissant" aria-label="Croissant">
+      <img src="/croissant.png" alt="Croissant"/>
+      <span>Croissant</span>
     </button>
-    <button class:selected={food==='rice'}
+    <button class="imgbtn" class:selected={food==='rice'}
             aria-selected={food==='rice'}
-            on:click={() => (food='rice')}>
-      Rice
+            on:click={() => (food='rice')}
+            title="Rice" aria-label="Rice">
+      <img src="/rice.png" alt="Rice"/>
+      <span>Rice</span>
     </button>
   </div>
 
-  <!-- =================== TOP: Selected food =================== -->
+  <!-- =================== TOP: Selected food (alone) =================== -->
   <div class="card" style="position:relative; margin-bottom:14px;">
     {#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 inside plot box -->
         <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>
+          glucose
+          <tspan x={yTitleX} dy={yTitleDy} text-anchor="end">(mg/dL)</tspan>
         </text>
 
         <!-- 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" />
 
+        <!-- Guides -->
         <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 + inside 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>
@@ -241,10 +291,12 @@
           <line x1={X(t)} x2={X(t)} y1={plotBottom - xTickLen} y2={plotBottom} stroke="#4a4f93" stroke-width="2" />
         {/each}
 
+        <!-- Y ticks in LEFT WHITE MARGIN -->
         <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>
+        <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} />
@@ -283,8 +335,10 @@
         <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 ABOVE +60 and LEFT of tick labels -->
         <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>
+          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>
@@ -293,17 +347,18 @@
         <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" />
 
+        {#each xTicksVals as t}
+          <line x1={X(t)} x2={X(t)} y1={plotBottom - xTickLen} y2={plotBottom} stroke="#4a4f93" stroke-width="2" />
+        {/each}
         {#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>
         {/each}
-        {#each xTicksVals as t}
-          <line x1={X(t)} x2={X(t)} y1={plotBottom - xTickLen} y2={plotBottom} stroke="#4a4f93" stroke-width="2" />
-        {/each}
 
+        <!-- Y ticks in LEFT WHITE MARGIN -->
         <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>
+        <text x={xTickCol} y={Y(0)  + yOff0 } fill="#4a4f93" font-size={axisYFS} text-anchor="end">baseline</text>
 
         <defs>
           <clipPath id="clipBotAboveBaseline">