DSC106 Final Project — Do "Toxic" Cards Actually Win? A Clash Royale Data Story

Interactive D3.js data story analyzing 2.1M+ Clash Royale ladder battles to reveal that cheap support spells, not powerful troop cards, dominate high-level play.

Course: DSC 106 – Data Visualization, UC San Diego  ·  Collaborators: Trent Gong, Gabriel Maayah  ·  Stack: D3.js v7, JavaScript, Python, Jupyter Notebooks, HTML/CSS  ·  Year: 2025

GitHub → Live Demo →

Overview

Built an interactive data storytelling web app that challenges Clash Royale players’ assumptions about which cards are truly “toxic.” Using 2.1M+ sampled ladder battles from Season 18 (Dec 2020–Jan 2021), the project tells a data-driven story across 5 arena tiers — revealing that while players blame powerful troop cards (Mega Knight, Wizard, Skeleton Army) for unfair gameplay, it is actually cheap support spells (The Log, Zap) that dominate win counts at higher skill levels.

Data Pipeline

  • Built a Python/Jupyter ETL pipeline converting raw daily battle CSVs into a 10% stratified sample to make the 2.1M-row dataset tractable for browser-side rendering.
  • Aggregated card-level win statistics per arena tier, outputting clean JSON consumed directly by D3.

Guided Narrative

  • Designed a 5-step slideshow that walks users through each arena tier in sequence.
  • Each step renders a D3.js v7 bar chart comparing cumulative wins for “toxic troop” cards vs. “cheap spell” cards, with a mean-line overlay and a running summary bar that updates as the story progresses.
  • Visual encoding (color, annotation, transitions) guides the reader toward the central insight without requiring prior game knowledge.

Interactive Data Explorer

  • Built a fully independent explorer mode where users can:
    • Select any arena tier
    • Search and filter cards by name, elixir cost, rarity, or card type
    • Construct custom comparison bins of arbitrary card sets
    • Toggle between total wins and win rate %
  • All filtering and chart updates are driven client-side with no page reloads, keeping the experience fluid across device sizes.