League Predictions

End of season and match predictions based on our World Ranking for European leagues.

// Shared OJS theme — reads the CSS custom properties defined in styles.css :root
// so chart colors have a single source of truth (no copy-pasted hexes).
theme = {
  const root = getComputedStyle(document.documentElement);
  const v = (name, fallback) => (root.getPropertyValue(name).trim() || fallback);
  return {
    bg: v("--soccerverse-bg", "#383A3F"),
    fg: v("--soccerverse-fg", "#F6B352"),
    hl: v("--soccerverse-hl", "#F68657"),
    // light→accent ramp used by the result-matrix heatmaps
    cellRange: ["#fef3e4", v("--soccerverse-fg", "#F6B352")]
  };
}

// Responsive chart width: fills the content column (capped at 950) and
// updates on window resize so charts never overflow on small screens.
chartWidth = Generators.observe((notify) => {
  const measure = () =>
    notify(Math.min(950, (document.querySelector("main")?.clientWidth ?? 950) - 40));
  measure();
  addEventListener("resize", measure);
  return () => removeEventListener("resize", measure);
})

matchesAll = FileAttachment("../data/predictions_matches.csv").csv({typed: true})
tableAll = FileAttachment("../data/predictions_table.csv").csv({typed: true})
rankProbsAll = FileAttachment("../data/predictions_rankprobs.csv").csv({typed: true})

countries = Array.from(new Set(tableAll.map((d) => d.country))).sort()
title = (s) => s.replace(/(^|\s)\S/g, (c) => c.toUpperCase())

viewof country = Inputs.select(countries, {
  label: "Choose League",
  value: countries.includes("england") ? "england" : countries[0],
  format: title
})

Upcoming Matches

matches = matchesAll.filter((d) => d.country === country)

matches.length === 0
  ? md`*No upcoming matches in the next 7 days.*`
  : Inputs.table(matches, {
      columns: ["date", "home", "away", "hprob", "dprob", "aprob"],
      header: { date: "Date", home: "Home", away: "Away", hprob: "Home Win", dprob: "Draw", aprob: "Away Win" },
      format: {
        hprob: (x) => `${Math.round(x * 100)}%`,
        dprob: (x) => `${Math.round(x * 100)}%`,
        aprob: (x) => `${Math.round(x * 100)}%`
      },
      rows: 20
    })

Predicted Final Table

predTable = tableAll.filter((d) => d.country === country).sort((a, b) => a.rank - b.rank)

Inputs.table(predTable, {
  columns: ["rank", "team", "points", "champion"],
  header: { rank: "#", team: "Team", points: "Points", champion: "Champion" },
  format: { champion: (x) => `${(x * 100).toFixed(1)}%` },
  rows: 30,
  sort: false
})

End-of-season rank probabilities (darker = more likely):

rankProbs = rankProbsAll.filter((d) => d.country === country)
teamOrder = predTable.map((d) => d.team)

Plot.plot({
  marginLeft: 160,
  marginBottom: 40,
  width: chartWidth,
  height: Math.max(200, teamOrder.length * 26 + 60),
  color: { type: "pow", range: theme.cellRange, legend: false },
  x: { label: "Final rank →", axis: "top", tickFormat: "d" },
  y: { label: null, domain: teamOrder },
  marks: [
    Plot.cell(rankProbs, {
      x: "rank_pos",
      y: "team",
      fill: "prob",
      tip: true,
      title: (d) => `${d.team}\nRank ${d.rank_pos}: ${(d.prob * 100).toFixed(1)}%`
    })
  ],
  style: { background: theme.bg, color: "white", fontFamily: "Poppins" }
})

(Based on 1000 simulations of the remaining schedule. Points: average points per simulation. Champion: probability to win the league.)