National Stats (F)

Various statistics on national level

// 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);
})

viewof ctry = Inputs.select(countries, {value: "england", label: "Choose Country"})

All Time Table

tablejs = transpose(table)
disp_table = tablejs.filter(function(team) {
  return team.country == ctry;
})
Inputs.table(disp_table, {
  columns: [
    "rank", "Team", "games", "won", "draw", "lost", "points", "avg.points", "goals", "against"
  ],
  rows: 20
})

Result Matrix

result_data_trans = transpose(result_data)

result_data_ojs = result_data_trans.filter(function(result) {
  return result.country == ctry;
})


Plot.plot({
  color: {
    legend: false,
    type: "pow",
    range: theme.cellRange
  },
  y: { grid: false, label: "Home" },
  x: { grid: false, label: "Away", axis: "top" },
  marks: [
    Plot.cell(result_data_ojs, {
      x: "away_ft_goals",
      y: "home_ft_goals",
      fill: "frac",
      tip: true,
      title: d => d.home_ft_goals + " : " + d.away_ft_goals + "\n\n" + d.frac?.toFixed(3) + "%"
    }),
    Plot.text(result_data_ojs, {
      x: "away_ft_goals",
      y: "home_ft_goals",
      text: d => d.frac?.toFixed(3) + "%",
      fill: "black"
    })
  ],
  style: { background: theme.bg, fill: "#D3D3D3", fontFamily: "Poppins", fontSize: "20px" },
  height: chartWidth,
  width: chartWidth,
  marginLeft: 50, marginRight: 50, marginTop: 50, marginBottom: 50,
  insetTop: 0, insetBottom: 0, insetLeft: 0, insetRight: 0
})

Average Number of Goals

avg_data_trans = transpose(avg_data)

avg_data_ojs = avg_data_trans.filter(function(result) {
  return result.country == ctry;
})

Plot.plot({
  color: { legend: true },
  y: { grid: false, domain: d3.extent(avg_data_ojs, d => d.avg_goals), zero: true, label: "↑ Average number of goals per match", ticks: 5 },
  x: { grid: false, domain: d3.extent(avg_data_ojs, d => d.year), label: "Year", ticks: 5 },
  marks: [
    Plot.gridY({ ticks: 5, stroke: "#fff", strokeOpacity: 0.2 }),
    Plot.dot(avg_data_ojs, { x: "year", y: "avg_goals", tip: true, title: (d) => `${d.avg_goals}` }),
    Plot.line(avg_data_ojs, { x: "year", y: "avg_goals" })
  ],
  style: { background: theme.bg, fill: "#D3D3D3", fontFamily: "Poppins", fontSize: "20px" },
  height: 600,
  width: chartWidth,
  marginLeft: 50, marginRight: 50, marginTop: 50, marginBottom: 50,
  insetTop: 0, insetBottom: 0, insetLeft: 0, insetRight: 0
})

Home Field Advantage

hfa_data_trans = transpose(hfa_data)

hfa_data_ojs = hfa_data_trans.filter(function(result) {
  return result.country == ctry;
})

Plot.plot({
  color: { legend: true },
  y: { grid: false, domain: d3.extent(hfa_data_ojs, d => d.hfa), zero: true, label: "↑ Fraction of home games won", ticks: 5 },
  x: { grid: false, domain: d3.extent(hfa_data_ojs, d => d.year), label: "Year", ticks: 5 },
  marks: [
    Plot.gridY({ ticks: 5, stroke: "#fff", strokeOpacity: 0.2 }),
    Plot.dot(hfa_data_ojs, { x: "year", y: "hfa", tip: true, title: (d) => `${d.hfa}` }),
    Plot.line(hfa_data_ojs, { x: "year", y: "hfa" })
  ],
  style: { background: theme.bg, fill: "#D3D3D3", fontFamily: "Poppins", fontSize: "20px" },
  height: 600,
  width: chartWidth,
  marginLeft: 50, marginRight: 50, marginTop: 50, marginBottom: 50,
  insetTop: 0, insetBottom: 0, insetLeft: 0, insetRight: 0
})

Most goals per match

topgoalsjs = transpose(top_goals)
disp_topgoals = topgoalsjs.filter(function(team) {
  return team.country == ctry;
})
Inputs.table(disp_topgoals, {
  columns: ["home", "away", "result", "date"],
  header: { home: "Home", away: "Away", result: "Result", date: "Date" }
})

Zero-Zero

Most absolute number of 0:0

toptotaljs = transpose(top_total)
disp_toptotal = toptotaljs.filter(function(team) {
  return team.country == ctry;
})
Inputs.table(disp_toptotal, {
  columns: ["Team", "Count", "Matches"],
  header: { Team: "Team", Count: "Count", Matches: "#Matches" }
})

Highest Percentage of 0:0 (only teams with more than 20 games considered)

topfracjs = transpose(top_frac)
disp_topfrac = topfracjs.filter(function(team) {
  return team.country == ctry;
})
Inputs.table(disp_topfrac, {
  columns: ["Team", "Fraction", "Matches"],
  header: { Team: "Team", Fraction: "Fraction", Matches: "#Matches" }
})

Runs

longest unbeaten run

streaksjs = transpose(streaks)
disp_streak = streaksjs.filter(function(team) {
  return team.country == ctry;
})
Inputs.table(disp_streak, {
  columns: ["team", "streak", "from", "to"],
  header: { team: "Team", streak: "streak length", from: "from", to: "to" }
})

(Last update: 2026-06-30)