Redesign linear/logistic cost landscape visualizations

linear-regression/gradient-descent.html

@@ -70,17 +70,27 @@
 
       <section class="panel output">
         <h2>Cost Landscape (Descent Direction)</h2>
-        <div class="row">
-          <label for="landscapeMode">Landscape View</label>
-          <select id="landscapeMode">
-            <option value="2d">2D Contour-Style + Arrows</option>
-            <option value="3d">3D Surface + Trajectory</option>
-          </select>
+        <div id="landscapeSummary" class="landscape-summary"></div>
+
+        <div class="landscape-controls">
+          <button id="resetViewBtn" type="button" class="viz-btn">Reset View</button>
+          <button id="plotSmallerBtn" type="button" class="viz-btn">-</button>
+          <button id="plotFitBtn" type="button" class="viz-btn">Fit</button>
+          <button id="plotLargerBtn" type="button" class="viz-btn">+</button>
+          <button id="plotFullscreenBtn" type="button" class="viz-btn">Fullscreen</button>
         </div>
-        <p class="slice-label">
-          3D axes: x=theta0, y=theta1, z=cost J(theta). Upward along z means higher cost; the trajectory goes from higher to lower cost.
-        </p>
-        <canvas id="landscapeCanvas" width="980" height="420"></canvas>
+
+        <div class="landscape-controls toggles">
+          <label class="viz-toggle"><input id="toggleSurface" type="checkbox" checked /> Surface</label>
+          <label class="viz-toggle"><input id="toggleContours" type="checkbox" checked /> Contours</label>
+          <label class="viz-toggle"><input id="toggleTrajectory" type="checkbox" checked /> Trajectory</label>
+        </div>
+
+        <div id="landscapePlotWrap" class="landscape-plot-wrap">
+          <div id="landscapePlot" class="landscape-plot"></div>
+        </div>
+
+        <p class="slice-label">Drag to rotate · Scroll to zoom · Resize from the corner</p>
       </section>
 
       <section class="panel output">
@@ -111,6 +121,7 @@
       </section>
     </main>
 
-    <script src="gradient.js?v=20260812g"></script>
+    <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
+    <script src="gradient.js?v=20260813a"></script>
   </body>
 </html>

linear-regression/gradient.js

@@ -7,17 +7,35 @@ const gdStep = document.getElementById("gdStep");
 const gdStepLabel = document.getElementById("gdStepLabel");
 const playGdBtn = document.getElementById("playGdBtn");
 const resetGdBtn = document.getElementById("resetGdBtn");
+
 const fitCanvas = document.getElementById("fitCanvas");
 const costCanvas = document.getElementById("costCanvas");
-const landscapeMode = document.getElementById("landscapeMode");
-const landscapeCanvas = document.getElementById("landscapeCanvas");
+const landscapePlotWrap = document.getElementById("landscapePlotWrap");
+const landscapePlot = document.getElementById("landscapePlot");
+const landscapeSummary = document.getElementById("landscapeSummary");
+
+const resetViewBtn = document.getElementById("resetViewBtn");
+const plotSmallerBtn = document.getElementById("plotSmallerBtn");
+const plotFitBtn = document.getElementById("plotFitBtn");
+const plotLargerBtn = document.getElementById("plotLargerBtn");
+const plotFullscreenBtn = document.getElementById("plotFullscreenBtn");
+
+const toggleSurface = document.getElementById("toggleSurface");
+const toggleContours = document.getElementById("toggleContours");
+const toggleTrajectory = document.getElementById("toggleTrajectory");
+
 const costSummary = document.getElementById("costSummary");
 const stepSummary = document.getElementById("stepSummary");
 const gdLogBody = document.getElementById("gdLogBody");
 
 const fitCtx = fitCanvas.getContext("2d");
 const costCtx = costCanvas.getContext("2d");
