Skip to content

feat: music visualization overhaul — streamgraph, bump chart, sunburst #25

@jschloman

Description

@jschloman

Summary

Replace the current music charts with more visually engaging alternatives. Three new chart types targeting the Listening and Overview tabs.

Depends on: #23 (theme foundation)

1. Genre streamgraph (Altair)

Replace the existing timeline bar chart with an Altair streamgraph (stacked area, centered baseline) showing scrobble volume by top genre over time.

import altair as alt

alt.Chart(weekly_genre_df).mark_area().encode(
    x=alt.X("yearweek(date):T", title=None),
    y=alt.Y("scrobbles:Q", stack="center", title=None),
    color=alt.Color("genre:N", scale=alt.Scale(
        range=["#6366f1","#22d3ee","#f472b6","#a855f7","#22c55e"]
    )),
    tooltip=["genre:N", "scrobbles:Q", "yearweek(date):T"],
).properties(height=260)

Requires a weekly_genre_df aggregation step: group by ISO week + genre → scrobble count. Add this to analysis_utils.py.

2. Top artists — horizontal bar with rank badges

Replace vertical bar chart with a styled horizontal bar chart (px.bar, orientation "h"):

3. Artist rank bump chart (Plotly)

New chart on the Timeline tab: show how the user's top 10 artists' monthly ranks shift across the year. Line chart with reversed Y axis (rank 1 at top), one colored line per artist.

px.line(
    monthly_ranks_df,
    x="month", y="rank", color="artist",
    color_discrete_sequence=["#6366f1","#22d3ee","#f472b6","#a855f7","#22c55e",
                              "#f97316","#facc15","#818cf8","#67e8f9","#f9a8d4"],
)

4. Genre/artist/album sunburst (Plotly)

New chart on the Overview tab: px.sunburst(df, path=["genre", "artist", "album"], values="scrobbles") with color_discrete_sequence matching the palette. Shows the hierarchy in a single glanceable chart.

Data prep additions needed

  • get_genre_weekly(df)pd.DataFrame with columns date, genre, scrobbles
  • get_artist_monthly_ranks(df, n=10)pd.DataFrame with columns month, artist, rank

Add both to analysis_utils.py with full type annotations and docstrings.

Acceptance criteria

  • Streamgraph renders for Last.fm data with at least 4 weeks of history
  • Horizontal bar chart replaces existing top-artists chart
  • Bump chart visible on Timeline tab, hidden if < 2 months of data
  • Sunburst renders and is interactive (click to drill down)
  • New analysis_utils.py functions covered by unit tests
  • ruff check ., mypy, and pytest --cov-fail-under=80 all pass

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions