archetypeCountsData = transpose(archetype_counts_by_season)
decktypeCountsData = transpose(decktype_counts_by_season)
archetypeGameWinData = transpose(archetype_game_winrate_by_season)
decktypeGameWinData = transpose(decktype_game_winrate_by_season)
archetypeMatchWinData = transpose(archetype_match_winrate_by_season)
decktypeMatchWinData = transpose(decktype_match_winrate_by_season)

// Filters to the selected season, sorts descending by `y`, optionally keeps the
// top `top` rows, and draws a bar chart. `rule` adds the 50% reference line.
function barChart(data, {x, y, yLabel, colors, top, rule = false, yMin,
                        height = 700, fontSize = 28, wrap = true} = {}) {
  const rows = data
    .filter(d => d.season_id === season)
    .sort((a, b) => d3.descending(a[y], b[y]))
    .slice(0, top ?? Infinity);

  const label = s => String(s).replace(/[_\s]+/g, "\n");
  const lines = wrap ? d3.max(rows, d => label(d[x]).split("\n").length) : 1;
  const rotate = wrap ? 0 : (rows.length > 12 ? -45 : 0);

  return Plot.plot({
    width,
    height,
    marginBottom: rotate ? height * 0.31
                : wrap ? fontSize * 1.2 * lines + 24
                : height * 0.16,
    marginLeft: fontSize * 2.5,
    style: {fontSize: `${fontSize}px`},
    x: {
      label: null,
      domain: rows.map(d => d[x]),
      ticks: rows.map(d => d[x]),
      tickFormat: wrap ? label : undefined,
      tickRotate: rotate,
      tickPadding: 8
    },
    y: {
      label: yLabel,
      labelArrow: "none",
      labelAnchor: "center",
      labelOffset: fontSize * 2.5,
      ticks: 5,
      grid: true,
      domain: yMin === undefined ? undefined : [yMin, d3.max(rows, d => d[y])]
    },
    color: {domain: Object.keys(colors), range: Object.values(colors)},
    marks: [
      Plot.barY(rows, {x, y, fill: x, tip: true}),
      rule ? Plot.ruleY([0.5], {
        stroke: "gray", strokeDasharray: "4,4", strokeOpacity: 0.5
      }) : null
    ]
  });
}