Kalman Filter Playground

The local level model, live

The simplest state space model: a random-walk level \alpha_t observed with noise, y_t = \alpha_t + \varepsilon_t. The Kalman filter sees only the gray dots and must infer the orange line. You control the two variances. Watch what the optimal filter does with them — and switch on the data outage to see how the filter handles the ragged edge: uncertainty fans out while data is missing, then snaps shut on the first new observation.

viewof sigmaEta = Inputs.range([0.05, 2], {
  value: 0.3, step: 0.05,
  label: "σ_η — state noise (how fast the world changes)"
})
viewof sigmaEps = Inputs.range([0.05, 2], {
  value: 0.8, step: 0.05,
  label: "σ_ε — measurement noise (how bad the data is)"
})
viewof seed = Inputs.range([1, 60], {
  value: 7, step: 1,
  label: "simulation seed"
})
viewof outage = Inputs.toggle({
  label: "data outage for t ∈ [90, 110) — the ragged edge",
  value: false
})

sim = {
  const N = 150;
  const rng = mulberry32((seed * 2654435761) >>> 0);
  const randn = gaussian(rng);
  const data = [];
  let alpha = 0;
  for (let t = 0; t < N; t++) {
    alpha += sigmaEta * randn();
    const hidden = outage && t >= 90 && t < 110;
    data.push({ t, alpha, y: hidden ? null : alpha + sigmaEps * randn() });
  }
  // Kalman filter for the local level model
  let a = 0, P = 25;
  for (const d of data) {
    const aPred = a, PPred = P + sigmaEta * sigmaEta;
    if (d.y != null) {
      const K = PPred / (PPred + sigmaEps * sigmaEps);
      a = aPred + K * (d.y - aPred);
      P = (1 - K) * PPred;
      d.K = K;
    } else {
      a = aPred;
      P = PPred;
      d.K = 0;
    }
    d.filtered = a;
    d.sd = Math.sqrt(P);
  }
  return data;
}

steady = {
  const q = (sigmaEta * sigmaEta) / (sigmaEps * sigmaEps);
  // π = P̄/σε² (steady-state *predicted* variance) solves π² − qπ − q = 0
  const pi = (q + Math.sqrt(q * q + 4 * q)) / 2;
  return { q, K: pi / (pi + 1) };
}

Plot.plot({
  width: 920,
  height: 420,
  style: { background: "transparent", fontFamily: "Archivo, system-ui, sans-serif" },
  color: {
    legend: true,
    domain: ["observations y", "true state α", "filtered estimate a"],
    range: ["#898781", "#eb6834", "#2a78d6"]
  },
  x: { label: "t", line: false },
  y: { label: null, grid: true },
  marks: [
    Plot.areaY(sim, {
      x: "t",
      y1: d => d.filtered - 1.96 * d.sd,
      y2: d => d.filtered + 1.96 * d.sd,
      fill: "#2a78d6", fillOpacity: 0.12
    }),
    Plot.dot(sim.filter(d => d.y != null).map(d => ({ t: d.t, value: d.y, series: "observations y" })),
      { x: "t", y: "value", stroke: "series", r: 2.5, strokeWidth: 1.25 }),
    Plot.line(sim.map(d => ({ t: d.t, value: d.alpha, series: "true state α" })),
      { x: "t", y: "value", stroke: "series", strokeWidth: 2, strokeDasharray: "5 4" }),
    Plot.line(sim.map(d => ({ t: d.t, value: d.filtered, series: "filtered estimate a" })),
      { x: "t", y: "value", stroke: "series", strokeWidth: 2 }),
    Plot.tip(sim, Plot.pointerX({
      x: "t", y: "filtered",
      title: d => [
        `t = ${d.t}`,
        d.y == null ? "y: (missing)" : `y = ${d.y.toFixed(2)}`,
        `truth α = ${d.alpha.toFixed(2)}`,
        `estimate a = ${d.filtered.toFixed(2)} ± ${(1.96 * d.sd).toFixed(2)}`
      ].join("\n")
    })),
    Plot.ruleY([0], { stroke: "#c3c2b7" })
  ]
})

The shaded band is the filter’s own 95% uncertainty about the state. It is not decoration — it is the honest answer to “how sure are you?”, and during the outage it is the entire output of the model.

The gain: how much attention each observation deserves

Plot.plot({
  width: 920,
  height: 220,
  style: { background: "transparent", fontFamily: "Archivo, system-ui, sans-serif" },
  x: { label: "t", line: false },
  y: { label: "Kalman gain Kₜ", domain: [0, 1], grid: true },
  marks: [
    Plot.ruleY([steady.K], { stroke: "#898781", strokeDasharray: "4 4" }),
    Plot.text([{ t: 148, K: steady.K }], {
      x: "t", y: "K", text: d => `steady state K̄ = ${d.K.toFixed(2)}`,
      dy: -8, textAnchor: "end", fill: "#52514e"
    }),
    Plot.line(sim, { x: "t", y: "K", stroke: "#2a78d6", strokeWidth: 2 }),
    Plot.tip(sim, Plot.pointerX({ x: "t", y: "K", title: d => `t = ${d.t}\nK = ${d.K.toFixed(3)}` }))
  ]
})

md`With your current settings the signal-to-noise ratio is
**q = σ²_η / σ²_ε = ${steady.q.toFixed(3)}**, so the steady-state gain is
**K̄ = ${steady.K.toFixed(3)}** — the filter permanently puts
${(steady.K * 100).toFixed(0)}% of its weight on each new observation and
${((1 - steady.K) * 100).toFixed(0)}% on its own model. During an outage the
gain is zero by construction: no data, no update.`

Things to try

1. Slide σ_ε up with σ_η low. The gain collapses toward zero — the filter nearly ignores each individual dot, and the blue line becomes very smooth. This is what “the data is noisy, trust the model” looks like, derived.
2. Slide σ_η up with σ_ε low. Gain near one: the filter chases the data, because yesterday’s level genuinely tells you little about today’s.
3. Turn on the outage. Watch the band fan out linearly in variance (that’s P_{t+1|t} = P_{t|t} + \sigma^2_\eta compounding), then collapse on the first observation after the gap — which receives a much larger gain than its neighbors. The filter knows it has been flying blind and treats the first new data point accordingly. That single frame is the entire ragged-edge logic of a production nowcasting system.
4. Change the seed. The qualitative story survives every draw — it’s a property of the filter, not of luck.

function mulberry32(a) {
  return function () {
    a |= 0; a = (a + 0x6D2B79F5) | 0;
    let t = Math.imul(a ^ (a >>> 15), 1 | a);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

function gaussian(rng) {
  let spare = null;
  return function () {
    if (spare !== null) { const v = spare; spare = null; return v; }
    let u = 0;
    while (u === 0) u = rng();
    const r = Math.sqrt(-2 * Math.log(u)), th = 2 * Math.PI * rng();
    spare = r * Math.sin(th);
    return r * Math.cos(th);
  };
}

The math behind this page is derived in the Session 1 notes.