How I created my viz

Buffy the episode guide: how I created this viz

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.

The idea

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

#Python #Webscraper.io

#2 Format & software

#mobilefirst #Tableau

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 versionmobile version

#3 Design

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

#map_layers

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”

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s