Update src/App.svelte

src/App.svelte

@@ -10,96 +10,73 @@
     time_min: number;
     croissant_mgdl_delta: number;
     croissant_with_anti_spike_mgdl_delta: number;
+    white_rice_mgdl_delta: number;
+    white_rice_with_anti_spike_mgdl_delta: number;
   };
 
   let rows: Row[] = [];
   let loaded = false;
 
+  /** -------- Food toggle -------------------------------------------- **/
+  type Food = 'croissant' | 'rice';
+  let food: Food = 'croissant'; // default selection
+  $: topLabel = food === 'croissant' ? 'Croissant' : 'Rice';
+  $: bottomLabel = `${topLabel} + Anti-Spike`;
+
   /** -------- Layout --------------------------------------------------- **/
   const w = 960;
   let H = 432; // desktop height
+  let m = { top: 20, right: 11, bottom: 28, left: 92 };
 
-  // ➜ Add more left white space so y-labels never clip
-  let m = { top: 20, right: 11, bottom: 28, left: 92 }; // desktop LEFT was ~54
-
-  // Derived plot rect
   $: plotX = m.left;
   $: plotY = m.top;
   $: plotW = w - m.left - m.right;
   $: plotBottom = H - m.bottom;
 
-  // Callouts (down a touch)
   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;
-
-  let isMobile = false;
-
-  // ➜ Column where y-tick TEXT sits, to the LEFT of the plot (inside white area)
-  //    We keep a comfortable gap so long labels don’t clip.
   $: 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);
-      // ➜ Add extra left space on mobile too so “baseline” never clips
       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;
 
   const CROISSANT = "/croissant.png";
+  const RICE = "/rice.png";
   const ANTISPIKE = "/antispike.png";
+  $: topImg = food === 'croissant' ? CROISSANT : RICE;
 
   onMount(async () => {
     updateResponsive();
@@ -109,7 +86,9 @@
     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_anti_spike_mgdl_delta: +d['croissant_with_anti_spike_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']!
     })) as unknown as Row[];
 
     loaded = true;
@@ -117,11 +96,17 @@
 
   onDestroy(() => window.removeEventListener('resize', updateResponsive));
 
+  /** -------- Accessors (react to 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 --------------------------------------------------- **/
   $: if (loaded) {
     const xDomain = extent(rows, d => d.time_min) as [number, number];
-    const yMin = Math.min(...rows.map(r => Math.min(r.croissant_mgdl_delta, r.croissant_with_anti_spike_mgdl_delta)));
-    const yMax = Math.max(...rows.map(r => Math.max(r.croissant_mgdl_delta, r.croissant_with_anti_spike_mgdl_delta)));
+    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]);
   }
