Home – ManaDash

Drafts Attended

barChart(draftsAttendedData, {
  x: "player",
  y: "drafts_played",
  yLabel: "Count",
  colors: player_color_map,
  top: 15
})

Drafts Won

barChart(draftsWonData, {
  x: "player",
  y: "drafts_won",
  yLabel: "Drafts Won",
  colors: player_color_map,
  top: 15
})

Archetype Game Win Rate

barChart(archetypeWinData, {
  x: "archetype",
  y: "game_win_rate",
  yLabel: "Game Win Rate",
  colors: archetype_color_map,
  rule: true
})

Game Win Rate by Player

barChart(playerWinData, {
  x: "player",
  y: "game_win_rate",
  yLabel: "Game Win Rate",
  colors: player_color_map,
  top: 15,
  rule: true
})

viewof season = Inputs.select(seasons, {
  label: "Season",
  value: seasons[0]
})

totalsData = transpose(totals_by_season)
draftsAttendedData = transpose(drafts_attended_by_season)
draftsWonData = transpose(drafts_won_by_season)
archetypeWinData = transpose(archetype_winrate_by_season)
playerWinData = transpose(player_winrate_by_season)

totals = totalsData.find(d => d.season_id === 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
    ]
  });
}