During the lockdown in 2020, like many others, I had extra time on my hands. I was spending a lot of my time taking computer science courses and learning Python. After a while, I felt I was ready to try to build a web app to practice processing and visualizing data. I had the idea to pull the data from the other way I was spending a lot of time: binging Survivor.
The Idea: Merging “Survivor” with Data Science
I love survivor, it’s so calculated. I wanted to attempt to bring some statistical insights to the patterns I was observing. So, I started collecting data—compiling a database of winners, ages, votes, and regions spanning 40 seasons.
The goal was simple:
- Create a database of contestant statistics
- Write SQL queries to extract insights
- Use Flask & Jinja to display the data dynamically
- Visualize key trends using Matplotlib
Tech Stack & Implementation
Flask & Jinja: The Web Framework
Flask’s lightweight nature made it seem more approachable, and I really appreciate the clean looking code and good documentation. This project had a lot to render and building with Flask and rendering them dynamically with Jinja templates helped the code stay clean and run fast. It allowed me to create clean, template-driven pages without unnecessary complexity.
SQLite & SQL Queries: The Data Engine
Continuing on the goal of simplicity, I used an SQLite database to store all the contestant data, including:
- Winner stats (name, age, season)
- Votes received
- Regional representation
With SQL queries, I could efficiently retrieve and filter data for visualization.
Matplotlib: Bringing the Data to Life
I opted for Matplotlib to generate static charts. Using Python scripts, I created pie charts to illustrate key trends.
Front-End Design: A Clean, Dynamic Look
The front-end keeps things simple yet bold, with a high-contrast gradient background and a clean, structured layout. A fixed side nav ensures easy access, while monospace fonts, subtle transparency, and hover effects give the page some depth. Tables and pie charts are styled for clarity, and media queries keep everything responsive.
If I were to design this again, I would probably want the pie charts to be much larger than the data, and enable hover effects when the mouse passes over pieces.
Challenges & Lessons Learned
Data Collection Was a Grind
The hardest part was manually compiling and verifying the data. Pulling from the Survivor Wiki and cross-checking stats was time-consuming, but having a dataset I felt was unique and fun helped keep me pushing forward.
Matplotlib’s Image Cropping & Transparency
Generating cropped, transparent images was an unexpected challenge. I had to tweak the bbox parameters and use PIL for post-processing to get the charts looking just right.
img = Image.open(imgPath)
croppedImage = img.crop(box)
croppedImage.save('static/' + file_name + '_cropped.png')SQL Query Optimization
As the database grew, some queries became inefficient. Learning how to index and optimize SQL queries made a noticeable difference in page load times.
The final product lives at survivor40.netlify.app, and the code is on my GitHub.