-const landscapeCtx = landscapeCanvas.getContext("2d");
+
+const DEFAULT_CAMERA = {
+  eye: { x: 1.5, y: 1.5, z: 1.1 },
+  center: { x: 0, y: 0, z: 0 },
+  up: { x: 0, y: 0, z: 1 },
+};
 
 const state = {
   data: [],
@@ -25,13 +43,17 @@ const state = {
   currentStep: 0,
   timer: null,
   landscapeCache: null,
+  landscapeCamera: null,
+  landscapePlotReady: false,
+  landscapeResizeObserver: null,
 };
 
 function init() {
   resizeCanvases();
+  fitLandscapeSize();
+  initLandscapeInteractions();
 
   runGdBtn.addEventListener("click", runGradientDescent);
-  landscapeMode.addEventListener("change", renderAll);
   window.addEventListener("resize", handleResize);
 
   gdStep.addEventListener("input", () => {
@@ -57,15 +79,43 @@ function init() {
   runGradientDescent();
 }
 
+function initLandscapeInteractions() {
+  resetViewBtn.addEventListener("click", resetLandscapeView);
+  plotFitBtn.addEventListener("click", () => fitLandscapeSize(true));
+  plotLargerBtn.addEventListener("click", () => scaleLandscapeSize(1.14));
+  plotSmallerBtn.addEventListener("click", () => scaleLandscapeSize(1 / 1.14));
+  plotFullscreenBtn.addEventListener("click", toggleLandscapeFullscreen);
+
+  for (const cb of [toggleSurface, toggleContours, toggleTrajectory]) {
+    cb.addEventListener("change", renderCostLandscape);
+  }
+
+  document.addEventListener("fullscreenchange", () => {
+    plotFullscreenBtn.textContent = document.fullscreenElement === landscapePlotWrap ? "Exit Fullscreen" : "Fullscreen";
+    resizeLandscapePlot();
+  });
+
+  if (window.ResizeObserver) {
+    state.landscapeResizeObserver = new ResizeObserver(() => {
+      resizeLandscapePlot();
+    });
+    state.landscapeResizeObserver.observe(landscapePlotWrap);
+  }
+}
+
 function handleResize() {
   resizeCanvases();
+
+  if (document.fullscreenElement !== landscapePlotWrap) {
+    constrainLandscapeSizeToContainer();
+  }
+
   if (state.steps.length) renderAll();
 }
 
 function resizeCanvases() {
   resizeCanvasToContainer(fitCanvas, 0.46, 240, 480);
   resizeCanvasToContainer(costCanvas, 0.28, 200, 320);
-  resizeCanvasToContainer(landscapeCanvas, 0.5, 280, 520);
 }
 
 function resizeCanvasToContainer(canvas, ratio, minHeight, maxHeight) {
@@ -82,6 +132,79 @@ function resizeCanvasToContainer(canvas, ratio, minHeight, maxHeight) {
   }
 }
 
+function getLandscapeFitSize() {
+  const host = landscapePlotWrap.parentElement;
+  const hostWidth = host ? host.clientWidth : window.innerWidth;
+  const maxW = Math.max(320, Math.min(1000, hostWidth - 4));
+
+  if (window.innerWidth < 680) {
+    return { width: maxW, height: 380 };
+  }
+
+  if (window.innerWidth < 1024) {
+    return { width: Math.min(maxW, 920), height: 560 };
+  }
+
+  return { width: Math.min(maxW, 980), height: 640 };
+}
+
+function fitLandscapeSize(forceResize = false) {
+  const size = getLandscapeFitSize();
+  setLandscapeSize(size.width, size.height, forceResize);
+}
+
+function setLandscapeSize(rawW, rawH, forceResize = false) {
+  const host = landscapePlotWrap.parentElement;
+  const hostMaxW = host ? host.clientWidth - 4 : rawW;
+  const isFullscreen = document.fullscreenElement === landscapePlotWrap;
+
+  const minW = 320;
+  const minH = 280;
+  const maxW = isFullscreen ? Math.min(1800, window.innerWidth - 24) : Math.max(minW, hostMaxW);
+  const maxH = isFullscreen ? Math.min(1200, window.innerHeight - 24) : Math.min(900, window.innerHeight - 150);
+
+  const width = Math.round(Math.max(minW, Math.min(maxW, rawW)));
+  const height = Math.round(Math.max(minH, Math.min(maxH, rawH)));
+
+  if (forceResize || landscapePlotWrap.clientWidth !== width || landscapePlotWrap.clientHeight !== height) {
+    landscapePlotWrap.style.width = `${width}px`;
+    landscapePlotWrap.style.height = `${height}px`;
+    resizeLandscapePlot();
+  }
+}
+
+function constrainLandscapeSizeToContainer() {
+  setLandscapeSize(landscapePlotWrap.clientWidth, landscapePlotWrap.clientHeight, true);
+}
+
+function scaleLandscapeSize(factor) {
+  setLandscapeSize(landscapePlotWrap.clientWidth * factor, landscapePlotWrap.clientHeight * factor, true);
+}
+
+function resizeLandscapePlot() {
+  if (!state.landscapePlotReady || typeof Plotly === "undefined") return;
+  requestAnimationFrame(() => {
+    Plotly.Plots.resize(landscapePlot);
+  });
+}
+
+function toggleLandscapeFullscreen() {
+  if (document.fullscreenElement === landscapePlotWrap) {
+    document.exitFullscreen();
+    return;
+  }
+
+  if (landscapePlotWrap.requestFullscreen) {
+    landscapePlotWrap.requestFullscreen();
+  }
+}
+
+function resetLandscapeView() {
+  state.landscapeCamera = cloneCamera(DEFAULT_CAMERA);
+  if (!state.landscapePlotReady || typeof Plotly === "undefined") return;
+  Plotly.relayout(landscapePlot, { "scene.camera": state.landscapeCamera });
+}
+
 function runGradientDescent() {
   stopPlayback();
 
@@ -242,8 +365,8 @@ function renderCostPlot() {
 
 function renderCostLandscape() {
   const data = getLandscapeData();
-  if (landscapeMode.value === "3d") renderLandscape3D(data);
-  else renderLandscape2D(data);
+  renderLandscapeSummary();
+  renderLandscapePlotly(data);
 }
 
 function getLandscapeData() {
@@ -265,16 +388,24 @@ function getLandscapeData() {
   const t1Min = t1MinRaw - t1Pad;
   const t1Max = t1MaxRaw + t1Pad;
 
-  const gridN = 44;
+  const gridN = 64;
+  const theta0Values = [];
+  const theta1Values = [];
+
+  for (let i = 0; i < gridN; i += 1) {
+    theta0Values.push(t0Min + (i / (gridN - 1)) * (t0Max - t0Min));
+    theta1Values.push(t1Min + (i / (gridN - 1)) * (t1Max - t1Min));
+  }
+
   const grid = [];
   let zMin = Infinity;
   let zMax = -Infinity;
 
   for (let gy = 0; gy < gridN; gy += 1) {
-    const t1 = t1Min + (gy / (gridN - 1)) * (t1Max - t1Min);
+    const t1 = theta1Values[gy];
     const row = [];
     for (let gx = 0; gx < gridN; gx += 1) {
-      const t0 = t0Min + (gx / (gridN - 1)) * (t0Max - t0Min);
+      const t0 = theta0Values[gx];
       const cost = costAndGradient(state.data, [t0, t1]).cost;
       row.push(cost);
       zMin = Math.min(zMin, cost);
@@ -284,6 +415,7 @@ function getLandscapeData() {
   }
 
   const path = state.steps.map((s) => ({
+    step: s.step,
     t0: s.theta[0],
     t1: s.theta[1],
     z: s.cost,
@@ -291,9 +423,13 @@ function getLandscapeData() {
     g1: s.grad[1],
   }));
 
+  const contourLines = buildContourLines(theta0Values, theta1Values, grid, zMin, zMax, 9);
+
   state.landscapeCache = {
     grid,
     gridN,
+    theta0Values,
+    theta1Values,
     t0Min,
     t0Max,
     t1Min,
@@ -301,275 +437,259 @@ function getLandscapeData() {
     zMin,
     zMax,
     path,
+    contourLines,
   };
 
   return state.landscapeCache;
 }
 
-function renderLandscape2D(data) {
-  const ctx = landscapeCtx;
-  const { width, height } = landscapeCanvas;
-  const pad = 54;
+function buildContourLines(theta0Values, theta1Values, grid, zMin, zMax, levelsCount) {
+  const xs = [];
+  const ys = [];
+  const zs = [];
+  const zBase = zMin;
+
+  for (let levelIdx = 1; levelIdx <= levelsCount; levelIdx += 1) {
+    const level = zMin + (levelIdx / (levelsCount + 1)) * (zMax - zMin);
+
+    for (let y = 0; y < theta1Values.length - 1; y += 1) {
+      for (let x = 0; x < theta0Values.length - 1; x += 1) {
+        const p00 = { x: theta0Values[x], y: theta1Values[y], z: grid[y][x] };
+        const p10 = { x: theta0Values[x + 1], y: theta1Values[y], z: grid[y][x + 1] };
+        const p11 = { x: theta0Values[x + 1], y: theta1Values[y + 1], z: grid[y + 1][x + 1] };
+        const p01 = { x: theta0Values[x], y: theta1Values[y + 1], z: grid[y + 1][x] };
+
+        const intersections = [];
+
+        addContourIntersection(intersections, p00, p10, level);
+        addContourIntersection(intersections, p10, p11, level);
+        addContourIntersection(intersections, p11, p01, level);
+        addContourIntersection(intersections, p01, p00, level);
+
+        if (intersections.length === 2) {
+          xs.push(intersections[0].x, intersections[1].x, null);
+          ys.push(intersections[0].y, intersections[1].y, null);
+          zs.push(zBase, zBase, null);
+        } else if (intersections.length === 4) {
+          xs.push(intersections[0].x, intersections[1].x, null, intersections[2].x, intersections[3].x, null);
+          ys.push(intersections[0].y, intersections[1].y, null, intersections[2].y, intersections[3].y, null);
+          zs.push(zBase, zBase, null, zBase, zBase, null);
+        }
+      }
+    }
+  }
 
-  ctx.clearRect(0, 0, width, height);
+  return { x: xs, y: ys, z: zs };
+}
 
-  const toX = (t0) => pad + ((t0 - data.t0Min) / (data.t0Max - data.t0Min || 1)) * (width - 2 * pad);
-  const toY = (t1) => height - pad - ((t1 - data.t1Min) / (data.t1Max - data.t1Min || 1)) * (height - 2 * pad);
+function addContourIntersection(bucket, a, b, level) {
+  const aSide = a.z - level;
+  const bSide = b.z - level;
 
-  const cellW = (width - 2 * pad) / (data.gridN - 1);
-  const cellH = (height - 2 * pad) / (data.gridN - 1);
+  if (aSide === 0 && bSide === 0) return;
+  if (aSide * bSide > 0) return;
 
-  for (let gy = 0; gy < data.gridN - 1; gy += 1) {
-    for (let gx = 0; gx < data.gridN - 1; gx += 1) {
-      const z = data.grid[gy][gx];
-      const ratio = (z - data.zMin) / (data.zMax - data.zMin || 1);
-      ctx.fillStyle = heatColor(ratio);
-      ctx.fillRect(pad + gx * cellW, pad + gy * cellH, cellW + 1, cellH + 1);
-    }
-  }
+  const denom = b.z - a.z;
+  const t = Math.abs(denom) < 1e-12 ? 0.5 : (level - a.z) / denom;
 
-  drawAxes2D(ctx, width, height, pad, "theta0", "theta1");
+  if (t < 0 || t > 1) return;
 
-  ctx.strokeStyle = "#f4f1ea";
-  ctx.lineWidth = 2.4;
-  ctx.beginPath();
-  data.path.forEach((p, idx) => {
-    const x = toX(p.t0);
-    const y = toY(p.t1);
-    if (idx === 0) ctx.moveTo(x, y);
-    else ctx.lineTo(x, y);
+  bucket.push({
+    x: a.x + t * (b.x - a.x),
+    y: a.y + t * (b.y - a.y),
   });
-  ctx.stroke();
+}
 
-  for (let idx = 0; idx < data.path.length - 1; idx += Math.max(1, Math.floor(data.path.length / 14))) {
-    const p1 = data.path[idx];
-    const p2 = data.path[Math.min(idx + 1, data.path.length - 1)];
-    drawArrow(ctx, toX(p1.t0), toY(p1.t1), toX(p2.t0), toY(p2.t1), "#14212b", 8);
+function renderLandscapeSummary() {
+  if (!state.steps.length) {
+    landscapeSummary.innerHTML = "";
+    return;
   }
 
-  const cur = data.path[state.currentStep];
-  drawArrow(
-    ctx,
-    toX(cur.t0),
-    toY(cur.t1),
-    toX(cur.t0 - cur.g0 * 0.15),
-    toY(cur.t1 - cur.g1 * 0.15),
-    "#dd5e2f",
-    11
-  );
-
-  ctx.fillStyle = "#dd5e2f";
-  ctx.beginPath();
-  ctx.arc(toX(cur.t0), toY(cur.t1), 5.5, 0, Math.PI * 2);
-  ctx.fill();
+  const first = state.steps[0];
+  const final = state.steps[state.steps.length - 1];
+  const current = state.steps[state.currentStep];
+  const reduction = ((first.cost - final.cost) / Math.max(1e-9, first.cost)) * 100;
+
+  landscapeSummary.innerHTML = `
+    <span class="landscape-pill">Start cost: ${first.cost.toFixed(2)}</span>
+    <span class="landscape-pill">Final cost: ${final.cost.toFixed(2)}</span>
+    <span class="landscape-pill">Reduction: ${reduction.toFixed(1)}%</span>
+    <span class="landscape-pill">Iterations: ${state.steps.length - 1}</span>
+    <span class="landscape-pill">Current step: ${state.currentStep}</span>
+    <span class="landscape-pill">Current cost: ${current.cost.toFixed(2)}</span>
+  `;
 }
 
-function renderLandscape3D(data) {
-  const ctx = landscapeCtx;
-  const { width, height } = landscapeCanvas;
+function renderLandscapePlotly(data) {
+  if (typeof Plotly === "undefined") return;
 
-  ctx.clearRect(0, 0, width, height);
+  const trajectoryPath = data.path;
+  const current = data.path[state.currentStep];
+  const start = data.path[0];
+  const final = data.path[data.path.length - 1];
+
+  const baseHover =
+    "Iteration: %{customdata[0]}<br>theta0: %{x:.4f}<br>theta1: %{y:.4f}<br>Cost J(theta): %{z:.4f}<extra></extra>";
+
+  const traces = [
+    {
+      type: "surface",
+      name: "Cost surface",
+      x: data.theta0Values,
+      y: data.theta1Values,
+      z: data.grid,
+      opacity: 0.82,
+      colorscale: "Viridis",
+      showscale: true,
+      colorbar: {
+        title: "Cost J",
+        thickness: 16,
+      },
+      contours: {
+        z: {
+          show: false,
+        },
+      },
+      visible: toggleSurface.checked,
+      hovertemplate: "theta0: %{x:.3f}<br>theta1: %{y:.3f}<br>Cost J(theta): %{z:.4f}<extra></extra>",
+    },
+    {
+      type: "scatter3d",
+      mode: "lines",
+      name: "Contours",
+      x: data.contourLines.x,
+      y: data.contourLines.y,
+      z: data.contourLines.z,
+      line: { color: "rgba(25,45,58,0.65)", width: 3 },
+      visible: toggleContours.checked,
+      hoverinfo: "skip",
+    },
+    {
+      type: "scatter3d",
+      mode: "lines+markers",
+      name: "Gradient descent trajectory",
+      x: trajectoryPath.map((p) => p.t0),
+      y: trajectoryPath.map((p) => p.t1),
+      z: trajectoryPath.map((p) => p.z),
+      customdata: trajectoryPath.map((p) => [p.step]),
+      line: { color: "#f97316", width: 7 },
+      marker: { size: 3.8, color: "#b42318", opacity: 0.95 },
+      visible: toggleTrajectory.checked,
+      hovertemplate: baseHover,
+    },
+    {
+      type: "scatter3d",
+      mode: "markers+text",
+      name: "Start",
+      x: [start.t0],
+      y: [start.t1],
+      z: [start.z],
+      customdata: [[start.step]],
+      marker: { size: 10, color: "#0c7b73", line: { color: "#0b2230", width: 1.2 } },
+      text: ["Start"],
+      textposition: "top center",
+      visible: toggleTrajectory.checked,
+      hovertemplate: baseHover,
+    },
+    {
+      type: "scatter3d",
+      mode: "markers+text",
+      name: "Final",
+      x: [final.t0],
+      y: [final.t1],
+      z: [final.z],
+      customdata: [[final.step]],
+      marker: { size: 10, color: "#dd5e2f", line: { color: "#0b2230", width: 1.2 } },
+      text: ["Final"],
+      textposition: "top center",
+      visible: toggleTrajectory.checked,
+      hovertemplate: baseHover,
+    },
+    {
+      type: "scatter3d",
+      mode: "markers+text",
+      name: "Current",
+      x: [current.t0],
+      y: [current.t1],
+      z: [current.z],
+      customdata: [[current.step]],
+      marker: { size: 9, color: "#111827", line: { color: "#f59e0b", width: 2 } },
+      text: [state.currentStep === data.path.length - 1 ? "Final" : `Step ${state.currentStep}`],
+      textposition: "bottom center",
+      visible: toggleTrajectory.checked,
+      hovertemplate: baseHover,
+    },
+  ];
 
-  const t0Mid = (data.t0Min + data.t0Max) / 2;
-  const t1Mid = (data.t1Min + data.t1Max) / 2;
-  const t0Range = data.t0Max - data.t0Min || 1;
-  const t1Range = data.t1Max - data.t1Min || 1;
-  const zRange = data.zMax - data.zMin || 1;
-  const zScale = Math.max(t0Range, t1Range) * 0.95;
-
-  const baseCamera = {
-    yaw: -1.08,
-    pitch: 0.66,
-    dist: 21,
-    lockCostUp: true,
-    groundTilt: 0.62,
-    costTilt: 1.05,
-    scale: 1,
-    cx: 0,
-    cy: 0,
+  const sceneCamera = state.landscapeCamera || cloneCamera(DEFAULT_CAMERA);
+
+  const layout = {
+    autosize: true,
+    margin: { l: 0, r: 0, t: 8, b: 0 },
+    paper_bgcolor: "#ffffff",
+    scene: {
+      xaxis: {
+        title: "theta0",
+        range: [data.t0Min, data.t0Max],
+        showspikes: false,
+        backgroundcolor: "rgba(247, 248, 252, 0.85)",
+      },
+      yaxis: {
+        title: "theta1",
+        range: [data.t1Min, data.t1Max],
+        showspikes: false,
+        backgroundcolor: "rgba(247, 248, 252, 0.85)",
+      },
+      zaxis: {
+        title: "Cost J(theta)",
+        range: [data.zMin, data.zMax],
+        showspikes: false,
+        backgroundcolor: "rgba(249, 250, 252, 0.9)",
+      },
+      aspectmode: "manual",
+      aspectratio: { x: 1.12, y: 1.12, z: 0.78 },
+      camera: sceneCamera,
+      dragmode: "turntable",
+    },
+    showlegend: false,
+    uirevision: "landscape-ui",
   };
 
-  const camera = fitCameraToScene(data, width, height, zScale, t0Mid, t1Mid, baseCamera);
-
-  const project = (t0, t1, z) => {
-    const x1 = t0 - t0Mid;
-    const x2 = t1 - t1Mid;
-    const y = ((z - data.zMin) / zRange) * zScale;
-    return project3D(x1, x2, y, camera);
+  const config = {
+    responsive: true,
+    displaylogo: false,
+    scrollZoom: true,
+    doubleClick: "reset",
+    modeBarButtonsToRemove: ["lasso2d", "select2d"],
   };
 
-  ctx.strokeStyle = "rgba(30, 44, 53, 0.26)";
-  ctx.lineWidth = 1;
-
-  for (let gy = 0; gy < data.gridN; gy += 1) {
-    ctx.beginPath();
-    let first = true;
-    for (let gx = 0; gx < data.gridN; gx += 1) {
-      const t0 = data.t0Min + (gx / (data.gridN - 1)) * (data.t0Max - data.t0Min);
-      const t1 = data.t1Min + (gy / (data.gridN - 1)) * (data.t1Max - data.t1Min);
-      const p = project(t0, t1, data.grid[gy][gx]);
-      if (first) {
-        ctx.moveTo(p.x, p.y);
-        first = false;
-      } else {
-        ctx.lineTo(p.x, p.y);
-      }
+  const plotPromise = state.landscapePlotReady
+    ? Plotly.react(landscapePlot, traces, layout, config)
+    : Plotly.newPlot(landscapePlot, traces, layout, config);
+
+  plotPromise.then(() => {
+    if (!state.landscapePlotReady) {
+      state.landscapePlotReady = true;
+      landscapePlot.on("plotly_relayout", (ev) => {
+        if (ev && ev["scene.camera"]) {
+          state.landscapeCamera = cloneCamera(ev["scene.camera"]);
+        }
+      });
     }
-    ctx.stroke();
-  }
 
-  for (let gx = 0; gx < data.gridN; gx += 1) {
-    ctx.beginPath();
-    let first = true;
-    for (let gy = 0; gy < data.gridN; gy += 1) {
-      const t0 = data.t0Min + (gx / (data.gridN - 1)) * (data.t0Max - data.t0Min);
-      const t1 = data.t1Min + (gy / (data.gridN - 1)) * (data.t1Max - data.t1Min);
-      const p = project(t0, t1, data.grid[gy][gx]);
-      if (first) {
-        ctx.moveTo(p.x, p.y);
-        first = false;
-      } else {
-        ctx.lineTo(p.x, p.y);
-      }
-    }
-    ctx.stroke();
-  }
-
-  drawSurfaceAxes3D(ctx, data, project);
-  drawAxisLegend3D(ctx, width, height);
-
-  for (let idx = 0; idx < data.path.length - 1; idx += 1) {
-    const p1m = data.path[idx];
-    const p2m = data.path[idx + 1];
-    const p1 = project(p1m.t0, p1m.t1, p1m.z);
-    const p2 = project(p2m.t0, p2m.t1, p2m.z);
-    const t = idx / Math.max(1, data.path.length - 2);
-    ctx.strokeStyle = trajectoryColor(t);
-    ctx.lineWidth = 2.8;
-    ctx.beginPath();
-    ctx.moveTo(p1.x, p1.y);
-    ctx.lineTo(p2.x, p2.y);
-    ctx.stroke();
-  }
-
-  for (let idx = 0; idx < data.path.length - 1; idx += Math.max(1, Math.floor(data.path.length / 10))) {
-    const p1m = data.path[idx];
-    const p2m = data.path[Math.min(idx + 1, data.path.length - 1)];
-    const p1 = project(p1m.t0, p1m.t1, p1m.z);
-    const p2 = project(p2m.t0, p2m.t1, p2m.z);
-    const t = idx / Math.max(1, data.path.length - 2);
-    drawArrow(ctx, p1.x, p1.y, p2.x, p2.y, trajectoryColor(t), 9);
-  }
-
-  const cur = data.path[state.currentStep];
-  const curP = project(cur.t0, cur.t1, cur.z);
-  ctx.fillStyle = "#dd5e2f";
-  ctx.beginPath();
-  ctx.arc(curP.x, curP.y, 5.5, 0, Math.PI * 2);
-  ctx.fill();
-
-  const start = data.path[0];
-  const end = data.path[data.path.length - 1];
-  const startP = project(start.t0, start.t1, start.z);
-  const endP = project(end.t0, end.t1, end.z);
-
-  ctx.fillStyle = "#1e4d4b";
-  ctx.beginPath();
-  ctx.arc(startP.x, startP.y, 4.2, 0, Math.PI * 2);
-  ctx.fill();
-  draw3DLabel(ctx, startP.x + 8, startP.y - 8, `start J=${start.z.toFixed(2)}`);
-
-  ctx.fillStyle = "#dd5e2f";
-  ctx.beginPath();
-  ctx.arc(endP.x, endP.y, 4.2, 0, Math.PI * 2);
-  ctx.fill();
-  draw3DLabel(ctx, endP.x + 8, endP.y + 14, `end J=${end.z.toFixed(2)}`);
-
-  const dropPct = ((start.z - end.z) / Math.max(1e-9, start.z)) * 100;
-  draw3DLabel(
-    ctx,
-    Math.min(startP.x, endP.x) + 14,
-    Math.min(startP.y, endP.y) - 18,
-    `cost drop: ${dropPct.toFixed(1)}%`
-  );
-}
-
-function fitCameraToScene(data, width, height, zScale, t0Mid, t1Mid, baseCamera) {
-  const points = [];
-  const gridStep = Math.max(1, Math.floor(data.gridN / 18));
-
-  for (let gy = 0; gy < data.gridN; gy += gridStep) {
-    for (let gx = 0; gx < data.gridN; gx += gridStep) {
-      const t0 = data.t0Min + (gx / (data.gridN - 1)) * (data.t0Max - data.t0Min);
-      const t1 = data.t1Min + (gy / (data.gridN - 1)) * (data.t1Max - data.t1Min);
-      const z = data.grid[gy][gx];
-      points.push(toCameraPoint(t0, t1, z, data, zScale, t0Mid, t1Mid, baseCamera));
-    }
-  }
-
-  for (const p of data.path) {
-    points.push(toCameraPoint(p.t0, p.t1, p.z, data, zScale, t0Mid, t1Mid, baseCamera));
-  }
-
-  const axisPoints = [
-    [data.t0Min, data.t1Min, data.zMin], // axis origin
-    [data.t0Max, data.t1Min, data.zMin], // theta0 end
-    [data.t0Min, data.t1Max, data.zMin], // theta1 end
-    [data.t0Min, data.t1Min, data.zMax], // cost end
-  ];
-  for (const [t0, t1, z] of axisPoints) {
-    points.push(toCameraPoint(t0, t1, z, data, zScale, t0Mid, t1Mid, baseCamera));
-  }
-
-  let minX = Infinity;
-  let maxX = -Infinity;
-  let minY = Infinity;
-  let maxY = -Infinity;
-
-  for (const p of points) {
-    if (!Number.isFinite(p.x) || !Number.isFinite(p.y)) continue;
-    minX = Math.min(minX, p.x);
-    maxX = Math.max(maxX, p.x);
-    minY = Math.min(minY, p.y);
-    maxY = Math.max(maxY, p.y);
-  }
-
-  if (!Number.isFinite(minX) || !Number.isFinite(maxX) || !Number.isFinite(minY) || !Number.isFinite(maxY)) {
-    return {
-      ...baseCamera,
-      scale: 24,
-      cx: width * 0.5,
-      cy: height * 0.58,
-    };
-  }
-
-  const sceneW = Math.max(1e-6, maxX - minX);
-  const sceneH = Math.max(1e-6, maxY - minY);
-  const padX = Math.max(74, Math.floor(width * 0.2));
-  const padY = Math.max(72, Math.floor(height * 0.22));
-  const availW = Math.max(120, width - padX * 2);
-  const availH = Math.max(120, height - padY * 2);
-  const rawScale = Math.min(availW / sceneW, availH / sceneH);
-  const scale = Math.max(1.5, Math.min(90, rawScale * 0.62));
-  const midX = (minX + maxX) / 2;
-  const midY = (minY + maxY) / 2;
+    resizeLandscapePlot();
+  });
+}
 
+function cloneCamera(camera) {
   return {
-    ...baseCamera,
-    scale,
-    cx: width / 2 - midX * scale,
-    cy: height / 2 - midY * scale,
+    eye: { ...camera.eye },
+    center: { ...camera.center },
+    up: { ...camera.up },
   };
 }
 
-function toCameraPoint(t0, t1, z, data, zScale, t0Mid, t1Mid, camera) {
-  const zRange = data.zMax - data.zMin || 1;
-  const x1 = t0 - t0Mid;
-  const x2 = t1 - t1Mid;
-  const y = ((z - data.zMin) / zRange) * zScale;
-  return project3D(x1, x2, y, camera);
-}
-
 function renderCostSummary() {
   const first = state.steps[0];
   const last = state.steps[state.steps.length - 1];
@@ -577,7 +697,7 @@ function renderCostSummary() {
   costSummary.innerHTML = `
     <article class="matrix-card">
       <p class="matrix-title">Cost Function</p>
-      <p class="formula-line">J(θ) = (1/2m) Σ(θ0 + θ1*x1 - y)^2</p>
+      <p class="formula-line">J(theta) = (1/2m) sum((theta0 + theta1*x1 - y)^2)</p>
     </article>
     <article class="matrix-card">
       <p class="matrix-title">Result</p>
@@ -645,137 +765,6 @@ function drawAxes2D(ctx, width, height, pad, xLabel, yLabel) {
   ctx.fillText(yLabel, pad - 30, pad - 10);
 }
 
-function drawSurfaceAxes3D(ctx, data, project) {
-  const origin = project(data.t0Min, data.t1Min, data.zMin);
-  const t0End = project(data.t0Max, data.t1Min, data.zMin);
-  const t1End = project(data.t0Min, data.t1Max, data.zMin);
-  const zEnd = project(data.t0Min, data.t1Min, data.zMax);
-
-  drawArrow(ctx, origin.x, origin.y, t0End.x, t0End.y, "#30444f", 9);
-  drawArrow(ctx, origin.x, origin.y, t1End.x, t1End.y, "#30444f", 9);
-  drawArrow(ctx, origin.x, origin.y, zEnd.x, zEnd.y, "#b23f2c", 10);
-
-  draw3DLabel(ctx, t0End.x + 7, t0End.y + 14, "theta0 (+)");
-  draw3DLabel(ctx, t1End.x + 7, t1End.y + 14, "theta1 (+)");
-  draw3DLabel(ctx, zEnd.x + 8, zEnd.y - 10, "cost J(theta) increases");
-  draw3DLabel(ctx, origin.x + 8, origin.y + 16, "cost decreases toward valley");
-}
-
-function draw3DLabel(ctx, x, y, text) {
-  ctx.fillStyle = "#23333d";
-  ctx.font = "12px 'Courier New', monospace";
-  ctx.fillText(text, x, y);
-}
-
-function drawAxisLegend3D(ctx, width, height) {
-  const boxW = Math.min(270, Math.max(200, Math.floor(width * 0.34)));
-  const boxH = Math.min(120, Math.max(92, Math.floor(height * 0.24)));
-  const boxX = 16;
-  const boxY = height - boxH - 14;
-  const ox = boxX + Math.floor(boxW * 0.36);
-  const oy = boxY + Math.floor(boxH * 0.78);
-
-  ctx.fillStyle = "rgba(245, 244, 240, 0.92)";
-  ctx.strokeStyle = "rgba(35, 51, 61, 0.4)";
-  ctx.lineWidth = 1;
-  ctx.beginPath();
-  ctx.rect(boxX, boxY, boxW, boxH);
-  ctx.fill();
-  ctx.stroke();
-
-  const xLen = Math.floor(boxW * 0.42);
-  const yLen = Math.floor(boxW * 0.24);
-  const zLen = Math.floor(boxH * 0.64);
-
-  drawArrow(ctx, ox, oy, ox + xLen, oy, "#1f5d7a", 9);
-  drawArrow(ctx, ox, oy, ox - yLen, oy - yLen, "#2f7a3a", 9);
-  drawArrow(ctx, ox, oy, ox, oy - zLen, "#b23f2c", 9);
-
-  ctx.fillStyle = "#1f5d7a";
-  ctx.font = "12px 'Courier New', monospace";
-  ctx.fillText("theta0 (+)", ox + xLen + 4, oy + 4);
-
-  ctx.fillStyle = "#2f7a3a";
-  ctx.fillText("theta1 (+)", Math.max(6, ox - yLen - 62), oy - yLen - 6);
-
-  ctx.fillStyle = "#b23f2c";
-  ctx.fillText("cost J(theta) (+)", ox + 8, oy - zLen - 8);
-}
-
-function project3D(x1, x2, y, camera) {
-  if (camera.lockCostUp) {
-    const cosY = Math.cos(camera.yaw);
-    const sinY = Math.sin(camera.yaw);
-    const u = x1 * cosY - x2 * sinY;
-    const ground = x1 * sinY + x2 * cosY;
-    const v = ground * camera.groundTilt + y * camera.costTilt;
-
-    return {
-      x: camera.cx + u * camera.scale,
-      y: camera.cy - v * camera.scale,
-    };
-  }
-
-  const cosY = Math.cos(camera.yaw);
-  const sinY = Math.sin(camera.yaw);
-  const cosX = Math.cos(camera.pitch);
-  const sinX = Math.sin(camera.pitch);
-
-  const u = x1 * cosY - x2 * sinY;
-  const v0 = x1 * sinY + x2 * cosY;
-  const v = v0 * cosX - y * sinX;
-  const w = v0 * sinX + y * cosX;
-
-  const perspective = camera.dist / (camera.dist + w + 0.001);
-  return {
-    x: camera.cx + u * camera.scale * perspective,
-    y: camera.cy - v * camera.scale * perspective,
-  };
-}
-
-function heatColor(t) {
-  const clamped = Math.max(0, Math.min(1, t));
-  const r = Math.round(34 + clamped * 210);
-  const g = Math.round(48 + (1 - clamped) * 140);
-  const b = Math.round(95 + (1 - clamped) * 80);
-  return `rgb(${r}, ${g}, ${b})`;
-}
-
-function trajectoryColor(t) {
-  const clamped = Math.max(0, Math.min(1, t));
-  const r = Math.round(22 + clamped * 205);
-  const g = Math.round(88 + clamped * 28);
-  const b = Math.round(120 - clamped * 68);
-  return `rgb(${r}, ${g}, ${b})`;
-}
-
-function drawArrow(ctx, x1, y1, x2, y2, color, headSize) {
-  const dx = x2 - x1;
-  const dy = y2 - y1;
-  const len = Math.hypot(dx, dy);
-  if (len < 0.0001) return;
-
-  const ux = dx / len;
-  const uy = dy / len;
-  const hx = x2 - ux * headSize;
-  const hy = y2 - uy * headSize;
-
-  ctx.strokeStyle = color;
-  ctx.fillStyle = color;
-  ctx.lineWidth = 2;
-  ctx.beginPath();
-  ctx.moveTo(x1, y1);
-  ctx.lineTo(x2, y2);
-  ctx.stroke();
-
-  ctx.beginPath();
-  ctx.moveTo(x2, y2);
-  ctx.lineTo(hx - uy * (headSize * 0.5), hy + ux * (headSize * 0.5));
-  ctx.lineTo(hx + uy * (headSize * 0.5), hy - ux * (headSize * 0.5));
-  ctx.closePath();
-  ctx.fill();
-}
-
 function startPlayback() {
   if (state.timer || !state.steps.length) return;
   playGdBtn.textContent = "Pause";

linear-regression/styles.css

@@ -368,14 +368,89 @@ input[type="checkbox"] {
 }
 
 #fitCanvas,
-#costCanvas,
-#landscapeCanvas {
+#costCanvas {
   width: 100%;
   border: 1px solid var(--line);
   border-radius: 12px;
   background: #fff;
 }
 
+.landscape-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 10px;
+  margin: 6px 0 12px;
+}
+
+.landscape-pill {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 8px 10px;
+  background: #fff;
+  font-size: 0.9rem;
+  color: #24323a;
+}
+
+.landscape-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.viz-btn {
+  padding: 8px 12px;
+  border-radius: 9px;
+  border: 1px solid #c7c0b2;
+  background: #fff;
+  color: #24323a;
+}
+
+.viz-btn:hover {
+  border-color: var(--accent-2);
+}
+
+.landscape-controls.toggles {
+  margin-bottom: 12px;
+}
+
+.viz-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  font-weight: 600;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 6px 10px;
+  background: #fff;
+}
+
+.viz-toggle input {
+  margin: 0;
+}
+
+.landscape-plot-wrap {
+  width: min(100%, 980px);
+  height: 620px;
+  min-width: 320px;
+  min-height: 320px;
+  max-width: 1400px;
+  max-height: 900px;
+  resize: both;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: #fff;
+  position: relative;
+}
+
+.landscape-plot {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+}
+
 .log-wrap {
   overflow: auto;
   border: 1px solid var(--line);
@@ -434,4 +509,10 @@ input[type="checkbox"] {
   .gd-slider-row {
     grid-template-columns: 1fr;
   }
+
+  .landscape-plot-wrap {
+    width: 100%;
+    height: 420px;
+    min-height: 280px;
+  }
 }

logistic-regression/cost-visualization.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DDW Interface - Cost Function Visualization</title>
+    <title>DDW Interface - Logistic Cost Landscape</title>
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
@@ -34,10 +34,11 @@
 
         <p class="hint" id="formulaText"></p>
 
-        <label for="lr">Learning rate: <span id="lrValue">0.20</span></label>
-        <input id="lr" type="range" min="0.001" max="1.000" step="0.001" value="0.200" />
+        <label for="lr">Learning rate: <span id="lrValue">0.100</span></label>
+        <input id="lr" type="range" min="0.001" max="10.000" step="0.001" value="0.100" />
         <label for="lrInput">Learning rate input</label>
-        <input id="lrInput" type="number" min="0.001" max="1.000" step="0.001" value="0.200" />
+        <input id="lrInput" type="number" min="0.001" max="10.000" step="0.001" value="0.100" />
+        <p class="hint">If you use z-normalization, you can generally use a larger learning rate than with unscaled features.</p>
 
         <label for="iters">Iterations: <span id="iterValue">80</span></label>
         <input id="iters" type="range" min="5" max="220" step="1" value="80" />
@@ -68,12 +69,67 @@
       </section>
 
       <section class="panel chart-panel">
-        <h2>3D Cost Surface and Gradient Descent Trajectory</h2>
-        <canvas id="costCanvas" width="900" height="520" aria-label="3D cost function and gradient descent"></canvas>
+        <h2>Cost Landscape (Gradient Descent)</h2>
+        <div id="modelDefinition" class="model-definition"></div>
+
+        <p class="hint">
+          The height represents Binary Cross-Entropy (BCE) cost J(theta). Lower points correspond to parameter values that better fit class labels.
+        </p>
+        <p class="hint">
+          Each trajectory point is one gradient-descent update: horizontal movement = parameter changes, vertical movement = BCE change.
+        </p>
+
+        <div id="landscapeSummary" class="landscape-summary"></div>
+
+        <div class="landscape-controls">
+          <label for="landscapeView">Landscape View</label>
+          <select id="landscapeView">
+            <option value="surface3d">3D Surface + Trajectory</option>
+            <option value="contour2d">2D Contour + Trajectory</option>
+            <option value="surface3dContours">3D Surface + Contours</option>
+          </select>
+          <button id="resetViewBtn" type="button" class="viz-btn">Reset View</button>
+          <button id="plotSmallerBtn" type="button" class="viz-btn">-</button>
+          <button id="plotFitBtn" type="button" class="viz-btn">Fit</button>
+          <button id="plotLargerBtn" type="button" class="viz-btn">+</button>
+          <button id="plotFullscreenBtn" type="button" class="viz-btn">Fullscreen</button>
+        </div>
+
+        <div class="landscape-controls toggles">
+          <label class="viz-toggle"><input id="toggleSurface" type="checkbox" checked /> Surface</label>
+          <label class="viz-toggle"><input id="toggleContours" type="checkbox" checked /> Contours</label>
+          <label class="viz-toggle"><input id="toggleTrajectory" type="checkbox" checked /> Trajectory</label>
+          <label class="viz-toggle"><input id="toggleCurrent" type="checkbox" checked /> Current Point</label>
+        </div>
+
+        <div class="viz-info-row">
+          <div class="viz-chip" id="clipInfo">Surface clipping: none</div>
+          <div class="viz-chip" id="minimumInfo">Lowest point in shown region: --</div>
+          <div class="viz-chip warning" id="stabilityWarning">Stability: normal</div>
+        </div>
+
+        <div id="landscapePlotWrap" class="landscape-plot-wrap">
+          <div id="landscapePlot" class="landscape-plot"></div>
+        </div>
+
+        <p class="slice-label">Drag to rotate · Scroll to zoom · Hover to inspect · Resize from the corner</p>
+
+        <div class="iteration-block">
+          <label for="landscapeStep">Gradient Descent Step</label>
+          <input id="landscapeStep" type="range" min="0" max="0" value="0" />
+          <span id="landscapeStepLabel">0 / 0</span>
+        </div>
+
+        <div class="classifier-panel">
+          <h3>Classifier at This Step</h3>
+          <canvas id="classifierCanvas" width="940" height="310" aria-label="Current classifier view"></canvas>
+        </div>
+
         <div class="stats" id="costStats"></div>
       </section>
     </main>
 
-    <script src="cost.js"></script>
+    <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
+    <script src="cost.js?v=20260813b"></script>
   </body>
 </html>

logistic-regression/cost.js

@@ -1,5 +1,7 @@
-const canvas = document.getElementById("costCanvas");
-const ctx = canvas.getContext("2d");
+const plotWrap = document.getElementById("landscapePlotWrap");
+const plotEl = document.getElementById("landscapePlot");
+const classifierCanvas = document.getElementById("classifierCanvas");
+const classifierCtx = classifierCanvas.getContext("2d");
 
 const controls = {
   caseSelect: document.getElementById("caseSelect"),
@@ -15,6 +17,17 @@ const controls = {
   restartBtn: document.getElementById("restartBtn"),
   regenBtn: document.getElementById("regenBtn"),
   clearBtn: document.getElementById("clearBtn"),
+  landscapeView: document.getElementById("landscapeView"),
+  resetViewBtn: document.getElementById("resetViewBtn"),
+  plotSmallerBtn: document.getElementById("plotSmallerBtn"),
+  plotFitBtn: document.getElementById("plotFitBtn"),
+  plotLargerBtn: document.getElementById("plotLargerBtn"),
+  plotFullscreenBtn: document.getElementById("plotFullscreenBtn"),
+  toggleSurface: document.getElementById("toggleSurface"),
+  toggleContours: document.getElementById("toggleContours"),
+  toggleTrajectory: document.getElementById("toggleTrajectory"),
+  toggleCurrent: document.getElementById("toggleCurrent"),
+  stepSlider: document.getElementById("landscapeStep"),
 };
 
 const labels = {
@@ -24,44 +37,87 @@ const labels = {
   p1: document.getElementById("p1Value"),
   p2: document.getElementById("p2Value"),
   speed: document.getElementById("speedValue"),
+  stepLabel: document.getElementById("landscapeStepLabel"),
 };
 
+const modelDefinition = document.getElementById("modelDefinition");
+const landscapeSummary = document.getElementById("landscapeSummary");
 const stats = document.getElementById("costStats");
+const clipInfo = document.getElementById("clipInfo");
+const minimumInfo = document.getElementById("minimumInfo");
+const stabilityWarning = document.getElementById("stabilityWarning");
+
+const DEFAULT_CAMERA = {
+  eye: { x: 1.5, y: 1.5, z: 1.1 },
+  center: { x: 0, y: 0, z: 0 },
+  up: { x: 0, y: 0, z: 1 },
+};
 
-const P_MIN = -6;
-const P_MAX = 6;
-const GRID_N = 26;
+const GRID_N = 60;
+const MIN_SPAN = 2.0;
 
 const caseMeta = {
   case1: {
     p1Name: "b0",
     p2Name: "b1",
-    logistic: "Case 1 logistic: p(y=1|x) = 1 / (1 + exp(-(b0 + b1x)))",
+    p1Label: "b0 (intercept)",
+    p2Label: "b1 (weight for x)",
+    model: "z = b0 + b1*x",
+    explain: [
+      "Cost landscape: J(b0, b1)",
+      "b0 = intercept, b1 = coefficient of x",
+    ],
+    formula: "Case 1 logistic: p(y=1|x) = 1 / (1 + exp(-(b0 + b1x)))",
   },
   case2: {
     p1Name: "w1",
     p2Name: "w2",
-    logistic: "Case 2 logistic: p(y=1|x1,x2) = 1 / (1 + exp(-(w1x1 + w2x2))) (no intercept)",
+    p1Label: "w1 (weight for x1)",
+    p2Label: "w2 (weight for x2)",
+    model: "z = w1*x1 + w2*x2",
+    explain: [
+      "Cost landscape: J(w1, w2)",
+      "w1 = coefficient of x1, w2 = coefficient of x2",
+      "No intercept is used in this model.",
+    ],
+    formula: "Case 2 logistic: p(y=1|x1,x2) = 1 / (1 + exp(-(w1x1 + w2x2)))",
   },
 };
 
-let datasets = { case1: [], case2: [] };
-let gridCache = { case1: null, case2: null };
+const state = {
+  datasets: { case1: [], case2: [] },
+  dataVersion: 0,
+  trajectory: [],
+  stepIndex: 0,
+  timer: null,
+  unstableWarning: "",
+  gridCache: { case1: null, case2: null },
+  plotReady: false,
+  camera3d: null,
+  resizeObserver: null,
+};
 
-let trajectory = [];
-let stepIndex = 0;
-let animationTimer = null;
+function hasPlotly() {
+  return typeof window !== "undefined" && typeof window.Plotly !== "undefined";
+}
 
-function sigmoid(z) {
-  return 1 / (1 + Math.exp(-z));
+function showPlotFallback(message) {
+  plotEl.innerHTML = `<div class="plot-fallback">${message}</div>`;
 }
 
-function clampProb(p) {
-  return Math.min(1 - 1e-9, Math.max(1e-9, p));
+function sigmoid(z) {
+  if (z >= 0) {
+    const e = Math.exp(-z);
+    return 1 / (1 + e);
+  }
+  const e = Math.exp(z);
+  return e / (1 + e);
 }
 
-function randRange(min, max) {
-  return min + Math.random() * (max - min);
+function softplus(z) {
+  if (z > 35) return z;
+  if (z < -35) return Math.exp(z);
+  return Math.log1p(Math.exp(z));
 }
 
 function randNormal(mean = 0, std = 1) {
@@ -71,51 +127,76 @@ function randNormal(mean = 0, std = 1) {
   return mean + z0 * std;
 }
 
+function percentile(sortedValues, q) {
+  if (sortedValues.length === 0) return NaN;
+  const pos = (sortedValues.length - 1) * q;
+  const lo = Math.floor(pos);
+  const hi = Math.min(sortedValues.length - 1, lo + 1);
+  const t = pos - lo;
+  return sortedValues[lo] * (1 - t) + sortedValues[hi] * t;
+}
+
+function cloneCamera(camera) {
+  return {
+    eye: { ...camera.eye },
+    center: { ...camera.center },
+    up: { ...camera.up },
+  };
+}
+
+function formatCost(v) {
+  if (!Number.isFinite(v)) return "--";
+  if (Math.abs(v) < 1) return v.toFixed(4);
+  if (Math.abs(v) < 100) return v.toFixed(3);
+  return v.toFixed(2);
+}
+
 function generateSyntheticData() {
   const case1 = [];
   const case2 = [];
 
-  const trueB0 = -0.2;
-  const trueB1 = 2.35;
+  const trueB0 = -0.15;
+  const trueB1 = 1.05;
   for (let i = 0; i < 160; i += 1) {
-    const center = i < 80 ? -3.0 : 3.0;
-    const x = randNormal(center, 1.3);
+    const center = i < 80 ? -1.5 : 1.5;
+    const x = randNormal(center, 1.9);
     const p = sigmoid(trueB0 + trueB1 * x);
     const y = Math.random() < p ? 1 : 0;
     case1.push({ x, y });
   }
 
-  const trueW1 = 2.15;
-  const trueW2 = 1.85;
-  for (let i = 0; i < 190; i += 1) {
-    const center1 = i < 95 ? -2.4 : 2.4;
-    const center2 = i < 95 ? -1.9 : 1.9;
-    const x1 = randNormal(center1, 1.25);
-    const x2 = randNormal(center2 + 0.45 * (x1 - center1), 1.1);
+  const trueW1 = 1.1;
+  const trueW2 = 0.95;
+  for (let i = 0; i < 200; i += 1) {
+    const center1 = i < 100 ? -1.4 : 1.4;
+    const center2 = i < 100 ? -1.2 : 1.2;
+    const x1 = randNormal(center1, 1.7);
+    const x2 = randNormal(center2 + 0.25 * (x1 - center1), 1.55);
     const p = sigmoid(trueW1 * x1 + trueW2 * x2);
     const y = Math.random() < p ? 1 : 0;
     case2.push({ x1, x2, y });
   }
 
-  datasets = { case1, case2 };
-  gridCache = { case1: null, case2: null };
+  state.datasets = { case1, case2 };
+  state.dataVersion += 1;
+  state.gridCache = { case1: null, case2: null };
 }
 
 function costFor(caseKey, params) {
-  const data = datasets[caseKey];
+  const data = state.datasets[caseKey];
   let total = 0;
 
   if (caseKey === "case1") {
     const [b0, b1] = params;
     for (const row of data) {
-      const p = clampProb(sigmoid(b0 + b1 * row.x));
-      total += -(row.y * Math.log(p) + (1 - row.y) * Math.log(1 - p));
+      const z = b0 + b1 * row.x;
+      total += softplus(z) - row.y * z;
     }
   } else {
     const [w1, w2] = params;
     for (const row of data) {
-      const p = clampProb(sigmoid(w1 * row.x1 + w2 * row.x2));
-      total += -(row.y * Math.log(p) + (1 - row.y) * Math.log(1 - p));
+      const z = w1 * row.x1 + w2 * row.x2;
+      total += softplus(z) - row.y * z;
     }
   }
 
@@ -123,7 +204,7 @@ function costFor(caseKey, params) {
 }
 
 function gradFor(caseKey, params) {
-  const data = datasets[caseKey];
+  const data = state.datasets[caseKey];
   let g1 = 0;
   let g2 = 0;
 
@@ -149,321 +230,836 @@ function gradFor(caseKey, params) {
   return [g1 / m, g2 / m];
 }
 
+function estimateAnchorPoint(caseKey) {
+  let params = [0, 0];
+  const lr = 0.1;
+
+  for (let i = 0; i < 220; i += 1) {
+    const grad = gradFor(caseKey, params);
+    const next = [params[0] - lr * grad[0], params[1] - lr * grad[1]];
+    if (!Number.isFinite(next[0]) || !Number.isFinite(next[1])) break;
+    params = next;
+  }
+
+  return params;
+}
+
 function buildTrajectory(caseKey, start, lr, iters) {
   const path = [];
   let params = [start[0], start[1]];
+  let unstable = false;
 
-  path.push({ p1: params[0], p2: params[1], cost: costFor(caseKey, params), gradNorm: 0 });
+  path.push({ step: 0, p1: params[0], p2: params[1], cost: costFor(caseKey, params), dCost: 0 });
 
   for (let i = 0; i < iters; i += 1) {
     const grad = gradFor(caseKey, params);
-    const gradNorm = Math.hypot(grad[0], grad[1]);
-    params = [params[0] - lr * grad[0], params[1] - lr * grad[1]];
-    path.push({ p1: params[0], p2: params[1], cost: costFor(caseKey, params), gradNorm });
+    const next = [params[0] - lr * grad[0], params[1] - lr * grad[1]];
+
+    if (!Number.isFinite(next[0]) || !Number.isFinite(next[1])) {
+      unstable = true;
+      break;
+    }
+
+    const nextCost = costFor(caseKey, next);
+    if (!Number.isFinite(nextCost) || nextCost > 1e6) {
+      unstable = true;
+      break;
+    }
+
+    const prevCost = path[path.length - 1].cost;
+    params = next;
+    path.push({ step: i + 1, p1: params[0], p2: params[1], cost: nextCost, dCost: nextCost - prevCost });
   }
 
-  return path;
+  return { path, unstable };
 }
 
-function getGrid(caseKey) {
-  if (gridCache[caseKey]) {
-    return gridCache[caseKey];
+function getTrajectoryBounds(caseKey) {
+  const anchor = estimateAnchorPoint(caseKey);
+  const p1s = [anchor[0], Number(controls.p1.value)];
+  const p2s = [anchor[1], Number(controls.p2.value)];
+
+  for (const s of state.trajectory) {
+    p1s.push(s.p1);
+    p2s.push(s.p2);
+  }
+
+  let p1Min = Math.min(...p1s);
+  let p1Max = Math.max(...p1s);
+  let p2Min = Math.min(...p2s);
+  let p2Max = Math.max(...p2s);
+
+  let span1 = p1Max - p1Min;
+  let span2 = p2Max - p2Min;
+
+  if (span1 < MIN_SPAN) {
+    const add = (MIN_SPAN - span1) / 2;
+    p1Min -= add;
+    p1Max += add;
+    span1 = MIN_SPAN;
+  }
+
+  if (span2 < MIN_SPAN) {
+    const add = (MIN_SPAN - span2) / 2;
+    p2Min -= add;
+    p2Max += add;
+    span2 = MIN_SPAN;
+  }
+
+  const pad1 = Math.max(0.4 * span1, 0.9);
+  const pad2 = Math.max(0.4 * span2, 0.9);
+
+  return {
+    p1Min: p1Min - pad1,
+    p1Max: p1Max + pad1,
+    p2Min: p2Min - pad2,
+    p2Max: p2Max + pad2,
+  };
+}
+
+function getGridCacheKey(caseKey) {
+  const first = state.trajectory[0];
+  const last = state.trajectory[state.trajectory.length - 1];
+  return [
+    state.dataVersion,
+    caseKey,
+    controls.p1.value,
+    controls.p2.value,
+    state.trajectory.length,
+    first ? `${first.p1.toFixed(4)}:${first.p2.toFixed(4)}` : "none",
+    last ? `${last.p1.toFixed(4)}:${last.p2.toFixed(4)}` : "none",
+  ].join("|");
+}
+
+function buildGrid(caseKey) {
+  const bounds = getTrajectoryBounds(caseKey);
+  const p1Values = [];
+  const p2Values = [];
+
+  for (let i = 0; i < GRID_N; i += 1) {
+    p1Values.push(bounds.p1Min + (i / (GRID_N - 1)) * (bounds.p1Max - bounds.p1Min));
+    p2Values.push(bounds.p2Min + (i / (GRID_N - 1)) * (bounds.p2Max - bounds.p2Min));
   }
 
   const vals = [];
+  const flat = [];
   let min = Infinity;
   let max = -Infinity;
+  let minI = 0;
+  let minJ = 0;
 
   for (let j = 0; j < GRID_N; j += 1) {
     const row = [];
-    const p2 = P_MIN + (j / (GRID_N - 1)) * (P_MAX - P_MIN);
+    const p2 = p2Values[j];
+
     for (let i = 0; i < GRID_N; i += 1) {
-      const p1 = P_MIN + (i / (GRID_N - 1)) * (P_MAX - P_MIN);
+      const p1 = p1Values[i];
       const c = costFor(caseKey, [p1, p2]);
       row.push(c);
-      if (c < min) min = c;
+      flat.push(c);
+
+      if (c < min) {
+        min = c;
+        minI = i;
+        minJ = j;
+      }
       if (c > max) max = c;
     }
+
     vals.push(row);
   }
 
-  gridCache[caseKey] = { vals, min, max };
-  return gridCache[caseKey];
-}
-
-function colorScale(t) {
-  const clamped = Math.max(0, Math.min(1, t));
-  const r = Math.round(35 + 220 * clamped);
-  const g = Math.round(90 + 160 * (1 - Math.abs(clamped - 0.5) * 2));
-  const b = Math.round(240 - 220 * clamped);
-  return `rgb(${r},${g},${b})`;
-}
-
-function project3D(x, y, z) {
-  const yaw = -0.75;
-  const pitch = 0.75;
-
-  const cy = Math.cos(yaw);
-  const sy = Math.sin(yaw);
-  const cp = Math.cos(pitch);
-  const sp = Math.sin(pitch);
-
-  const xr = x * cy - y * sy;
-  const yr = x * sy + y * cy;
-
-  const y2 = yr * cp - z * sp;
-  const z2 = yr * sp + z * cp;
-
-  const perspective = 1 / (1 + z2 * 0.09);
-  const scale = 56;
+  const sorted = flat.slice().sort((a, b) => a - b);
+  let clipMax = percentile(sorted, 0.975);
+  if (!Number.isFinite(clipMax)) clipMax = max;
+  clipMax = Math.min(max, Math.max(min + 1e-6, clipMax));
 
   return {
-    sx: canvas.width * 0.49 + xr * scale * perspective,
-    sy: canvas.height * 0.62 - y2 * scale * perspective,
-    depth: z2,
+    key: "",
+    p1Values,
+    p2Values,
+    vals,
+    min,
+    max,
+    clipMax,
+    p1Min: bounds.p1Min,
+    p1Max: bounds.p1Max,
+    p2Min: bounds.p2Min,
+    p2Max: bounds.p2Max,
+    minPoint: {
+      p1: p1Values[minI],
+      p2: p2Values[minJ],
+      cost: min,
+    },
   };
 }
 
-function mapParam(v) {
-  return ((v - P_MIN) / (P_MAX - P_MIN)) * 8 - 4;
+function getGrid(caseKey) {
+  const key = getGridCacheKey(caseKey);
+  const cached = state.gridCache[caseKey];
+  if (cached && cached.key === key) return cached;
+
+  const built = buildGrid(caseKey);
+  built.key = key;
+  state.gridCache[caseKey] = built;
+  return built;
 }
 
-function mapCost(cost, minCost, maxCost) {
-  const t = (cost - minCost) / Math.max(1e-9, maxCost - minCost);
-  return t * 5.0;
-}
+function collectEdgeHit(bucket, a, b, level) {
+  const da = a.z - level;
+  const db = b.z - level;
+  if (da === 0 && db === 0) return;
+  if (da * db > 0) return;
 
-function drawSurface(caseKey) {
-  const grid = getGrid(caseKey);
-  const { vals, min, max } = grid;
-
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.fillStyle = "#ffffff";
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-  for (let j = 0; j < GRID_N - 1; j += 1) {
-    for (let i = 0; i < GRID_N - 1; i += 1) {
-      const p1a = P_MIN + (i / (GRID_N - 1)) * (P_MAX - P_MIN);
-      const p2a = P_MIN + (j / (GRID_N - 1)) * (P_MAX - P_MIN);
-      const p1b = P_MIN + ((i + 1) / (GRID_N - 1)) * (P_MAX - P_MIN);
-      const p2b = P_MIN + ((j + 1) / (GRID_N - 1)) * (P_MAX - P_MIN);
-
-      const z00 = mapCost(vals[j][i], min, max);
-      const z10 = mapCost(vals[j][i + 1], min, max);
-      const z11 = mapCost(vals[j + 1][i + 1], min, max);
-      const z01 = mapCost(vals[j + 1][i], min, max);
-
-      const q00 = project3D(mapParam(p1a), mapParam(p2a), z00);
-      const q10 = project3D(mapParam(p1b), mapParam(p2a), z10);
-      const q11 = project3D(mapParam(p1b), mapParam(p2b), z11);
-      const q01 = project3D(mapParam(p1a), mapParam(p2b), z01);
-
-      const t = ((vals[j][i] + vals[j][i + 1] + vals[j + 1][i + 1] + vals[j + 1][i]) / 4 - min) / Math.max(1e-9, max - min);
-      ctx.fillStyle = colorScale(t);
-      ctx.globalAlpha = 0.48;
-      ctx.beginPath();
-      ctx.moveTo(q00.sx, q00.sy);
-      ctx.lineTo(q10.sx, q10.sy);
-      ctx.lineTo(q11.sx, q11.sy);
-      ctx.lineTo(q01.sx, q01.sy);
-      ctx.closePath();
-      ctx.fill();
-    }
-  }
-  ctx.globalAlpha = 1;
+  const den = b.z - a.z;
+  const t = Math.abs(den) < 1e-12 ? 0.5 : (level - a.z) / den;
+  if (t < 0 || t > 1) return;
 
-  for (let j = 0; j < GRID_N; j += 1) {
-    ctx.beginPath();
-    for (let i = 0; i < GRID_N; i += 1) {
-      const p1 = P_MIN + (i / (GRID_N - 1)) * (P_MAX - P_MIN);
-      const p2 = P_MIN + (j / (GRID_N - 1)) * (P_MAX - P_MIN);
-      const x = mapParam(p1);
-      const y = mapParam(p2);
-      const z = mapCost(vals[j][i], min, max);
-      const pr = project3D(x, y, z);
-      if (i === 0) ctx.moveTo(pr.sx, pr.sy);
-      else ctx.lineTo(pr.sx, pr.sy);
-    }
-    ctx.strokeStyle = "rgba(13, 66, 83, 0.34)";
-    ctx.lineWidth = 1;
-    ctx.stroke();
-  }
+  bucket.push({
+    x: a.x + t * (b.x - a.x),
+    y: a.y + t * (b.y - a.y),
+  });
+}
 
-  for (let i = 0; i < GRID_N; i += 1) {
-    ctx.beginPath();
-    for (let j = 0; j < GRID_N; j += 1) {
-      const p1 = P_MIN + (i / (GRID_N - 1)) * (P_MAX - P_MIN);
-      const p2 = P_MIN + (j / (GRID_N - 1)) * (P_MAX - P_MIN);
-      const x = mapParam(p1);
-      const y = mapParam(p2);
-      const z = mapCost(vals[j][i], min, max);
-      const pr = project3D(x, y, z);
-      if (j === 0) ctx.moveTo(pr.sx, pr.sy);
-      else ctx.lineTo(pr.sx, pr.sy);
+function buildContourSegments3D(grid) {
+  const xs = [];
+  const ys = [];
+  const zs = [];
+  const levels = 9;
+  const zFloor = grid.min;
+
+  for (let levelIdx = 1; levelIdx <= levels; levelIdx += 1) {
+    const level = grid.min + (levelIdx / (levels + 1)) * (grid.clipMax - grid.min);
+
+    for (let j = 0; j < GRID_N - 1; j += 1) {
+      for (let i = 0; i < GRID_N - 1; i += 1) {
+        const p00 = { x: grid.p1Values[i], y: grid.p2Values[j], z: grid.vals[j][i] };
+        const p10 = { x: grid.p1Values[i + 1], y: grid.p2Values[j], z: grid.vals[j][i + 1] };
+        const p11 = { x: grid.p1Values[i + 1], y: grid.p2Values[j + 1], z: grid.vals[j + 1][i + 1] };
+        const p01 = { x: grid.p1Values[i], y: grid.p2Values[j + 1], z: grid.vals[j + 1][i] };
+
+        const hits = [];
+        collectEdgeHit(hits, p00, p10, level);
+        collectEdgeHit(hits, p10, p11, level);
+        collectEdgeHit(hits, p11, p01, level);
+        collectEdgeHit(hits, p01, p00, level);
+
+        if (hits.length === 2) {
+          xs.push(hits[0].x, hits[1].x, null);
+          ys.push(hits[0].y, hits[1].y, null);
+          zs.push(zFloor, zFloor, null);
+        } else if (hits.length === 4) {
+          xs.push(hits[0].x, hits[1].x, null, hits[2].x, hits[3].x, null);
+          ys.push(hits[0].y, hits[1].y, null, hits[2].y, hits[3].y, null);
+          zs.push(zFloor, zFloor, null, zFloor, zFloor, null);
+        }
+      }
     }
-    ctx.strokeStyle = "rgba(13, 66, 83, 0.26)";
-    ctx.lineWidth = 1;
-    ctx.stroke();
   }
 
-  drawAxes3D(caseKey, min, max);
-  drawHeatLegend(min, max);
+  return { x: xs, y: ys, z: zs };
 }
 
-function drawAxes3D(caseKey, minCost, maxCost) {
-  const meta = caseMeta[caseKey];
+function buildHover(meta, point) {
+  return [
+    `Iteration: ${point.step}`,
+    `${meta.p1Name}: ${point.p1.toFixed(4)}`,
+    `${meta.p2Name}: ${point.p2.toFixed(4)}`,
+    `BCE cost: ${point.cost.toFixed(4)}`,
+  ].join("<br>");
+}
 
-  const o = project3D(-4.3, -4.3, 0);
-  const xA = project3D(4.4, -4.3, 0);
-  const yA = project3D(-4.3, 4.4, 0);
-  const zA = project3D(-4.3, -4.3, 3.4);
+function getFitSize() {
+  const host = plotWrap.parentElement;
+  const hostW = host ? host.clientWidth : window.innerWidth;
+  const maxW = Math.max(320, Math.min(1000, hostW - 4));
 
-  ctx.strokeStyle = "#13323d";
-  ctx.lineWidth = 1.4;
+  if (window.innerWidth < 680) return { width: maxW, height: 390 };
+  if (window.innerWidth < 1024) return { width: Math.min(maxW, 920), height: 560 };
+  return { width: Math.min(maxW, 980), height: 640 };
+}
 
-  ctx.beginPath();
-  ctx.moveTo(o.sx, o.sy);
-  ctx.lineTo(xA.sx, xA.sy);
-  ctx.stroke();
+function setPlotSize(rawW, rawH, forceResize = false) {
+  const host = plotWrap.parentElement;
+  const hostMaxW = host ? host.clientWidth - 4 : rawW;
+  const inFullscreen = document.fullscreenElement === plotWrap;
 
-  ctx.beginPath();
-  ctx.moveTo(o.sx, o.sy);
-  ctx.lineTo(yA.sx, yA.sy);
-  ctx.stroke();
+  const minW = 320;
+  const minH = 300;
+  const maxW = inFullscreen ? Math.min(1800, window.innerWidth - 24) : Math.max(minW, hostMaxW);
+  const maxH = inFullscreen ? Math.min(1200, window.innerHeight - 24) : Math.min(900, window.innerHeight - 140);
 
-  ctx.beginPath();
-  ctx.moveTo(o.sx, o.sy);
-  ctx.lineTo(zA.sx, zA.sy);
-  ctx.stroke();
+  const w = Math.round(Math.max(minW, Math.min(maxW, rawW)));
+  const h = Math.round(Math.max(minH, Math.min(maxH, rawH)));
 
-  ctx.fillStyle = "#13323d";
-  ctx.font = "12px 'Avenir Next', sans-serif";
-  ctx.fillText(meta.p1Name, xA.sx + 6, xA.sy + 2);
-  ctx.fillText(meta.p2Name, yA.sx + 6, yA.sy + 2);
-  ctx.fillText("J", zA.sx + 6, zA.sy + 2);
+  if (forceResize || plotWrap.clientWidth !== w || plotWrap.clientHeight !== h) {
+    plotWrap.style.width = `${w}px`;
+    plotWrap.style.height = `${h}px`;
+    resizePlot();
+  }
+}
 
-  ctx.fillText(`J min=${minCost.toFixed(3)}`, 18, 24);
-  ctx.fillText(`J max=${maxCost.toFixed(3)}`, 18, 42);
+function fitPlotSize(forceResize = false) {
+  const size = getFitSize();
+  setPlotSize(size.width, size.height, forceResize);
 }
 
-function drawHeatLegend(minCost, maxCost) {
-  const x = canvas.width - 54;
-  const y = 80;
-  const w = 18;
-  const h = 180;
+function resizePlot() {
+  if (!state.plotReady || !hasPlotly()) return;
+  requestAnimationFrame(() => window.Plotly.Plots.resize(plotEl));
+}
 
-  for (let i = 0; i < h; i += 1) {
-    const t = 1 - i / h;
-    ctx.strokeStyle = colorScale(t);
-    ctx.beginPath();
-    ctx.moveTo(x, y + i);
-    ctx.lineTo(x + w, y + i);
-    ctx.stroke();
+function toggleFullscreen() {
+  if (document.fullscreenElement === plotWrap) {
+    document.exitFullscreen();
+    return;
   }
+  if (plotWrap.requestFullscreen) plotWrap.requestFullscreen();
+}
 
-  ctx.strokeStyle = "#14343f";
-  ctx.strokeRect(x, y, w, h);
+function updateStepSlider() {
+  const max = Math.max(0, state.trajectory.length - 1);
+  controls.stepSlider.max = String(max);
+  controls.stepSlider.value = String(Math.min(state.stepIndex, max));
+  labels.stepLabel.textContent = `${Math.min(state.stepIndex, max)} / ${max}`;
+}
 
-  ctx.fillStyle = "#14343f";
-  ctx.font = "11px 'Avenir Next', sans-serif";
-  ctx.fillText("Cost", x - 4, y - 8);
-  ctx.fillText(maxCost.toFixed(2), x - 8, y - 6);
-  ctx.fillText(minCost.toFixed(2), x - 6, y + h + 16);
+function updateModelDefinition(caseKey) {
+  const meta = caseMeta[caseKey];
+  modelDefinition.innerHTML = `
+    <p><strong>Model:</strong> ${meta.model}</p>
+    <p>${meta.explain[0]}</p>
+    <p>${meta.explain[1]}</p>
+    ${meta.explain[2] ? `<p>${meta.explain[2]}</p>` : ""}
+  `;
 }
 
-function drawTrajectory3D(caseKey) {
-  if (trajectory.length === 0) return;
+function updateSummary(caseKey) {
+  const meta = caseMeta[caseKey];
 
-  const grid = getGrid(caseKey);
-  const current = Math.min(stepIndex, trajectory.length - 1);
-
-  ctx.strokeStyle = "#d8534f";
-  ctx.lineWidth = 2.6;
-  ctx.beginPath();
-
-  for (let i = 0; i <= current; i += 1) {
-    const node = trajectory[i];
-    const p = project3D(
-      mapParam(node.p1),
-      mapParam(node.p2),
-      mapCost(node.cost, grid.min, grid.max)
-    );
-    if (i === 0) ctx.moveTo(p.sx, p.sy);
-    else ctx.lineTo(p.sx, p.sy);
-  }
-  ctx.stroke();
-
-  for (let i = 0; i <= current; i += 1) {
-    const node = trajectory[i];
-    const p = project3D(
-      mapParam(node.p1),
-      mapParam(node.p2),
-      mapCost(node.cost, grid.min, grid.max)
-    );
-    const isNow = i === current;
-    ctx.fillStyle = isNow ? "#102a32" : "#d8534f";
-    ctx.beginPath();
-    ctx.arc(p.sx, p.sy, isNow ? 5.4 : 3.2, 0, Math.PI * 2);
-    ctx.fill();
+  if (state.trajectory.length === 0) {
+    landscapeSummary.innerHTML = `
+      <span class="landscape-pill">Start BCE: --</span>
+      <span class="landscape-pill">Current BCE: --</span>
+      <span class="landscape-pill">Final BCE: --</span>
+      <span class="landscape-pill">Reduction: --</span>
+      <span class="landscape-pill">Iterations: 0 / 0</span>
+    `;
+    return;
   }
 
-  const node = trajectory[current];
-  const p = project3D(mapParam(node.p1), mapParam(node.p2), mapCost(node.cost, grid.min, grid.max));
-  ctx.fillStyle = "#102a32";
-  ctx.font = "12px 'Avenir Next', sans-serif";
-  ctx.fillText(`step ${current}`, p.sx + 8, p.sy - 8);
+  const idx = Math.min(state.stepIndex, state.trajectory.length - 1);
+  const start = state.trajectory[0];
+  const current = state.trajectory[idx];
+  const final = state.trajectory[state.trajectory.length - 1];
+  const reduction = ((start.cost - final.cost) / Math.max(1e-9, start.cost)) * 100;
+
+  landscapeSummary.innerHTML = `
+    <span class="landscape-pill">Start BCE: ${start.cost.toFixed(4)}</span>
+    <span class="landscape-pill">Current BCE: ${current.cost.toFixed(4)}</span>
+    <span class="landscape-pill">Final BCE: ${final.cost.toFixed(4)}</span>
+    <span class="landscape-pill">Reduction: ${reduction.toFixed(1)}%</span>
+    <span class="landscape-pill">Iterations: ${idx} / ${state.trajectory.length - 1}</span>
+    <span class="landscape-pill">${meta.p1Name}: ${current.p1.toFixed(3)}, ${meta.p2Name}: ${current.p2.toFixed(3)}</span>
+  `;
+}
+
+function updateInfoChips(caseKey, grid) {
+  const meta = caseMeta[caseKey];
+
+  if (grid.clipMax < grid.max - 1e-9) {
+    clipInfo.textContent = `Surface clipping (visual only): J <= ${formatCost(grid.clipMax)} (true max ${formatCost(grid.max)})`;
+  } else {
+    clipInfo.textContent = "Surface clipping: none";
+  }
+
+  minimumInfo.textContent = `Lowest shown point: ${meta.p1Name}=${grid.minPoint.p1.toFixed(3)}, ${meta.p2Name}=${grid.minPoint.p2.toFixed(3)}, J=${grid.minPoint.cost.toFixed(4)}`;
+
+  if (state.unstableWarning) {
+    stabilityWarning.textContent = state.unstableWarning;
+    stabilityWarning.classList.add("warning");
+  } else {
+    stabilityWarning.textContent = "Stability: normal";
+    stabilityWarning.classList.remove("warning");
+  }
 }
 
 function renderStats(caseKey) {
   const meta = caseMeta[caseKey];
-  const dataCount = datasets[caseKey].length;
+  const m = state.datasets[caseKey].length;
 
-  if (trajectory.length === 0) {
+  if (state.trajectory.length === 0) {
     stats.innerHTML = `
       <span>Model case: ${meta.p1Name}, ${meta.p2Name}</span>
-      <span>Synthetic samples: ${dataCount}</span>
+      <span>Samples: ${m}</span>
       <span>No trajectory yet. Click Run Gradient Descent.</span>
-      <span>Use Next Step or Automatic Run to show the path.</span>
+      <span>Current step: 0</span>
+      <span>${meta.p1Label}: --</span>
+      <span>${meta.p2Label}: --</span>
     `;
     return;
   }
 
-  const idx = Math.min(stepIndex, trajectory.length - 1);
-  const curr = trajectory[idx];
-  const start = trajectory[0];
-  const last = trajectory[trajectory.length - 1];
+  const idx = Math.min(state.stepIndex, state.trajectory.length - 1);
+  const current = state.trajectory[idx];
 
   stats.innerHTML = `
     <span>Model case: ${meta.p1Name}, ${meta.p2Name}</span>
-    <span>Synthetic samples: ${dataCount}</span>
-    <span>Current step: ${idx} / ${trajectory.length - 1}</span>
-    <span>Current params: ${meta.p1Name}=${curr.p1.toFixed(3)}, ${meta.p2Name}=${curr.p2.toFixed(3)}</span>
-    <span>Current cost J: ${curr.cost.toFixed(5)}</span>
-    <span>Start J: ${start.cost.toFixed(5)} -> Final J: ${last.cost.toFixed(5)}</span>
+    <span>Samples: ${m}</span>
+    <span>Current step: ${idx}</span>
+    <span>BCE: ${current.cost.toFixed(4)}</span>
+    <span>${meta.p1Label}: ${current.p1.toFixed(4)}</span>
+    <span>${meta.p2Label}: ${current.p2.toFixed(4)}</span>
   `;
 }
 
+function renderLandscape(caseKey, grid) {
+  if (!hasPlotly()) {
+    showPlotFallback("Interactive 3D view unavailable (Plotly not loaded). Other page controls remain active.");
+    state.plotReady = false;
+    return;
+  }
+
+  const meta = caseMeta[caseKey];
+  const view = controls.landscapeView.value;
+  const idx = Math.min(state.stepIndex, Math.max(0, state.trajectory.length - 1));
+
+  const showSurface = controls.toggleSurface.checked;
+  const showContours = controls.toggleContours.checked;
+  const showTrajectory = controls.toggleTrajectory.checked;
+  const showCurrent = controls.toggleCurrent.checked;
+
+  const fullPath = state.trajectory;
+  const current = fullPath[idx];
+  const start = fullPath[0];
+  const final = fullPath[fullPath.length - 1];
+
+  const traces = [];
+
+  if (view === "contour2d") {
+    traces.push({
+      type: "contour",
+      x: grid.p1Values,
+      y: grid.p2Values,
+      z: grid.vals,
+      ncontours: 16,
+      contours: {
+        coloring: showSurface ? "heatmap" : "lines",
+      },
+      colorscale: "Viridis",
+      showscale: showSurface,
+      visible: showSurface || showContours,
+      colorbar: { title: "BCE", thickness: 14 },
+      hovertemplate: `${meta.p1Name}: %{x:.4f}<br>${meta.p2Name}: %{y:.4f}<br>BCE: %{z:.4f}<extra></extra>`,
+    });
+
+    if (showTrajectory && fullPath.length > 0) {
+      traces.push({
+        type: "scatter",
+        mode: "lines+markers",
+        x: fullPath.map((p) => p.p1),
+        y: fullPath.map((p) => p.p2),
+        customdata: fullPath.map((p) => p.step),
+        line: { color: "#d8534f", width: 3 },
+        marker: { size: 4, color: "#9a3412" },
+        text: fullPath.map((p) => buildHover(meta, p)),
+        hovertemplate: "%{text}<extra></extra>",
+      });
+
+      traces.push({
+        type: "scatter",
+        mode: "markers+text",
+        x: [start.p1],
+        y: [start.p2],
+        customdata: [start.step],
+        marker: { size: 10, color: "#0a8f7b", line: { color: "#102a32", width: 1 } },
+        text: ["Start"],
+        textposition: "top center",
+        hovertemplate: `${buildHover(meta, start)}<extra></extra>`,
+      });
+
+      traces.push({
+        type: "scatter",
+        mode: "markers+text",
+        x: [final.p1],
+        y: [final.p2],
+        customdata: [final.step],
+        marker: { size: 10, color: "#dd5e2f", line: { color: "#102a32", width: 1 } },
+        text: ["Current solution"],
+        textposition: "top center",
+        hovertemplate: `${buildHover(meta, final)}<extra></extra>`,
+      });
+    }
+
+    if (showCurrent && fullPath.length > 0) {
+      traces.push({
+        type: "scatter",
+        mode: "markers+text",
+        x: [current.p1],
+        y: [current.p2],
+        customdata: [current.step],
+        marker: { size: 10, color: "#111827", line: { color: "#f2b84b", width: 2 } },
+        text: [`Step ${idx}`],
+        textposition: "bottom center",
+        hovertemplate: `${buildHover(meta, current)}<extra></extra>`,
+      });
+    }
+
+    const layout2d = {
+      autosize: true,
+      margin: { l: 58, r: 16, t: 8, b: 50 },
+      xaxis: { title: meta.p1Label },
+      yaxis: { title: meta.p2Label },
+      showlegend: false,
+      uirevision: "logistic-contour",
+      paper_bgcolor: "#fff",
+      plot_bgcolor: "#fff",
+    };
+
+    const config2d = {
+      responsive: true,
+      displaylogo: false,
+      scrollZoom: true,
+      modeBarButtonsToRemove: ["lasso2d", "select2d"],
+    };
+
+    const p2d = state.plotReady
+      ? window.Plotly.react(plotEl, traces, layout2d, config2d)
+      : window.Plotly.newPlot(plotEl, traces, layout2d, config2d);
+
+    p2d.then(() => {
+      if (!state.plotReady) {
+        state.plotReady = true;
+        bindPlotClick();
+      }
+      resizePlot();
+    });
+    return;
+  }
+
+  const clippedSurface = grid.vals.map((row) => row.map((v) => Math.min(v, grid.clipMax)));
+
+  traces.push({
+    type: "surface",
+    x: grid.p1Values,
+    y: grid.p2Values,
+    z: clippedSurface,
+    opacity: 0.84,
+    colorscale: "Viridis",
+    showscale: showSurface,
+    visible: showSurface,
+    colorbar: { title: "BCE", thickness: 14 },
+    hovertemplate: `${meta.p1Name}: %{x:.4f}<br>${meta.p2Name}: %{y:.4f}<br>BCE: %{z:.4f}<extra></extra>`,
+  });
+
+  const contour3d = buildContourSegments3D(grid);
+  traces.push({
+    type: "scatter3d",
+    mode: "lines",
+    x: contour3d.x,
+    y: contour3d.y,
+    z: contour3d.z,
+    line: { color: "rgba(16,54,76,0.7)", width: 3 },
+    visible: showContours || view === "surface3dContours",
+    hoverinfo: "skip",
+  });
+
+  if (showTrajectory && fullPath.length > 0) {
+    traces.push({
+      type: "scatter3d",
+      mode: "lines+markers",
+      x: fullPath.map((p) => p.p1),
+      y: fullPath.map((p) => p.p2),
+      z: fullPath.map((p) => Math.min(p.cost, grid.clipMax)),
+      customdata: fullPath.map((p) => p.step),
+      line: { color: "#d8534f", width: 6 },
+      marker: { size: 4, color: "#9a3412" },
+      text: fullPath.map((p) => buildHover(meta, p)),
+      hovertemplate: "%{text}<extra></extra>",
+    });
+
+    traces.push({
+      type: "scatter3d",
+      mode: "markers+text",
+      x: [start.p1],
+      y: [start.p2],
+      z: [Math.min(start.cost, grid.clipMax)],
+      customdata: [start.step],
+      marker: { size: 10, color: "#0a8f7b", line: { color: "#102a32", width: 1 } },
+      text: ["Start"],
+      textposition: "top center",
+      hovertemplate: `${buildHover(meta, start)}<extra></extra>`,
+    });
+
+    traces.push({
+      type: "scatter3d",
+      mode: "markers+text",
+      x: [final.p1],
+      y: [final.p2],
+      z: [Math.min(final.cost, grid.clipMax)],
+      customdata: [final.step],
+      marker: { size: 10, color: "#dd5e2f", line: { color: "#102a32", width: 1 } },
+      text: ["Current solution"],
+      textposition: "top center",
+      hovertemplate: `${buildHover(meta, final)}<extra></extra>`,
+    });
+  }
+
+  if (showCurrent && fullPath.length > 0) {
+    traces.push({
+      type: "scatter3d",
+      mode: "markers+text",
+      x: [current.p1],
+      y: [current.p2],
+      z: [Math.min(current.cost, grid.clipMax)],
+      customdata: [current.step],
+      marker: { size: 9, color: "#111827", line: { color: "#f2b84b", width: 2 } },
+      text: [`Step ${idx}`],
+      textposition: "bottom center",
+      hovertemplate: `${buildHover(meta, current)}<extra></extra>`,
+    });
+  }
+
+  const layout3d = {
+    autosize: true,
+    margin: { l: 0, r: 0, t: 8, b: 0 },
+    scene: {
+      xaxis: { title: meta.p1Label, range: [grid.p1Min, grid.p1Max], showspikes: false },
+      yaxis: { title: meta.p2Label, range: [grid.p2Min, grid.p2Max], showspikes: false },
+      zaxis: { title: "Binary Cross-Entropy J(theta)", range: [grid.min, grid.clipMax], showspikes: false },
+      aspectmode: "manual",
+      aspectratio: { x: 1.14, y: 1.12, z: 0.82 },
+      camera: state.camera3d || cloneCamera(DEFAULT_CAMERA),
+      dragmode: "turntable",
+    },
+    showlegend: false,
+    uirevision: "logistic-3d",
+    paper_bgcolor: "#fff",
+  };
+
+  const config3d = {
+    responsive: true,
+    displaylogo: false,
+    scrollZoom: true,
+    doubleClick: "reset",
+    modeBarButtonsToRemove: ["lasso2d", "select2d"],
+  };
+
+  const p3d = state.plotReady
+    ? window.Plotly.react(plotEl, traces, layout3d, config3d)
+    : window.Plotly.newPlot(plotEl, traces, layout3d, config3d);
+
+  p3d.then(() => {
+    if (!state.plotReady) {
+      state.plotReady = true;
+      bindPlotClick();
+      plotEl.on("plotly_relayout", (ev) => {
+        if (ev && ev["scene.camera"]) {
+          state.camera3d = cloneCamera(ev["scene.camera"]);
+        }
+      });
+    }
+    resizePlot();
+  });
+}
+
+function bindPlotClick() {
+  if (!plotEl || !plotEl.on) return;
+
+  plotEl.on("plotly_click", (ev) => {
+    if (!ev || !ev.points || ev.points.length === 0) return;
+    const pt = ev.points[0];
+    const raw = pt.customdata;
+
+    let step = null;
+    if (typeof raw === "number") step = raw;
+    if (Array.isArray(raw) && typeof raw[0] === "number") step = raw[0];
+
+    if (Number.isInteger(step) && step >= 0 && step < state.trajectory.length) {
+      state.stepIndex = step;
+      render();
+    }
+  });
+}
+
+function drawClassifier(caseKey) {
+  const parent = classifierCanvas.parentElement;
+  const width = Math.max(320, Math.floor(parent.clientWidth - 2));
+  const height = 310;
+  if (classifierCanvas.width !== width || classifierCanvas.height !== height) {
+    classifierCanvas.width = width;
+    classifierCanvas.height = height;
+  }
+
+  const ctx = classifierCtx;
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = "#fff";
+  ctx.fillRect(0, 0, width, height);
+
+  const pad = 42;
+
+  if (state.trajectory.length === 0) {
+    ctx.fillStyle = "#2a3d46";
+    ctx.font = "14px 'Avenir Next', sans-serif";
+    ctx.fillText("Run Gradient Descent to view classifier changes by iteration.", 22, 42);
+    return;
+  }
+
+  const idx = Math.min(state.stepIndex, state.trajectory.length - 1);
+  const step = state.trajectory[idx];
+  const data = state.datasets[caseKey];
+
+  if (caseKey === "case1") {
+    const xs = data.map((d) => d.x);
+    const xMin = Math.min(...xs) - 0.6;
+    const xMax = Math.max(...xs) + 0.6;
+
+    const toX = (x) => pad + ((x - xMin) / (xMax - xMin || 1)) * (width - 2 * pad);
+    const toY = (p) => height - pad - p * (height - 2 * pad);
+
+    ctx.strokeStyle = "#7b8f98";
+    ctx.lineWidth = 1.1;
+    ctx.beginPath();
+    ctx.moveTo(pad, height - pad);
+    ctx.lineTo(width - pad, height - pad);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(pad, height - pad);
+    ctx.lineTo(pad, pad);
+    ctx.stroke();
+
+    ctx.setLineDash([5, 4]);
+    ctx.strokeStyle = "#8aa0ad";
+    ctx.beginPath();
+    ctx.moveTo(pad, toY(0.5));
+    ctx.lineTo(width - pad, toY(0.5));
+    ctx.stroke();
+    ctx.setLineDash([]);
+
+    ctx.fillStyle = "#0a8f7b";
+    for (const row of data) {
+      const yJ = row.y === 1 ? 0.93 : 0.07;
+      ctx.beginPath();
+      ctx.arc(toX(row.x), toY(yJ), 3.4, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    ctx.strokeStyle = "#d8534f";
+    ctx.lineWidth = 2.6;
+    ctx.beginPath();
+    for (let i = 0; i <= 120; i += 1) {
+      const x = xMin + (i / 120) * (xMax - xMin);
+      const p = sigmoid(step.p1 + step.p2 * x);
+      const sx = toX(x);
+      const sy = toY(p);
+      if (i === 0) ctx.moveTo(sx, sy);
+      else ctx.lineTo(sx, sy);
+    }
+    ctx.stroke();
+
+    if (Math.abs(step.p2) > 1e-9) {
+      const xb = -step.p1 / step.p2;
+      if (xb >= xMin && xb <= xMax) {
+        ctx.setLineDash([4, 4]);
+        ctx.strokeStyle = "#111827";
+        ctx.beginPath();
+        ctx.moveTo(toX(xb), pad);
+        ctx.lineTo(toX(xb), height - pad);
+        ctx.stroke();
+        ctx.setLineDash([]);
+      }
+    }
+
+    ctx.fillStyle = "#334b56";
+    ctx.font = "13px 'Avenir Next', sans-serif";
+    ctx.fillText("x", width - pad - 10, height - pad + 20);
+    ctx.fillText("Probability", pad - 28, pad - 10);
+  } else {
+    const x1s = data.map((d) => d.x1);
+    const x2s = data.map((d) => d.x2);
+    const x1Min = Math.min(...x1s) - 0.7;
+    const x1Max = Math.max(...x1s) + 0.7;
+    const x2Min = Math.min(...x2s) - 0.7;
+    const x2Max = Math.max(...x2s) + 0.7;
+
+    const toX = (x) => pad + ((x - x1Min) / (x1Max - x1Min || 1)) * (width - 2 * pad);
+    const toY = (y) => height - pad - ((y - x2Min) / (x2Max - x2Min || 1)) * (height - 2 * pad);
+
+    ctx.strokeStyle = "#7b8f98";
+    ctx.lineWidth = 1.1;
+    ctx.beginPath();
+    ctx.moveTo(pad, height - pad);
+    ctx.lineTo(width - pad, height - pad);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(pad, height - pad);
+    ctx.lineTo(pad, pad);
+    ctx.stroke();
+
+    for (const row of data) {
+      ctx.fillStyle = row.y === 1 ? "#0a8f7b" : "#d8534f";
+      ctx.beginPath();
+      ctx.arc(toX(row.x1), toY(row.x2), 3.2, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    ctx.strokeStyle = "#111827";
+    ctx.lineWidth = 2.4;
+
+    if (Math.abs(step.p2) > 1e-9) {
+      const xa = x1Min;
+      const xb = x1Max;
+      const ya = -(step.p1 / step.p2) * xa;
+      const yb = -(step.p1 / step.p2) * xb;
+      ctx.beginPath();
+      ctx.moveTo(toX(xa), toY(ya));
+      ctx.lineTo(toX(xb), toY(yb));
+      ctx.stroke();
+    } else {
+      ctx.beginPath();
+      ctx.moveTo(toX(0), pad);
+      ctx.lineTo(toX(0), height - pad);
+      ctx.stroke();
+    }
+
+    ctx.fillStyle = "#334b56";
+    ctx.font = "13px 'Avenir Next', sans-serif";
+    ctx.fillText("x1", width - pad - 12, height - pad + 20);
+    ctx.fillText("x2", pad - 22, pad - 10);
+  }
+}
+
 function render() {
   const caseKey = controls.caseSelect.value;
+  const meta = caseMeta[caseKey];
 
-  labels.formula.textContent = caseMeta[caseKey].logistic;
+  labels.formula.textContent = meta.formula;
   labels.lr.textContent = Number(controls.lr.value).toFixed(3);
   labels.iters.textContent = controls.iters.value;
   labels.p1.textContent = Number(controls.p1.value).toFixed(2);
   labels.p2.textContent = Number(controls.p2.value).toFixed(2);
   labels.speed.textContent = controls.speed.value;
 
-  drawSurface(caseKey);
-  drawTrajectory3D(caseKey);
+  updateModelDefinition(caseKey);
+  updateStepSlider();
+
+  const grid = getGrid(caseKey);
+  updateInfoChips(caseKey, grid);
+  updateSummary(caseKey);
+  renderLandscape(caseKey, grid);
   renderStats(caseKey);
+  drawClassifier(caseKey);
 }
 
 function stopAnimation() {
-  if (animationTimer) {
-    clearInterval(animationTimer);
-    animationTimer = null;
+  if (!state.timer) {
     controls.autoBtn.textContent = "Automatic Run";
+    return;
   }
+
+  clearInterval(state.timer);
+  state.timer = null;
+  controls.autoBtn.textContent = "Automatic Run";
 }
 
 function runTrajectory() {
@@ -474,70 +1070,63 @@ function runTrajectory() {
   const lr = Number(controls.lr.value);
   const iters = Number(controls.iters.value);
 
-  trajectory = buildTrajectory(caseKey, start, lr, iters);
-  stepIndex = 0;
+  const { path, unstable } = buildTrajectory(caseKey, start, lr, iters);
+  state.trajectory = path;
+  state.stepIndex = 0;
+  state.unstableWarning = unstable
+    ? "The learning rate may be too large; gradient descent became unstable."
+    : "";
+
+  state.gridCache[caseKey] = null;
   render();
 }
 
 function nextStep() {
-  if (trajectory.length === 0) {
+  if (state.trajectory.length === 0) {
     runTrajectory();
     return;
   }
-  if (stepIndex < trajectory.length - 1) {
-    stepIndex += 1;
+
+  if (state.stepIndex < state.trajectory.length - 1) {
+    state.stepIndex += 1;
     render();
   }
 }
 
-function automaticRun() {
-  if (animationTimer) {
+function autoRun() {
+  if (state.timer) {
     stopAnimation();
     return;
   }
 
-  if (trajectory.length === 0) {
-    runTrajectory();
-  }
+  if (state.trajectory.length === 0) runTrajectory();
 
   controls.autoBtn.textContent = "Stop Auto";
-
-  animationTimer = setInterval(() => {
-    if (stepIndex >= trajectory.length - 1) {
+  state.timer = setInterval(() => {
+    if (state.stepIndex >= state.trajectory.length - 1) {
       stopAnimation();
       return;
     }
-    stepIndex += 1;
+
+    state.stepIndex += 1;
     render();
   }, Number(controls.speed.value));
 }
 
 function restartPath() {
   stopAnimation();
-  if (trajectory.length > 0) {
-    stepIndex = 0;
+  if (state.trajectory.length > 0) {
+    state.stepIndex = 0;
   }
   render();
 }
 
 function clearPath() {
   stopAnimation();
-  trajectory = [];
-  stepIndex = 0;
-  render();
-}
-
-function syncLrFromSlider() {
-  controls.lrInput.value = Number(controls.lr.value).toFixed(3);
-  render();
-}
-
-function syncLrFromInput() {
-  let v = Number(controls.lrInput.value);
-  if (!Number.isFinite(v)) v = 0.2;
-  v = Math.max(0.001, Math.min(1.0, v));
-  controls.lr.value = v;
-  controls.lrInput.value = v.toFixed(3);
+  state.trajectory = [];
+  state.stepIndex = 0;
+  state.unstableWarning = "";
+  state.gridCache = { case1: null, case2: null };
   render();
 }
 
@@ -545,37 +1134,120 @@ function applyCaseDefaults(caseKey) {
   if (caseKey === "case1") {
     controls.p1.value = -4.0;
     controls.p2.value = 4.0;
-    controls.lr.value = 0.20;
+    controls.lr.value = 0.1;
   } else {
     controls.p1.value = -2.2;
     controls.p2.value = -2.0;
-    controls.lr.value = 0.14;
+    controls.lr.value = 0.1;
   }
+
   controls.lrInput.value = Number(controls.lr.value).toFixed(3);
   controls.iters.value = 80;
   controls.speed.value = 90;
+
   clearPath();
 }
 
-for (const el of [controls.iters, controls.p1, controls.p2, controls.speed]) {
-  el.addEventListener("input", render);
+function resetView() {
+  if (!hasPlotly() || !state.plotReady) return;
+
+  if (controls.landscapeView.value === "contour2d") {
+    window.Plotly.relayout(plotEl, {
+      "xaxis.autorange": true,
+      "yaxis.autorange": true,
+    });
+    return;
+  }
+
+  state.camera3d = cloneCamera(DEFAULT_CAMERA);
+  window.Plotly.relayout(plotEl, { "scene.camera": state.camera3d });
 }
 
-controls.lr.addEventListener("input", syncLrFromSlider);
-controls.lrInput.addEventListener("change", syncLrFromInput);
-controls.caseSelect.addEventListener("change", () => {
-  applyCaseDefaults(controls.caseSelect.value);
-});
+function bindEvents() {
+  controls.lr.addEventListener("input", () => {
+    controls.lrInput.value = Number(controls.lr.value).toFixed(3);
+    render();
+  });
+
+  controls.lrInput.addEventListener("change", () => {
+    let v = Number(controls.lrInput.value);
+    if (!Number.isFinite(v)) v = 0.1;
+    v = Math.max(0.001, Math.min(10.0, v));
+    controls.lr.value = v;
+    controls.lrInput.value = v.toFixed(3);
+    render();
+  });
+
+  for (const el of [controls.iters, controls.p1, controls.p2, controls.speed]) {
+    el.addEventListener("input", render);
+  }
 
-controls.runBtn.addEventListener("click", runTrajectory);
-controls.stepBtn.addEventListener("click", nextStep);
-controls.autoBtn.addEventListener("click", automaticRun);
-controls.restartBtn.addEventListener("click", restartPath);
-controls.regenBtn.addEventListener("click", () => {
+  controls.caseSelect.addEventListener("change", () => {
+    applyCaseDefaults(controls.caseSelect.value);
+  });
+
+  controls.runBtn.addEventListener("click", runTrajectory);
+  controls.stepBtn.addEventListener("click", nextStep);
+  controls.autoBtn.addEventListener("click", autoRun);
+  controls.restartBtn.addEventListener("click", restartPath);
+  controls.clearBtn.addEventListener("click", clearPath);
+
+  controls.regenBtn.addEventListener("click", () => {
+    generateSyntheticData();
+    clearPath();
+  });
+
+  controls.landscapeView.addEventListener("change", render);
+  controls.toggleSurface.addEventListener("change", render);
+  controls.toggleContours.addEventListener("change", render);
+  controls.toggleTrajectory.addEventListener("change", render);
+  controls.toggleCurrent.addEventListener("change", render);
+
+  controls.stepSlider.addEventListener("input", () => {
+    const next = Number(controls.stepSlider.value);
+    if (!Number.isFinite(next)) return;
+    state.stepIndex = Math.max(0, Math.min(next, Math.max(0, state.trajectory.length - 1)));
+    render();
+  });
+
+  controls.resetViewBtn.addEventListener("click", resetView);
+  controls.plotFitBtn.addEventListener("click", () => fitPlotSize(true));
+  controls.plotLargerBtn.addEventListener("click", () => setPlotSize(plotWrap.clientWidth * 1.14, plotWrap.clientHeight * 1.14, true));
+  controls.plotSmallerBtn.addEventListener("click", () => setPlotSize(plotWrap.clientWidth / 1.14, plotWrap.clientHeight / 1.14, true));
+  controls.plotFullscreenBtn.addEventListener("click", toggleFullscreen);
+
+  document.addEventListener("fullscreenchange", () => {
+    controls.plotFullscreenBtn.textContent = document.fullscreenElement === plotWrap ? "Exit Fullscreen" : "Fullscreen";
+    resizePlot();
+  });
+
+  window.addEventListener("resize", () => {
+    if (document.fullscreenElement !== plotWrap) {
+      setPlotSize(plotWrap.clientWidth, plotWrap.clientHeight, true);
+    }
+    drawClassifier(controls.caseSelect.value);
+    resizePlot();
+  });
+
+  if (window.ResizeObserver) {
+    state.resizeObserver = new window.ResizeObserver(() => {
+      resizePlot();
+      drawClassifier(controls.caseSelect.value);
+    });
+    state.resizeObserver.observe(plotWrap);
+    state.resizeObserver.observe(classifierCanvas.parentElement);
+  }
+}
+
+function init() {
+  fitPlotSize(true);
+  bindEvents();
   generateSyntheticData();
-  clearPath();
-});
-controls.clearBtn.addEventListener("click", clearPath);
+  applyCaseDefaults("case1");
+
+  if (!hasPlotly()) {
+    showPlotFallback("Interactive 3D view unavailable (Plotly script did not load).");
+  }
+}
 
-generateSyntheticData();
-applyCaseDefaults("case1");
+init();

logistic-regression/styles.css

@@ -156,14 +156,138 @@ select {
   margin: 0;
 }
 
-.chart-panel canvas {
-  width: 100%;
-  height: auto;
+.model-definition {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 0.7rem 0.8rem;
+  background: #fcfeff;
+  font-size: 0.9rem;
+  color: #23343b;
+}
+
+.model-definition p {
+  margin: 0.18rem 0;
+}
+
+.landscape-summary {
+  margin: 0.7rem 0 0.8rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  gap: 0.5rem;
+}
+
+.landscape-pill {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.42rem 0.55rem;
+  background: #fcfeff;
+  font-size: 0.88rem;
+}
+
+.landscape-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.7rem;
+}
+
+.landscape-controls label {
+  min-width: 0;
+  margin: 0;
+  width: auto;
+  font-weight: 700;
+}
+
+.landscape-controls select {
+  min-width: 220px;
+  width: auto;
+}
+
+.viz-btn {
+  border: 1px solid var(--line);
+  background: #fff;
+  color: var(--ink);
+  border-radius: 9px;
+  padding: 0.45rem 0.7rem;
+  font-weight: 600;
+  width: auto;
+}
+
+.viz-btn:hover {
+  border-color: var(--accent);
+}
+
+.landscape-controls.toggles {
+  margin-bottom: 0.8rem;
+}
+
+.viz-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: #fff;
+  padding: 0.36rem 0.62rem;
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+
+.viz-toggle input {
+  margin: 0;
+}
+
+.landscape-plot-wrap {
+  width: min(100%, 980px);
+  height: 620px;
+  min-width: 320px;
+  min-height: 320px;
+  max-width: 1400px;
+  max-height: 900px;
+  resize: both;
+  overflow: auto;
   border: 1px solid var(--line);
   border-radius: 10px;
   background: #fff;
 }
 
+.landscape-plot {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+}
+
+.plot-fallback {
+  height: 100%;
+  min-height: 240px;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  color: #2a3c45;
+  padding: 1rem;
+  font-size: 0.92rem;
+}
+
+.viz-info-row {
+  margin: 0.6rem 0 0.8rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 0.55rem;
+}
+
+.viz-chip {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.45rem 0.6rem;
+  background: #fcfeff;
+  font-size: 0.88rem;
+}
+
+.viz-chip.warning {
+  border-color: #f2b84b;
+}
+
 .stats {
   margin-top: 0.8rem;
   display: grid;
@@ -186,6 +310,58 @@ select {
   font-size: 0.9rem;
 }
 
+.slice-label {
+  margin: 0.65rem 0 0;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.iteration-block {
+  margin-top: 0.9rem;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.iteration-block label {
+  margin: 0;
+  min-width: 0;
+  font-size: 0.9rem;
+}
+
+.iteration-block input[type="range"] {
+  width: 100%;
+  accent-color: var(--accent);
+}
+
+.iteration-block span {
+  font-size: 0.86rem;
+  color: #324b55;
+  font-weight: 600;
+}
+
+.classifier-panel {
+  margin-top: 0.9rem;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 0.65rem;
+  background: #fff;
+}
+
+.classifier-panel h3 {
+  margin: 0 0 0.5rem;
+  font-size: 0.98rem;
+}
+
+#classifierCanvas {
+  width: 100%;
+  height: auto;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: #fff;
+}
+
 .page-copy {
   max-width: 760px;
   margin: 1.2rem auto;
@@ -196,6 +372,12 @@ select {
   .layout {
     grid-template-columns: 1fr;
   }
+
+  .landscape-plot-wrap {
+    width: 100%;
+    height: 420px;
+    min-height: 280px;
+  }
 }
 
 .home-page {