▌ gdp-bar-chart-race.md

# GDP Bar Chart Race Video — Comparative Data ## What it is Short-form animated bar chart video showing the world's 20 smallest economies reordering over 34 years (1990–2023). Made for @comparativedata1 YouTube channel. ## Pipeline 1. Fetched World Bank GDP per capita data (PPP, constant 2017 international $) via API 2. Generated 2595 PNG frames (1080×1920 portrait) with smooth interpolated animations 3. Compiled to MP4 with ffmpeg + Interstellar music mix 4. Delivered via Telegram ## Key Technical Decisions ### Why not HyperFrames? HyperFrames render kept failing (`window.__hf not ready`). Tried `--browser-gpu`, adding `window.__hf = {duration}` declaration, but FrameCapture still timed out. Docker not available on this Mac. Fell back to pure Python PIL frame generation + ffmpeg compilation — more reliable and fully controllable. ### Frame Generation (Python/PIL) - `PIL.ImageDraw` for all drawing - Interpolation: `ease_in_out(min(1.0, block_t))` for smooth year-to-year transitions - Row positions interpolated linearly (lerp) - GDP values interpolated linearly - Bar widths scaled min-max normalized to BAR_MAX_W - Alternating row backgrounds for readability ### Music Processing - Source: `/Volumes/My Shared Files/UTM/Music/Interstaller inspired Music by .mp3` - Trim to 102s (video length) with fade-out at 80s: `ffmpeg -i ... -af "volume=0.3" -af "afade=t=out:st=80:d=5"` - Music volume: 30% (0.3) ### FFmpeg Compile ```bash ffmpeg -y -framerate 30 -i /tmp/gdp_frames3/frame_%05d.png \ -i /tmp/interstellar_85s.mp3 \ -map 0:v -map 1:a \ -c:v libx264 -crf 18 -preset fast \ -shortest -t 102 \ -c:a aac -b:a 192k \ /Users/Shared/hf-demo/gdp-animation/video_v3.mp4 ``` ## File Locations - Source data: `/tmp/gdp_data.json` (20 countries, 1990–2023, from World Bank API) - Frames dir: `/tmp/gdp_frames3/` (2595 PNGs) - Raw video: `/Users/Shared/hf-demo/gdp-animation/video_v3.mp4` (86s, 8MB) - Music trimmed: `/tmp/interstellar_85s.mp3` - Python script: `/tmp/gdp_frames_v3.py` - HTML (failed HyperFrames attempt): `/Users/Shared/hf-demo/gdp-render/index.html` - Technical spec: `/Users/Shared/hf-demo/gdp-animation/TECHNICAL.md` ## Video Specs - Duration: 86s (3s title + 85s animation + end card) - Resolution: 1080×1920 (9:16 portrait) - FPS: 30 - Music: Interstellar by (from UTM/Music/) - Format: MP4 H.264 + AAC audio ## Scene Breakdown - **0–3s**: Title card — "The 20 POOREST Countries by GDP" + year range badge - **3–88s**: Main animation — bars reorder smoothly as GDP rankings shift year by year - **88–102s**: End card — @comparativedata1 + World Bank credit ## Data (World Bank indicator: NY.GDP.PCAP.PP.KD) Countries (20): Tuvalu, Kiribati, São Tomé and Príncipe, Marshall Islands, Palau, Tonga, Micronesia, Vanuatu, Samoa, Dominica, Solomon Islands, Comoros, Guinea-Bissau, Saint Kitts and Nevis, Timor-Leste, Saint Vincent and the Grenadines, Bhutan, Grenada, Eritrea (no data), Seychelles Eritrea has no data — removed from visualization. ## Color Scheme - Background: #0a0a0f (near black) - Accent: cyan #40c8f0 (accent line, year badge, progress bar) - Title highlight: gold #f0c040 - Bar colors: red→orange→yellow gradient (rank 1=red, rank 20=yellow) - Text: white/dim gray ## Prompt/Title for Nick's Caption "😱 The 20 POOREST countries by GDP in 2026 – Tuvalu has just $0.06 BILLION! These tiny islands & micro-nations have smaller economies than one big company day profit! From Nauru to Antigua, see how the smallest nations stack up. Mind blown? Drop a 🔥 if shocked! Which country surprised you most? Comment below! 👇 ℹ️ Data as of IMF #PoorestCountries #GDP2026 #Tuvalu #SmallestEconomies #WorldEconomy #EconomyFacts #ShockingFacts #Geography #Viral #FYP #comparativedata1" ## Can Reuse For - Any bar chart race video (swap GDP_DATA json) - Country comparison animations - Economic data visualizations - Change years range by adjusting YEARS list - Change animation speed by adjusting ANIM_DUR_PER_YEAR