Play with gradient descent

An explorable post: pick a step size and watch what happens.

This post demonstrates the kind of interactivity your site can have. The math is real LaTeX, and the figure below responds live to the sliders — no backend, no server, just a static page on GitHub Pages.

The setup

Gradient descent on a simple quadratic f(x) = \tfrac{a}{2}\,x^2 iterates

x_{t+1} \;=\; x_t - \eta \, \nabla f(x_t) \;=\; (1 - \eta a)\, x_t .

The behavior depends entirely on the product \eta a: convergence when 0 < \eta a < 2, oscillation as it approaches 2, and divergence beyond it. Don’t take my word for it — try it:

viewof eta = Inputs.range([0.01, 2.5], {value: 0.3, step: 0.01, label: "Step size η"})
viewof a = Inputs.range([0.5, 2], {value: 1, step: 0.1, label: "Curvature a"})
viewof x0 = Inputs.range([-4, 4], {value: 3, step: 0.1, label: "Starting point x₀"})

trajectory = {
  const T = 25;
  const pts = [];
  let x = x0;
  for (let t = 0; t <= T; t++) {
    pts.push({t: t, x: x, f: 0.5 * a * x * x});
    x = (1 - eta * a) * x;
    if (!isFinite(x) || Math.abs(x) > 1e6) break;
  }
  return pts;
}
curve = {
  const xs = [];
  const lim = Math.max(4.5, ...trajectory.map(d => Math.abs(d.x)));
  const L = Math.min(lim, 20);
  for (let x = -L; x <= L; x += L / 100) {
    xs.push({x: x, f: 0.5 * a * x * x});
  }
  return xs;
}
verdict = {
  const r = Math.abs(1 - eta * a);
  if (r < 1) return `η·a = ${(eta*a).toFixed(2)} < 2  →  converges (rate ${r.toFixed(2)} per step)`;
  if (r === 1) return `η·a = ${(eta*a).toFixed(2)}  →  oscillates forever`;
  return `η·a = ${(eta*a).toFixed(2)} > 2  →  diverges!`;
}

md`**${verdict}**`

Plot.plot({
  height: 340,
  marginLeft: 70,
  x: {label: "x"},
  y: {label: "f(x)"},
  marks: [
    Plot.line(curve, {x: "x", y: "f", stroke: "#c9cede"}),
    Plot.line(trajectory, {x: "x", y: "f", stroke: "#4a5fc1", strokeWidth: 1.5, strokeDasharray: "4 3"}),
    Plot.dot(trajectory, {x: "x", y: "f", fill: "#4a5fc1", r: 4}),
    Plot.dot(trajectory.slice(0, 1), {x: "x", y: "f", fill: "#e4572e", r: 6})
  ]
})

The orange dot is the starting point; blue dots are the iterates. Push \eta past 2/a and watch it blow up.

Why this matters for your site

Everything above — the sliders, the live plot, the reactive text — is written directly in the blog post’s source file in ~40 lines of Observable JS. Quarto compiles it to a static page. Visitors get the ncase.me feeling of playing with an idea, and you never touch a web framework.