Datapicta logo
Stranger Things

Who doesn't love a good TV series? In this tutorial we will create a heatmap chart with cell elements showing the IMDb rating of each episode of Netflix's blockbuster Stranger Things. We will also add a custom tooltip for the cells to show the episode name and release date.

The data we use for this chart was downloaded from IMDb. This webpage provides an export option to download the data in CSV (comma separated values) format. We stripped some unnecessary columns from this dataset and copied the spreadsheet into this tutorial.

Season,Episode,Title,IMDb Rating,Year,Release Date
1,1,Stranger Things: Chapter One: The Vanishing of Will Byers,8.5,2016,7/15/2016
1,2,Stranger Things: Chapter Two: The Weirdo on Maple Street,8.4,2016,7/15/2016
1,3,"Stranger Things: Chapter Three: Holly, Jolly",8.8,2016,7/15/2016
1,4,Stranger Things: Chapter Four: The Body,8.9,2016,7/15/2016
1,5,Stranger Things: Chapter Five: The Flea and the Acrobat,8.6,2016,7/15/2016
1,6,Stranger Things: Chapter Six: The Monster,8.8,2016,7/15/2016
1,7,Stranger Things: Chapter Seven: The Bathtub,9,2016,7/15/2016
1,8,Stranger Things: Chapter Eight: The Upside Down,9.3,2016,7/15/2016
2,1,Stranger Things: Chapter One: MADMAX,8.1,2017,10/27/2017
2,2,"Stranger Things: Chapter Two: Trick or Treat, Freak",8.3,2017,10/27/2017
2,3,Stranger Things: Chapter Three: The Pollywog,8.5,2017,10/27/2017
2,4,Stranger Things: Chapter Four: Will the Wise,8.5,2017,10/27/2017
2,5,Stranger Things: Chapter Five: Dig Dug,8.8,2017,10/27/2017
2,6,Stranger Things: Chapter Six: The Spy,9.1,2017,10/27/2017
2,7,Stranger Things: Chapter Seven: The Lost Sister,6.1,2017,10/27/2017
2,8,Stranger Things: Chapter Eight: The Mind Flayer,9.2,2017,10/27/2017
2,9,Stranger Things: Chapter Nine: The Gate,9.3,2017,10/27/2017
3,1,"Stranger Things: Chapter One: Suzie, Do You Copy?",7.8,2019,7/4/2019
3,2,Stranger Things: Chapter Two: The Mall Rats,7.9,2019,7/4/2019
3,3,Stranger Things: Chapter Three: The Case of the Missing Lifeguard,8.2,2019,7/4/2019
3,4,Stranger Things: Chapter Four: The Sauna Test,8.8,2019,7/4/2019
3,5,Stranger Things: Chapter Five: The Flayed,8.5,2019,7/4/2019
3,6,Stranger Things: Chapter Six: E Pluribus Unum,8.5,2019,7/4/2019
3,7,Stranger Things: Chapter Seven: The Bite,8.7,2019,7/4/2019
3,8,Stranger Things: Chapter Eight: The Battle of Starcourt,9.2,2019,7/4/2019
4,1,Stranger Things: Chapter One: The Hellfire Club,8.1,2022,5/27/2022
4,2,Stranger Things: Chapter Two: Vecna's Curse,8.1,2022,5/27/2022
4,3,Stranger Things: Chapter Three: The Monster and the Superhero,8.3,2022,5/27/2022
4,4,Stranger Things: Chapter Four: Dear Billy,9.5,2022,5/27/2022
4,5,Stranger Things: Chapter Five: The Nina Project,8.1,2022,5/27/2022
4,6,Stranger Things: Chapter Six: The Dive,8.5,2022,5/27/2022
4,7,Stranger Things: Chapter Seven: The Massacre at Hawkins Lab,9.6,2022,5/27/2022
4,8,Stranger Things: Chapter Eight: Papa,8.6,2022,7/1/2022
4,9,Stranger Things: Chapter Nine: The Piggyback,9.1,2022,7/1/2022

Use this data in DataPicta

  • Copy the data from the table above to your clipboard
  • Open the DataPicta app (click the link)
  • Click on DATA to add a new dataset
  • Paste the data from your clipboard into the text area
  • Name the dataset Stranger Things
  • Click on Parse to parse the data

