When I was new to #dataviz, seeing only finalised projects by seasoned practitioners used to puzzle me: I always have thousands of questions on the process: how did you get there?
That’s why I document most of my projects, explaining the reasoning, design choices, technical hurdles etc.
A couple of months ago, I shared an interactive infographics on the 6 reasons to (re)watch Buffy. It explained why, not how. To complete it, and in time for Buffy’s 25th anniversary, I created an interactive episode guide.
This blog is to document and shed a light on how I created this viz. I would advise to read first my blog on the process for the 6 reasons to (re)watch Buffy here, because there are a lot of similarities.
#1 Getting the data
- For episode ratings, I followed Isabella Benabay’s tutorial How to Scrape TV Show Episode IMDb Ratings Using Python & BeautifulSoup.
- The rest of the quantitative data was from IMDB, I used webscraper.io
- For the skip/watch recommendations, I decided to refer to a third party blog specialised in that type of analysis, rather than debating myself, as this is highly subjective!
#2 Format & software
As last time, my priority is to create with mobile usage in mind so I worked on the mobile version first. To be honest, it’s not perfect but it gives a sense of what the data looks like.
|Desktop version||mobile version|
I used Figma for the layout, Adobe for the fonts of the title (Mason sans). I have already mentioned a couple of times the video resources that got me into Figma, should you be interested.
#4 Technical & data challenges
I was my first time I used map layers, so I am in debt to the amazing tutorial recommendations listed here, following my question on Twitter.
I learn better with videos (rather than written blogs) so I found especially useful the videos by Adam McCann and Luke Stanke.
On the data side, I also wanted to play with standard deviations to look at the variance of scores. If you are interested in understand how I created those, the workbook is downloadable and should contain another data sheet, with all the calculations
That’s all I had folks 🙂
1 thought on “Buffy the episode guide: how I created this viz”