@@ -129,7 +114,6 @@
   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,13 +122,12 @@
   let pathTop = '', pathBot = '', areaTop = '', areaBot = '';
   $: if (loaded) {
     const windowed = rows.filter(d => d.time_min >= 0 && d.time_min <= 100);
-    pathTop = makePath(d => d.croissant_mgdl_delta)(rows) ?? '';
-    pathBot = makePath(d => d.croissant_with_anti_spike_mgdl_delta)(rows) ?? '';
-    areaTop = makeArea(d => d.croissant_mgdl_delta)(windowed) ?? '';
-    areaBot = makeArea(d => d.croissant_with_anti_spike_mgdl_delta)(windowed) ?? '';
+    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));
@@ -169,8 +152,8 @@
 
   $: if (loaded && pointerT !== null && y) {
     markerX = X(pointerT);
-    topVal = yAtTime(d => d.croissant_mgdl_delta, pointerT);
-    botVal = yAtTime(d => d.croissant_with_anti_spike_mgdl_delta, pointerT);
+    topVal = yAtTime(topAcc, pointerT);
+    botVal = yAtTime(botAcc, pointerT);
     topY = Y(topVal);
     botY = Y(botVal);
   } else {
@@ -189,7 +172,7 @@
     : "At baseline";
 
   const msgBot = (v: number) =>
-    v >= 22 ? "Reduced spike vs croissant alone"
+    v >= 22 ? "Reduced spike vs alone"
     : v >= 12 ? "Smaller spike → steadier energy"
     : v <= 2 && v >= -2 ? "Near baseline ✅"
     : v < -1 ? "Gentle dip, then recovery"
@@ -197,17 +180,9 @@
 
   $: topMsgText = topVal !== null ? msgTop(topVal) : "";
   $: botMsgText = botVal !== null ? msgBot(botVal) : "";
-  const avenir = `'Avenir Next', Avenir, 'Helvetica Neue', Arial, sans-serif`;
-  const serif  = `var(--font-serif)`;
-  $: topMsgFont = topMsgText === "At baseline" ? avenir : serif;
-  $: botMsgFont = botMsgText === "At baseline" ? avenir : serif;
-
-  // X-label Y in white margin (tight)
-  $: xLabelY = (H - m.bottom) + Math.min(m.bottom - 6, Math.round(axisXFS * 0.9));
 
-  // 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; // move a bit left of the +60 text column
+  $: yTitleX = xTickCol - 6;
   $: yTitleY = (loaded && y)
       ? (Y(60) - (yTitleFS * 2 + (isMobile ? -110 : -70)))
       : plotY + 6;
@@ -224,44 +199,52 @@
     <br> <i>Hint: it's interactive so feel free to hover over. </i>
   </div>
 
-  <!-- =================== TOP: Without modifier =================== -->
+  <!-- Toggle buttons -->
+  <div class="switcher" role="tablist" aria-label="Choose food">
+    <button class:selected={food==='croissant'}
+            aria-selected={food==='croissant'}
+            on:click={() => (food='croissant')}>
+      Croissant
+    </button>
+    <button class:selected={food==='rice'}
+            aria-selected={food==='rice'}
+            on:click={() => (food='rice')}>
+      Rice
+    </button>
+  </div>
+
+  <!-- =================== TOP: Selected food =================== -->
   <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 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>
 
-        <!-- Callout -->
-        <text x={m.left + leftInset} y={plotY + calloutTop} fill="#111" font-weight="700" font-size={labelFS}>Without Anti-Spike</text>
-        <image href={CROISSANT} x={m.left + leftInset} y={plotY + calloutTop + labelFS + 6} height={imgH} preserveAspectRatio="xMinYMin meet" />
+        <!-- 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 xLabels as xl}
-          <text x={X(xl.t)} y={xLabelY} text-anchor="middle" fill="#4a4f93" font-size={axisXFS}>{xl.label}</text>
+        {#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>
 
-        <!-- Clip above baseline -->
         <defs>
           <clipPath id="clipTopAboveBaseline">
             <rect x={plotX} y={plotY} width={plotW} height={Y(0) - plotY} />
@@ -279,11 +262,11 @@
 
       {#if topVal !== null}
         <div class="tooltip" style={`top:${tooltipTop}px; right:${tooltipRight}px; left:auto; width:${tooltipW}px;`}>
-          <div style={`font-weight:700; font-family:${topMsgText === 'At baseline' ? "'Avenir Next', Avenir, 'Helvetica Neue', Arial, sans-serif" : "var(--font-serif)"}; color:#111; font-size:14px; margin-bottom:6px;`}>
+          <div style="font-weight:700; color:#111; font-size:14px; margin-bottom:6px;">
             {topMsgText}
           </div>
           <div style="display:flex;justify-content:space-between;gap:12px;">
-            <div>Croissant</div>
+            <div>{topLabel}</div>
             <strong>{topVal.toFixed(0)} mg/dL</strong>
           </div>
         </div>
@@ -300,10 +283,8 @@
         <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>
@@ -312,17 +293,17 @@
         <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 xLabels as xl}
-          <text x={X(xl.t)} y={xLabelY} text-anchor="middle" fill="#4a4f93" font-size={axisXFS}>{xl.label}</text>
+        {#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">
@@ -341,11 +322,11 @@
 
       {#if botVal !== null}
         <div class="tooltip" style={`top:${tooltipTop}px; right:${tooltipRight}px; left:auto; width:${tooltipW}px;`}>
-          <div style={`font-weight:700; font-family:${botMsgText === 'At baseline' ? "'Avenir Next', Avenir, 'Helvetica Neue', Arial, sans-serif" : "var(--font-serif)"}; color:#111; font-size:14px; margin-bottom:6px;`}>
+          <div style="font-weight:700; color:#111; font-size:14px; margin-bottom:6px;">
             {botMsgText}
           </div>
           <div style="display:flex;justify-content:space-between;gap:12px;">
-            <div>Croissant + Anti-Spike</div>
+            <div>{bottomLabel}</div>
             <strong>{botVal.toFixed(0)} mg/dL</strong>
           </div>
         </div>