Interactive interpretability dashboard for the XGBoost Telco churn model: headline holdout metrics, an interactive decision-cutoff slider, live confusion matrix + precision/recall/F1, probability distribution, ROC & PR curves, feature importance (mean|SHAP| / gain / weight / cover), a SHAP beeswarm, and a calibration/reliability plot. Reads telco_churn.ml.* (latest model run).

Machine Learning Interpretability Dashboard

Use a MotherDuck flight to pull the Telco Customer Churn dataset from IBM's public GitHub mirror into MotherDuck. Design it to be an incremental load that is idempotent (no duplication even if I re-run it). Use data engineering best practices including logging, retries with exponential backoff, and others that you decide are helpful (do some research!). Then use XGBoost to predict churn or not within that Flight (research XGBoost best practices and data science best practices including how to use train/validate/holdout splits and prevent target leakage). Then, create a MotherDuck Dive to help me interpret the machine learning model (research machine learning interpretability best practices) including but not limited to the ROC curve, confusion matrix, shapley values, feature importance plots, etc. I also want to be able to tune the cutoff point and see the impact on the metrics. Be sure to store the predictions and other metrics about the quality of the model in a MotherDuck database. Make the dive beautiful. Make sure that there is no chart junk (and use some color when it is helpful).

In the dive, remove: “XGBoost on the IBM Telco dataset. Metrics on the holdout split. Model 74dd9f6e · trained 2026-06-18 13:16 UTC · XGBoost 2.1.4 · SHAP & importances computed on the holdout.”
Also remove: Decision cutoff Move the cutoff to trade recall against precision. Everything below this control updates live.
Also remove: all the metrics in the first row 
Then, swap the position of the ROC curve and the "Predicted probability by actual outcome" charts.
Then, remove the legend of the confusion matrix
Put the "Accuracy" metric to the left of the metrics instead of to the far right. It should be the first one.

Put the numeric SHAP features back to using the red to blue scale from before. Change the circles to have transparent fill (no fill), but have a colored outline instead. Make the outline partially transparent as well.

Instead of the categorical values being grey in the SHAP plot, make each category its own color. Do not use red or blue though, since that would be confusing.

  Remove this from the description: Color = feature value (low → high).

  Put a description under the confusion matrix header: "Adjust cutoff to balance False Positives and False Negatives"

  Align the bottom of the confusion matrix, ROC curve, and SHAP plot so that they look approximately the same height. Make the confusion matrix into a square with 4 equally sized boxes in it (height = width for the boxes).

Put the confusion matrix, ROC curve, and the SHAP summary charts in the first row of charts. Confusion matrix should get 25% of the width, ROC curve should get 25%, then the SHAP should get 50%.

Alex Monahan

import { useState } from "react";
import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query";
import { RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, Legend, Tooltip, ResponsiveContainer } from "recharts";


export const REQUIRED_DATABASES = [
  { type: 'share', path: 'md:_share/my_db/d13e03e2-91a9-4cd9-a9a0-f44b1134da9a', alias: 'my_db' }
];

const N = (v) => (v != null ? Number(v) : 0);

const TEAM_A_COLOR = "#0777b3";
const TEAM_B_COLOR = "#bd4e35";

const TEAMS = [
  "Argentina", "Australia", "Belgium", "Brazil", "Cameroon", "Canada", "Costa Rica",
  "Croatia", "Denmark", "Ecuador", "England", "France", "Germany", "Ghana", "IR Iran",
  "Japan", "Korea Republic", "Mexico", "Morocco", "Netherlands", "Poland", "Portugal",
  "Qatar", "Saudi Arabia", "Senegal", "Serbia", "Spain", "Switzerland", "Tunisia",
  "United States", "Uruguay", "Wales",
];

// Tournament-wide min/max per metric (single-match values), used to normalize each axis to 0-100
const RANGES = {
  xg: { min: 0, max: 5 },
  sot: { min: 0, max: 13 },
  total_shots: { min: 0, max: 32 },
  corners: { min: 0, max: 14 },
  crosses: { min: 2, max: 46 },
  possession: { min: 23, max: 81 },
  pass_accuracy: { min: 55, max: 95 },
  touches: { min: 341, max: 1190 },
  long_balls: { min: 39, max: 106 },
  tackles: { min: 5, max: 33 },
  interceptions: { min: 2, max: 19 },
  aerials_won: { min: 5, max: 33 },
  clearances: { min: 3, max: 50 },
  saves: { min: 0, max: 10 },
  fouls: { min: 3, max: 30 },
  offsides: { min: 0, max: 10 },
};

