6 reasons to (re)watch Buffy – how I created my dataviz

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

This year, the topic of Ironviz, Tableau’s annual dataviz competition, was ‘something that brings you joy’. Since I already worked in Eurovision and Hamilton (which one day, I will update), I was left with creating a dataviz on my cat or Buffy. And I went for the later, with a very clear goal: share 6 reasons to (re)watch Buffy the Vampire Slayer.

Here’s how. I hope to share some tricks you can apply to your next dataviz projects.

#1 Getting the data

#Python #Webscraper.io #OpenRefine #Github

For episode ratings, I followed Isabella Benabay’s amazingly simple tutorial How to Scrape TV Show Episode IMDb Ratings Using Python & BeautifulSoup.

The rest of the quantitative data was from IMDB and Buffy’s Wiki. I used webscraper.io, a free tool I tend to call “Beautiful Soup for people who prefer to visualise”. I also used OpenRefine for cleaning the csv extracts.

There was still one datapoint missing: how to prove the show is feminist?
I could have tagged manually which episodes pass the Bechdel–Wallace test ; since I’m pretty sure it’s 100% of them, the datapoint would have had little wow effect…

I got insanely lucky that Julian Freedland shared the full episodes transcripts on Github, including the total time spoken per character.
All I had to do was to tag manually the gender of more than 200 characters.
I excluded any character that had less than 10 seconds of dialog in the whole show and the ones where the gender is difficult to assign without rewatching the whole show (for instance, when the transcript says “doctor” or “vampire”).

#2 Format & software

~~#mobilefirst~~ #mobilesecond #Tableau

My priority is to create with mobile usage in mind, not always an easy thing in Tableau. The viz will never be as pleasant to use on a smartphone as on desktop but I want to give at least a sense of the content, without the whole layout bugging completely.

The format was constricted by the max length on PowerPoint. Oh yes, I used Powerpoint for the background! Which leads me to the Design part:

#3 Design

#PowerPoint #Adobe

Designers, please don’t hyperventilate. I’m afraid I don’t have (yet) strong Adobe Illustrator skills, so I mainly used PowerPoint.

I really struggled with finding a good title font though. I needed a web safe font for the text created in Tableau (I went with Georgia) but I wanted something both youthful and iconic for the headers. I settled on Mason Sans, which means I have to create the text in Adobe and then save and use it in PowerPoint.

Icons: I have a paid subscription to Noun Project. The advantage is that you can change directly the colour of the required icons on the website (and you don’t have to credit the source of the icons).

Colour scheme: Storytelling with data’s challenge of the month was the red colour, that inspired me to create a palette with 2 amazing tools: Coolors.co and Data color picker.

#4 Technical challenges

#arcSankey #network #actions #Tableau

1/ Creating an arc diagram was made very easy with Ken’s Flerlage workbook and instructions shared on his blog

Close up of an arc diagram graph that aims at showing how Buffy is a show very well written. The show contains plenty of payoffs and foreshadows.

2/ Trend line appearing / disappearing depending on selection:

Close up of a line chart graph that shows the ratings of Buffy’s episodes throughout 7 seasons. The intention is to show that the ratings remain overall good, and don’t get worse in time and also that the finale episode of each season always receive a high rating, because the show always makes sure to end with a bang and a sense of closure.

I asked help on Tableau’s forum (thanks to Lei Chen for her reply)

I also got inspired by

Andy Kriebel’s tutorial on Using Parameter Actions to Choose a Chart Type
Kevin Flerlage’s video on how to Dynamically Show & Hide Filters & Parameters Based on Another Parameter Selection

3/ Creating a network graph was much more complex. I ended up following 3 tutorials in parallel. The first one is totally amazing but the following ones explain certain steps a bit more in depth. So in order of creation, I would recommend to view

Close up of a network graph that places Buffy at the centre and shows connexions with pop culture. Three colours correspond to three types of connexion
1/ in grey: when Buffy refers to another TV series, movie or pop culture reference
2/ in blue, when Buffy is a pop culture reference in another TV series or a movie
3/ in red, when it's both: when Buffy mentions a pop culture reference and the same pop culture reference refers to Buffy. The graph shows it's the case with the X-files, the Simpsons, Xena and Star Trek — https://public.tableau.com/views/Six_reasons_to_watch_Buffy/BUFFY?:language=en-GB&:display_count=n&:origin=viz_share_link&:showVizHome=no#1

Chris from the Data Surfers’s tutorial on How to use Gephi to create Network Visualizations for Tableau.
Kim Tricker build on that on Vizartpandey.com
Very similar use case by Apoorv Yadav on Medium.com
Dr Alan Shaw’s fundamentals of Gephi on YouTube helped me understand Gephi a bit more

#5 Getting feedback

#vizofficehours #datafam

One day, I will write a whole blog about how to get feedback often and early on. The long story short is that I got feedback from both industry experts (in this case: my friends who are Buffy fans) and dataviz experts.

Like I did with my Eurovision viz, I went to Michelle Frayman and Zaks Geis‘ weekly #vizofficehours ; they provided great tips and guidance on what to focus on. If you are in a “I know there’s something wrong but I cannot put my finger on it“, I would encourage you to attend.

In the context of IronViz, Sarah Bartlett and the datafam organised additional ad hoc office hours, so I had also the feedback of Jacqui Moore and Zach Bowers.

I illustrated how I use their feedback in this Twitter thread.

That’s all folks, drop a comment if you have any question 🙂