You should see a preview of the data in a table.

Create the heatmap

A heatmap chart is a great way to visualize data in a grid format. In this case, we will use the Season and Episode columns as the x and y axes, respectively. We will use the IMDb Rating column as the color scale.

  • Click on Elements to add the first element
  • Select Cell as the element type
  • In the new panel that appears, click on X-axis and select Episode
  • Click on Y-axis and select Season
  • Click on Fill color and select IMDb Rating

Use the color scale

The color represents the IMDb rating of each episode, but they look a bit unorganized right now. To make the colors more meaningful, we will use blue to green color palette, where greener colors represent higher ratings.

  • Click on Scales
  • Pick the Color scale
  • In the new panel click on the palette icon to see the available color schemes
  • Choose ByGn (blue to green)

To use the range of colors in this theme better we can set the domain of the ratings to be between 5 and 10.

  • Click on the Common tab
  • Set the Min domain to 5
  • Set the Max domain to 10

Add the rating labels

To make the chart more informative, we will add the IMDb rating as a label on each cell.

  • Click on Elements to add a new element
  • Select Text as the element type
  • In the new panel that appears, click on X-axis and select Episode
  • Click on Y-axis and select Season
  • Click on Text and select IMDb Rating
  • Click on the Styling tab
  • Set the Font size to 20
  • Set the Fill color to white

This already looks much better, but there is one cell where the white text is not nicely visible, and that is S2E7. We can fix this by setting the text color to black for this cell only. We do this by adding another text element with almost the same settings as above, but with a black color. Since this new element is very simular we can copy the previous one and change the color.

  • Press the duplicate icon of the text element
  • Rename the first text element to IMDb Rating white
  • Rename the second text element to IMDb Rating black
  • In the IMDb Rating black element, click on the Styling tab
  • Set the Fill color to black

Currently, the black text is on top of the white text, making all cells having black text. You can play with the up and down arrows to change the order of the elements to order of the elements. But what we really want is to set the black text to be used only for the S2E7 cell and all the other cells should use the white text. The cell in S2E7 has a rating lower than 7, the rest is higher. We will use that condition for the text elements. For the IMDb Rating white element, we will create a formula to hide the text when the rating is lower than 7. That formula is:

if (datum['IMDb Rating'] > 7) return datum['IMDb Rating']; else return '';

What this formula does is to check if the rating is higher than 7, if it is, it returns the rating, otherwise it returns an empty string. This way, the text will be hidden for the S2E7 cell. For the IMDb Rating black element we will create a formula to show the text only when the rating is lower than 7. That formula is:

if (datum['IMDb Rating'] < 7) return datum['IMDb Rating']; else return '';

Add the tooltips

To make the chart even more informative, we will add a tooltip to show the episode name and release date when hovering over the cells.

  • Open the Cell element and click on Style
  • At the Tooltip section, set Show to Default

When you hover over the cells, you will see the default tooltip with the cell value. Default tooltips show all scales that are in use, which are the X-axis, Y-axis and Color scales in this case. But we want to show the Title and Release Date columns instead.

  • Set Show to Custom
  • Enable the Title and Release Date checkboxes

When you hover over the cells, you will see the title and release date of the episode. All titles start with Stranger Things: Chapter ...:, which is a bit redundant and makes the episode name fall off. We can remove that part of the title by using a formula to show only the episode name.

return datum.split(':')[2].trim();

This formula splits the title by the colon character and returns the third part of the string, which is the episode name. The trim() function removes any leading or trailing whitespace from the string.

  • Type the formula in the Formula Field of the Title

When you hover over the cells, you will see the episode name and release date of the episode. To make the release nicely line up with the title we can change the Release Date to just Date

  • Type Date in the Custom name Field of the Release Date

Set the aspect ratio and title of the chart

To make the cells more square, we can set the aspect ratio of the chart to 2:1

  • Click on Canvas
  • Choose Size and margin
  • Set the Aspect ratio to 2:1

To make the chart more informative, we can add a title and a caption to the chart.

  • Click on Canvas
  • Choose Title, subtitle and caption
  • Set the Title to Stranger Things IMDb Ratings
  • Set the Caption to Source: IMDb.com

At last you might want to move the x-axis to the top of the chart

  • Click on Scales
  • Click on X-axis
  • Set the Location to top