Duolingo Visualizer

README.md

Interactive dashboard visualizing Dutch language learning progress from Duolingo. Displays aggregate statistics, a GitHub-style calendar heatmap of daily activity, and a line chart of cumulative lesson completions over time.

Features

• Stats grid -- total lessons, XP, current streak, and other overview metrics
• Daily XP heatmap -- calendar-style visualization showing activity intensity per day with hover tooltips
• Cumulative lessons chart -- running total of lesson completions by month

Stats Computation

All metrics are derived client-side from the raw JSON. On load the script sorts entries by date and computes totals, averages, and streak values directly in the browser -- no server-side processing required.

• Current streak -- read from the most recent entry's streak field
• Total lessons / session time -- summed across all entries
• Averages -- totals divided by the number of active days (days with at least one session)

Calendar Heatmap

The heatmap is rendered entirely with the Canvas API:

1. Date range -- the grid spans from the Sunday before the first data point to the Saturday after the last, forming complete weeks
2. Cell grid -- each day is a 14×14 px rounded cell with 2 px gaps, placed by week and day-of-week coordinates
3. Color scale -- a 4-stop opacity ramp over Duolingo green (#58cc02), normalized against the max XP in the dataset
4. Tooltips -- mouse coordinates are mapped back to grid cells to show date and XP on hover
5. HiDPI -- the canvas scales by devicePixelRatio for crisp rendering on retina displays

Tech Stack

• Chart.js -- line chart with custom theming
• Canvas API -- heatmap rendering and hit-detection
• Flask -- serves the JSON data via /api/data

Data Format