Skip to content

feat(plotly): implement bar-race-animated #7320

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MarkusNeusinger merged 4 commits into from
May 19, 2026
Merged

feat(plotly): implement bar-race-animated #7320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b1b167c
chore(plotly): add metadata for bar-race-animated
github-actions[bot] May 19, 2026
bcddb6f
chore(plotly): update quality score 86 and review feedback for bar-ra…
github-actions[bot] May 19, 2026
09fd362
chore(plotly): update quality score 88 and review feedback for bar-ra…
github-actions[bot] May 19, 2026
aefbf17
Merge branch 'main' into implementation/bar-race-animated/plotly
MarkusNeusinger May 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
302 changes: 188 additions & 114 deletions plots/bar-race-animated/implementations/python/plotly.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,129 +1,203 @@
""" pyplots.ai
""" anyplot.ai
bar-race-animated: Animated Bar Chart Race
Library: plotly 6.5.1 | Python 3.13.11
Quality: 92/100 | Created: 2026-01-11
Library: plotly 6.7.0 | Python 3.13.13
Quality: 88/100 | Updated: 2026-05-19
"""

import os

import numpy as np
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go


THEME = os.getenv("ANYPLOT_THEME", "light")
PAGE_BG = "#FAF8F1" if THEME == "light" else "#1A1A17"
ELEVATED_BG = "#FFFDF6" if THEME == "light" else "#242420"
INK = "#1A1A17" if THEME == "light" else "#F0EFE8"
INK_SOFT = "#4A4A44" if THEME == "light" else "#B8B7B0"
GRID = "rgba(26,26,23,0.25)" if THEME == "light" else "rgba(240,239,232,0.25)"

OKABE_ITO = ["#009E73", "#D55E00", "#0072B2", "#CC79A7", "#E69F00", "#56B4E9", "#F0E442"]

# Data: Global streaming platform subscribers (millions) over 5 years
# Data: Major economy GDP rankings (approximate, in trillion USD, 1995–2023)
np.random.seed(42)

platforms = [
"StreamFlix",
"ViewMax",
"WatchHub",
"PlayStream",
"CinemaCloud",
"MediaFlow",
"ScreenTime",
"FlixNow",
"StreamZone",
"OnDemandTV",
]
years = list(range(2019, 2025))

# Generate realistic subscriber growth data with varying trajectories
data = []
base_values = {
"StreamFlix": 150,
"ViewMax": 120,
"WatchHub": 80,
"PlayStream": 60,
"CinemaCloud": 50,
"MediaFlow": 40,
"ScreenTime": 35,
"FlixNow": 25,
"StreamZone": 20,
"OnDemandTV": 15,
}

growth_rates = {
"StreamFlix": 1.15,
"ViewMax": 1.25,
"WatchHub": 1.35,
"PlayStream": 1.20,
"CinemaCloud": 1.10,
"MediaFlow": 1.30,
"ScreenTime": 1.40,
"FlixNow": 1.45,
"StreamZone": 1.25,
"OnDemandTV": 1.50,
}

for platform in platforms:
value = base_values[platform]
countries = ["USA", "China", "Japan", "Germany", "UK", "France", "Brazil"]
years = list(range(1995, 2024))

base_gdp = {"USA": 7.70, "China": 0.73, "Japan": 5.45, "Germany": 2.60, "UK": 1.28, "France": 1.60, "Brazil": 0.77}
color_map = dict(zip(countries, OKABE_ITO))

data_rows = []
for country in countries:
gdp = base_gdp[country]
for year in years:
noise = np.random.uniform(0.9, 1.1)
data.append({"Platform": platform, "Year": year, "Subscribers": round(value * noise, 1)})
value = value * growth_rates[platform]

df = pd.DataFrame(data)

# Sort and add rank for each year
df["Rank"] = df.groupby("Year")["Subscribers"].rank(method="first", ascending=False)
df = df.sort_values(["Year", "Subscribers"], ascending=[True, False])

# Color palette - consistent per platform (using Python colors first, then colorblind-safe)
colors = ["#306998", "#FFD43B", "#E24A33", "#348ABD", "#988ED5", "#777777", "#FBC15E", "#8EBA42", "#FFB5B8", "#56B4E9"]
color_map = dict(zip(platforms, colors, strict=False))

# Create animated bar chart
fig = px.bar(
df,
x="Subscribers",
y="Platform",
color="Platform",
color_discrete_map=color_map,
animation_frame="Year",
orientation="h",
text="Subscribers",
category_orders={
"Platform": df[df["Year"] == 2024].sort_values("Subscribers", ascending=True)["Platform"].tolist()
},
noise = np.random.uniform(0.99, 1.01)
data_rows.append({"Country": country, "Year": year, "GDP": round(gdp * noise, 3)})
if country == "USA":
rate = -0.020 if year == 2009 else 0.047
elif country == "China":
rate = 0.115 if year < 2005 else (0.138 if year < 2015 else (0.072 if year < 2020 else 0.056))
elif country == "Japan":
rate = -0.012 if year in [2009, 2011] else 0.014
elif country == "Germany":
rate = -0.050 if year == 2009 else 0.040
elif country == "UK":
rate = -0.040 if year == 2009 else 0.042
elif country == "France":
rate = -0.030 if year == 2009 else 0.037
else: # Brazil
rate = 0.083 if year < 2011 else (0.025 if year < 2015 else (-0.005 if year < 2019 else 0.038))
gdp = gdp * (1 + rate)

df = pd.DataFrame(data_rows)
max_gdp = df["GDP"].max() * 1.18
title_text = "GDP Rankings · bar-race-animated · python · plotly · anyplot.ai"

shared_xaxis = dict(
title=dict(text="GDP (Trillion USD)", font=dict(size=22, color=INK)),
tickfont=dict(size=18, color=INK_SOFT),
range=[0, max_gdp],
gridcolor=GRID,
linecolor=INK_SOFT,
zerolinecolor=INK_SOFT,
)

# Update layout for 4800x2700 px canvas
fig.update_layout(
title={
"text": "bar-race-animated · plotly · pyplots.ai", "font": {"size": 32, "color": "#333333"}, "x": 0.5, "xanchor": "center"
},
xaxis={
"title": {"text": "Subscribers (Millions)", "font": {"size": 24}},
"tickfont": {"size": 18},
"range": [0, df["Subscribers"].max() * 1.15],
"gridcolor": "rgba(128,128,128,0.2)",
"gridwidth": 1,
},
yaxis={"title": {"text": "", "font": {"size": 24}}, "tickfont": {"size": 20}, "categoryorder": "total ascending"},
template="plotly_white",
showlegend=False,
margin={"l": 200, "r": 100, "t": 120, "b": 100},
plot_bgcolor="white",
paper_bgcolor="white",
shared_yaxis = dict(tickfont=dict(size=20, color=INK_SOFT), linecolor=INK_SOFT, showgrid=False)
shared_margin = dict(l=150, r=160, t=140, b=160)

# Animation frames: bars sorted by GDP value each year
frames = []
slider_steps = []
for year in years:
year_data = df[df["Year"] == year].sort_values("GDP", ascending=True)
frames.append(
go.Frame(
data=[
go.Bar(
x=year_data["GDP"],
y=year_data["Country"],
orientation="h",
text=[f"{v:.1f}T" for v in year_data["GDP"]],
textposition="outside",
textfont=dict(size=18, color=INK),
marker=dict(color=[color_map[c] for c in year_data["Country"]], line=dict(width=0)),
)
],
name=str(year),
)
)
slider_steps.append(
dict(
args=[
[str(year)],
dict(frame=dict(duration=600, redraw=True), mode="immediate", transition=dict(duration=300)),
],
label=str(year),
method="animate",
)
)

# Initial state: 1995
init_data = df[df["Year"] == years[0]].sort_values("GDP", ascending=True)

fig_anim = go.Figure(
data=[
go.Bar(
x=init_data["GDP"],
y=init_data["Country"],
orientation="h",
text=[f"{v:.1f}T" for v in init_data["GDP"]],
textposition="outside",
textfont=dict(size=18, color=INK),
marker=dict(color=[color_map[c] for c in init_data["Country"]], line=dict(width=0)),
)
],
layout=go.Layout(
title=dict(text=title_text, font=dict(size=28, color=INK), x=0.5, xanchor="center"),
xaxis=shared_xaxis,
yaxis=shared_yaxis,
paper_bgcolor=PAGE_BG,
plot_bgcolor=PAGE_BG,
margin=shared_margin,
showlegend=False,
updatemenus=[
dict(
type="buttons",
showactive=False,
y=1.08,
x=0.0,
xanchor="left",
buttons=[
dict(
label="▶ Play",
method="animate",
args=[
None,
dict(
frame=dict(duration=600, redraw=True), fromcurrent=True, transition=dict(duration=300)
),
],
),
dict(
label="⏸ Pause",
method="animate",
args=[
[None],
dict(frame=dict(duration=0, redraw=False), mode="immediate", transition=dict(duration=0)),
],
),
],
)
],
sliders=[
dict(
active=0,
currentvalue=dict(font=dict(size=24, color=INK), prefix="Year: ", visible=True, xanchor="center"),
font=dict(size=16, color=INK_SOFT),
bgcolor=ELEVATED_BG,
bordercolor=INK_SOFT,
steps=slider_steps,
pad=dict(b=10, t=50),
)
],
),
frames=frames,
)

# Update traces for better visibility
fig.update_traces(
texttemplate="%{text:.0f}M",
textposition="outside",
textfont={"size": 18, "color": "#333333"},
marker={"line": {"width": 1, "color": "white"}},
fig_anim.write_html(f"plot-{THEME}.html", include_plotlyjs="cdn")

# Static PNG: final year (2023) snapshot showing the race outcome
final_data = df[df["Year"] == years[-1]].sort_values("GDP", ascending=True)

fig_png = go.Figure(
data=[
go.Bar(
x=final_data["GDP"],
y=final_data["Country"],
orientation="h",
text=[f"{v:.1f}T" for v in final_data["GDP"]],
textposition="outside",
textfont=dict(size=18, color=INK),
marker=dict(color=[color_map[c] for c in final_data["Country"]], line=dict(width=0)),
)
]
)
fig_png.update_layout(
title=dict(text=title_text, font=dict(size=28, color=INK), x=0.5, xanchor="center"),
xaxis=dict(
title=dict(text="GDP (Trillion USD) — 2023 snapshot", font=dict(size=22, color=INK)),
tickfont=dict(size=18, color=INK_SOFT),
range=[0, max_gdp],
gridcolor=GRID,
linecolor=INK_SOFT,
zerolinecolor=INK_SOFT,
),
yaxis=shared_yaxis,
paper_bgcolor=PAGE_BG,
plot_bgcolor=PAGE_BG,
margin=dict(l=150, r=160, t=120, b=100),
showlegend=False,
)

# Update animation settings
fig.layout.updatemenus[0].buttons[0].args[1]["frame"]["duration"] = 800
fig.layout.updatemenus[0].buttons[0].args[1]["transition"]["duration"] = 400

# Update slider styling
fig.layout.sliders[0].font = {"size": 18}
fig.layout.sliders[0].currentvalue = {"font": {"size": 24}, "prefix": "Year: ", "visible": True, "xanchor": "center"}

# Save as PNG (static frame showing final year)
fig.write_image("plot.png", width=1600, height=900, scale=3)

# Save as HTML (interactive with animation)
fig.write_html("plot.html", include_plotlyjs=True, full_html=True)
fig_png.write_image(f"plot-{THEME}.png", width=1600, height=900, scale=3)
Loading
Loading