function normalize(value, metric) {
  const { min, max } = RANGES[metric];
  if (max === min) return 50;
  const pct = ((value - min) / (max - min)) * 100;
  return Math.round(Math.max(0, Math.min(100, pct)));
}

const AXIS_LABELS = {
  xg: "xG",
  sot: "Shots on Target",
  total_shots: "Total Shots",
  corners: "Corners",
  crosses: "Crosses",
  possession: "Possession",
  pass_accuracy: "Pass Accuracy",
  touches: "Touches",
  long_balls: "Long Balls",
  tackles: "Tackles",
  interceptions: "Interceptions",
  aerials_won: "Aerials Won",
  clearances: "Clearances",
  saves: "Saves",
  fouls: "Fouls",
  offsides: "Offsides",
};

const OFFENSE_METRICS = ["xg", "sot", "total_shots", "corners", "crosses", "possession", "pass_accuracy", "touches", "long_balls"];
const DEFENSE_METRICS = ["tackles", "interceptions", "aerials_won", "clearances", "saves", "fouls", "offsides"];

export default function TeamDnaComparison() {
  const [showAbout, setShowAbout] = useState(false);
  const [teamA, setTeamA] = useDiveState("teamA", "Argentina");
  const [teamB, setTeamB] = useDiveState("teamB", "France");
  const [matchIdxA, setMatchIdxA] = useDiveState("matchIdxA", 0);
  const [matchIdxB, setMatchIdxB] = useDiveState("matchIdxB", 0);

  // Per-match stats for every team, ordered by match date within team
  const matchesQuery = useSQLQuery(`
    WITH team_matches AS (
      SELECT match, strftime(match_time, '%b %d') AS match_date, home_team AS team, away_team AS opponent,
             home_xg AS xg, home_sot AS sot, home_total_shots AS total_shots,
             home_corners AS corners, home_crosses AS crosses,
             home_possession AS possession,
             home_completed_passes AS comp_passes, home_attempted_pases AS att_passes,
             home_touches AS touches, home_long_balls AS long_balls,
             home_tackles AS tackles, home_interceptions AS interceptions,
             home_aerials_won AS aerials_won, home_clearances AS clearances,
             home_saves AS saves, home_fouls AS fouls, home_offsides AS offsides
      FROM "my_db"."main"."fifa_match_2022"
      UNION ALL
      SELECT match, strftime(match_time, '%b %d') AS match_date, away_team AS team, home_team AS opponent,
             away_xg AS xg, away_sot AS sot, away_total_shots AS total_shots,
             away_corners AS corners, away_crosses AS crosses,
             away_possession AS possession,
             away_completed_passes AS comp_passes, away_attempted_pases AS att_passes,
             away_touches AS touches, away_long_balls AS long_balls,
             away_tackles AS tackles, away_interceptions AS interceptions,
             away_aerials_won AS aerials_won, away_clearances AS clearances,
             away_saves AS saves, away_fouls AS fouls, away_offsides AS offsides
      FROM "my_db"."main"."fifa_match_2022"
    )
    SELECT team, match, match_date, opponent,
           xg, sot, total_shots, corners, crosses,
           possession, ROUND(100.0 * comp_passes / att_passes, 1) AS pass_accuracy,
           touches, long_balls,
           tackles, interceptions, aerials_won, clearances, saves, fouls, offsides
    FROM team_matches
    ORDER BY team, match
  `);

  const allRows = Array.isArray(matchesQuery.data) ? matchesQuery.data : [];

  const matchesByTeam = {};
  allRows.forEach((r) => {
    if (!matchesByTeam[r.team]) matchesByTeam[r.team] = [];
    matchesByTeam[r.team].push(r);
  });

  const matchesA = matchesByTeam[teamA] || [];
  const matchesB = matchesByTeam[teamB] || [];

  const safeIdxA = Math.min(N(matchIdxA), Math.max(0, matchesA.length - 1));
  const safeIdxB = Math.min(N(matchIdxB), Math.max(0, matchesB.length - 1));

  const matchA = matchesA[safeIdxA];
  const matchB = matchesB[safeIdxB];

  function buildRadarData(metricList) {
    return metricList.map((metric) => ({
      metric: AXIS_LABELS[metric],
      [teamA]: matchA ? normalize(N(matchA[metric]), metric) : 0,
      [teamB]: matchB ? normalize(N(matchB[metric]), metric) : 0,
    }));
  }

  const offenseData = buildRadarData(OFFENSE_METRICS);
  const defenseData = buildRadarData(DEFENSE_METRICS);

  return (
    <div className="p-6" style={{ background: "#f8f8f8", margin: "0 auto" }}>
      <h1 className="text-2xl font-semibold mt-4" style={{ color: "#231f20" }}>
        FIFA World Cup Team DNA Comparison
      </h1>
      <p className="text-sm mb-2" style={{ color: "#6a6a6a" }}>
        Match-by-match tactical profile, World Cup 2022
      </p>

      <button
        onClick={() => setShowAbout(!showAbout)}
        className="text-xs mb-4"
        style={{ color: "#0777b3", background: "none", border: "none", padding: 0, cursor: "pointer", textDecoration: "underline" }}
      >
        {showAbout ? "Hide" : "About this dive"}
      </button>

      {showAbout && (
        <div className="text-sm mb-6" style={{ color: "#231f20", lineHeight: 1.6 }}>
          <p className="mb-2">
            Compare any two World Cup 2022 teams' tactical "DNA" head-to-head, match by match.
            Each team has its own slider to step through their individual matches (group stage
            through the final) — pick any two matches, even from different stages of the
            tournament, and see how each team's playing style overlaps or contrasts.
          </p>
          <p className="mb-2">
            Two radar charts split the comparison into Offense and Defense so each stays readable:
          </p>
          <ul className="mb-2" style={{ paddingLeft: "1.2em", listStyleType: "disc" }}>
            <li>Offense (9 metrics): xG, Shots on Target, Total Shots, Corners, Crosses, Possession, Pass Accuracy, Touches, Long Balls</li>
            <li>Defense (7 metrics): Tackles, Interceptions, Aerials Won, Clearances, Saves, Fouls, Offsides</li>
          </ul>
          <p className="mb-2">
            All 16 values are normalized to a 0–100 scale, based on the tournament-wide min/max
            for that metric, so metrics on very different scales — like xG (0–5) and Touches
            (300–1200) — can sit on the same chart and be compared visually as shape, not raw numbers.
          </p>
          <p>
            Use it to spot stylistic mismatches (e.g. a high-possession, high-pass-accuracy team
            vs. a low-possession, high-tackle counter-attacking team) or to trace how a single
            team's tactical shape evolved from their opening group match to a knockout-stage
            performance.
          </p>
        </div>
      )}

      {/* Team A controls */}
      <div className="mb-4">
        <div className="flex items-center gap-3">
          <select
            value={teamA}
            onChange={(e) => { setTeamA(e.target.value); setMatchIdxA(0); }}
            className="text-sm"
            style={{ color: TEAM_A_COLOR, fontWeight: 600, border: "1px solid #ddd", borderRadius: "4px", padding: "4px 8px" }}
          >
            {TEAMS.map((t) => (
              <option key={t} value={t}>{t}</option>
            ))}
          </select>
          <input
            type="range"
            min={0}
            max={Math.max(0, matchesA.length - 1)}
            value={safeIdxA}
            onChange={(e) => setMatchIdxA(Number(e.target.value))}
            style={{ flex: 1, accentColor: TEAM_A_COLOR }}
          />
        </div>
        <p className="text-xs mt-1" style={{ color: "#6a6a6a" }}>
          {matchA ? `vs ${matchA.opponent} (${matchA.match_date})` : "No match data"}
        </p>
      </div>

      {/* Team B controls */}
      <div className="mb-6">
        <div className="flex items-center gap-3">
          <select
            value={teamB}
            onChange={(e) => { setTeamB(e.target.value); setMatchIdxB(0); }}
            className="text-sm"
            style={{ color: TEAM_B_COLOR, fontWeight: 600, border: "1px solid #ddd", borderRadius: "4px", padding: "4px 8px" }}
          >
            {TEAMS.map((t) => (
              <option key={t} value={t}>{t}</option>
            ))}
          </select>
          <input
            type="range"
            min={0}
            max={Math.max(0, matchesB.length - 1)}
            value={safeIdxB}
            onChange={(e) => setMatchIdxB(Number(e.target.value))}
            style={{ flex: 1, accentColor: TEAM_B_COLOR }}
          />
        </div>
        <p className="text-xs mt-1" style={{ color: "#6a6a6a" }}>
          {matchB ? `vs ${matchB.opponent} (${matchB.match_date})` : "No match data"}
        </p>
      </div>

      {/* Two radar charts side by side: Offense and Defense */}
      <div className="grid grid-cols-2 gap-4">
        <div>
          <h2 className="text-sm font-semibold mb-1 text-center" style={{ color: "#231f20" }}>Offense</h2>
          {matchesQuery.isLoading ? (
            <div className="bg-gray-100 animate-pulse rounded" style={{ height: 280 }} />
          ) : (
            <ResponsiveContainer width="100%" height={280}>
              <RadarChart data={offenseData}>
                <PolarGrid stroke="#ddd" />
                <PolarAngleAxis dataKey="metric" fontSize={10} />
                <PolarRadiusAxis angle={90} domain={[0, 100]} tick={false} axisLine={false} />
                <Radar name={teamA} dataKey={teamA} stroke={TEAM_A_COLOR} fill={TEAM_A_COLOR} fillOpacity={0.35} strokeWidth={2} />
                <Radar name={teamB} dataKey={teamB} stroke={TEAM_B_COLOR} fill={TEAM_B_COLOR} fillOpacity={0.35} strokeWidth={2} />
                <Tooltip />
              </RadarChart>
            </ResponsiveContainer>
          )}
        </div>
        <div>
          <h2 className="text-sm font-semibold mb-1 text-center" style={{ color: "#231f20" }}>Defense</h2>
          {matchesQuery.isLoading ? (
            <div className="bg-gray-100 animate-pulse rounded" style={{ height: 280 }} />
          ) : (
            <ResponsiveContainer width="100%" height={280}>
              <RadarChart data={defenseData}>
                <PolarGrid stroke="#ddd" />
                <PolarAngleAxis dataKey="metric" fontSize={10} />
                <PolarRadiusAxis angle={90} domain={[0, 100]} tick={false} axisLine={false} />
                <Radar name={teamA} dataKey={teamA} stroke={TEAM_A_COLOR} fill={TEAM_A_COLOR} fillOpacity={0.35} strokeWidth={2} />
                <Radar name={teamB} dataKey={teamB} stroke={TEAM_B_COLOR} fill={TEAM_B_COLOR} fillOpacity={0.35} strokeWidth={2} />
                <Tooltip />
              </RadarChart>
            </ResponsiveContainer>
          )}
        </div>
      </div>

      {!matchesQuery.isLoading && (
        <div className="flex justify-center gap-6 mt-2 text-sm">
          <span style={{ color: TEAM_A_COLOR, fontWeight: 600 }}>● {teamA}</span>
          <span style={{ color: TEAM_B_COLOR, fontWeight: 600 }}>● {teamB}</span>
        </div>
      )}
    </div>
  );
}


