Step 07

Plotly charts

Turn your CSV into cozy HTML charts—no webdev required.

Run

Run after each small change. Tiny loops win.

uv run python -m src.scout

You will touch

src/scout/ (chart generation)
reports/

Time

60–120 minutes

Do this (suggested order)

Install plotly: uv add plotly.
Read your CSV into a dataframe, convert types, and sort by time.
Make a champion pool bar chart and save to reports/champ_pool.html.
Make a rolling winrate line chart (window 10) and save to reports/winrate_rolling_10.html.
Open the HTML files locally and compare them to your text report.

You’ll practice

plotly express basics
rolling windows for trends
save HTML artifacts

Explainers (for context, not homework)

Plotly: enough to be dangerous — Save to HTML + pre-plot checklist
Pandas: the minimum you need — Sort, groupby, sanity prints

Build

Dependency

plotly

Charts

Champion pool bar chart (reports/champ_pool.html)
Rolling winrate (window 10) line chart
Optional KDA trend chart

Check yourself

Opening the HTML files locally matches summary numbers.

If it breaks

Time axis unsorted → spaghetti chart
game_start as string instead of datetime
Rolling window before sorting

Hints (spoilers)

Hint: stick to px (Plotly Express is enough)

Plotly Express (px) bar + line are enough. Subplots are optional pain. Avoid optional pain.

Bigger hint: write_html (your win condition)

Every figure supports .write_html('path'). If the chart exists on disk and opens, you’re winning.

The move

fig = px.bar(df, x='champion', y='games')
fig.write_html('reports/champ_pool.html')

Unblock-me: spaghetti charts = unsorted time

If a time plot looks cursed, sort first and print the first/last rows. 90% of the time, the dataframe is out of order.

Two prints that tell you the truth

df = df.sort_values('game_start')
print(df[['game_start','win']].head(10).to_string(index=False))
print(df[['game_start','win']].tail(10).to_string(index=False))

Expected chart files

reports/
  champ_pool.html
  winrate_rolling_10.html
  (optional) kda_trend.html

The entire “save a chart” move

fig = px.line(df, x='game_start', y='winrate_rolling_10')
fig.write_html('reports/winrate_rolling_10.html')

If a chart looks wrong, check the dataframe

print(df[['game_start', 'win']].head(10).to_string(index=False))
print(df[['game_start', 'win']].tail(10).to_string(index=False))