Compare any two World Cup 2022 teams' tactical "DNA" head-to-head, match by match. Each team has its own slider to step through their individual matches (group stage through the final) — choose any two matches, even from different stages of the tournament, and see how each team's playing style overlaps or contrasts.

Two radar charts split the comparison into Offense and Defense so each stays readable:
- Offense (9 metrics): xG, Shots on Target, Total Shots, Corners, Crosses, Possession, Pass Accuracy, Touches, Long Balls
- Defense (7 metrics): Tackles, Interceptions, Aerials Won, Clearances, Saves, Fouls, Offsides

All 16 values are normalized to a 0–100 scale (based on the tournament-wide min/max for that metric) so metrics on very different scales — like xG (0–5) and Touches (300–1200) — can sit on the same chart and be compared visually as shape, not raw numbers.

Use it to spot stylistic mismatches (e.g. a high-possession, high-pass-accuracy team vs. a low-possession, high-tackle counter-attacking team) or to trace how a single team's tactical shape evolved from their opening group match to a knockout-stage performance.

FIFA World Cup Team DNA Comparison

David Fung

Live wait times + Lightning Lane for all 6 Walt Disney World Orlando parks, pulled from ThemeParks.wiki on load. Zoom/pan map with per-park framing, age-based icons, live location + compass heading, and a never/sometime/ASAP ride-ranking filter & sort. Mobile + desktop.

Dive Gallery

Machine Learning Interpretability Dashboard

FIFA World Cup Team DNA Comparison

Walt Disney World Orlando — Live Ride Planner