Game of Thrones at a Glance: An Interactive Dashboard of Battle and Screen Time
Game of thrones (GoT) is one of the most popular television series of the decade. It has become a global phenomenon, one of the biggest pop-culture events; people build their lives around this program. GoT script or even the books is a valuable source to gain insight. People create data modelling out of it to predict the fate of a character due to the unpredictable outcome of its episodes. Some use it to describe a specific event, to depict character relation, to visualize family tree of each house.
The series has now come to an end. Data enthusiasts around the globe rally to uncover GoT data in every possible way. In celebration of the show final season, tableau public held over 500 record of data visualization for keyword ‘Game of Thrones’ with more than 80 of them were published this year.
Tokopedia BI team joined to mark the final season. In our monthly Tableau Public dashboard we explore GoT data taking perspective in its Battle and Screen time. It consists of:
- Visualization of the battle (interactive map and gauge chart of contenders’ information and strength)
- Visualization of screen time (interactive spiral chart with information of all characters)
Have a read on how Tokopedia BI team created this dashboard of GoT!
The Dataset
Prior to the visualization, we need datasets to begin with. Here are the datasets that we picked:
- Battle data — available in Chris Albon github page, titled War of the five kings dataset.
- Screen time data — taken from Jeffrey Lancaster github page which is one of the most complete collections of GoT data.
After finding the datasets, here are some steps that we did.
- Inspected the data whether it resembles the valid and correct information. We found discrepancies between Chris Albon’s Battle data and the battle information on ASOIAF wiki page.
- Then we made some corrections, such as, the King to whom a house was defending/attacking for, estimation of the army size, and allies of the defender/ attacker house.
- Adjusted the file type.
- Transformed all format to csv for uniformity.
The Map
The battle data consists of wars in the Westeros — Western island in GOT universe. Therefore, we only use map of Westeros for this visualization. To create this map, we:
- Took a sample of Map of the Westeros from Google Image and modified it to follow the dashboard’s color palette,
- Determined coordinates of war locations by using mapping tools provided here.
- Place each point of war locations based on the information here.
The result was X and Y coordinates which were then added to Battle data in which each line represents specific war location.
The Gauge Chart
Gauge chart depicts the percentage of army size for attacker and defender. It is essentially a half-size donut chart. A pie chart in Tableau by default starts at 12:00 position of a circle. It needs a bit of modification to get it to start at 9:00 or 0 degrees. Visualization expert, Ken Flerlage, explain how this can be achieved in his article.
In principle, a pie chart is sliced into 5 parts. Each slice will have its own calculated field:
- Slice 1 starts at 12:00 and ending between 12:00 and 3:00,
- Slice 2 starting and ending somewhere between 12:00 and 3:00 after slice 1,
- Slice 3 is a hidden slice which starting at 3:00 and ending at 9:00,
- Slice 4 starting at 9:00 and ending between 9:00 and 12:00, and
- Slice 5 starts and ends at somewhere between 9:00 and 12:00 after slice 4.
First we create a parameter which will be used to calculate value of each slice. We used percentage from attacker point of view.
To determine the value of each slice, we create measures based on the percentage. Measures were specified into five value slice.
- Value slice 1 is if percentage more than 50% then percentage minus 50% else 0.
- Value slice 2 is if percentage more than 50% then 1 minus percentage else 50%.
- Value slice 3 is 1.
- Value slice 4 is if percentage is less than 50% then percentage else 50%.
- Lastly, value slice 5 is if percentage less than 50% then 50% minus value slice 4 else 0.
All these values were then combined into single measure using case when syntax, with Slice attribute as the condition.
Finally, the attacker and the defender needed to be distinguished based on color, thus a case when syntax with slice number as condition.
Finally, put Number of Records in Rows and set it to Dual Axis. Also, drag Chart Value to size, Color to colors, and Slice and Number of Records to detail.
The Spiral Chart
Spiral chart is used for visualization of total screen time of each GOT character from season 1 to season 6. Why use spiral chart rather than simple bar or line chart? GOT has numerous characters and episodes. Displaying them in a spiral chart is a reasonable way of saving space, while using bar or line chart would be resulted in a lengthy horizontal axis, not quite blending with current style of GOT dashboard. We follow Neil’s tutorial and brief explanation about spiral chart here .
From data perspective, GOT is quite different from Neil’s twitter data. Twitter data is very granular in that the tweets were recorded hourly or even less. While GOT data contains no timeline or date. It is composed of a list of episodes and character names. That’s why we need to make some adjustments to GOT data without making it less meaningful.
Create a dummy date and place them in the dataset. Unique date for each character. This is needed to plot each circle and to determine the distance between spirals.
Get the integer part of day from the dummy date previously created using datepart syntax.
Then, we need to get a sequential number from our dummy date using month syntax.
Next we need to define angle. In his blog, Neil use twitter dataset which comprise of tens of thousands of tweets; way bigger dataset than ours. So, it is practical for him to use radians (2 Pi) to create a perfect circle. While in our case, using radian resulted in a less-than-a-quarter circle due to limited resources. Therefore, we need to experiment on every possible integer to create a decent circle. It turned out that 30,000 * Pi set a correct position for each point which construct a satisfactory spiral chart.
After that, we need to plot X and Y to get an approximation of area where each point will be placed. Using trigonometry in combination with two determining factor, we will get desired position of the spiral chart. The two determining factor are inner and parameter. Inner will set position of the spiral chart. The bigger inner number, the further away spiral chart is from the center coordinate. Parameter sets the gap between spiral layers.
Put Y in Column shelf, X in Row shelf and drag screen time to Size. Also, drag Name, Episodes, Site, Link and Portrayed by Name to Detail. We set Inner to 10 and parameter to 4 to get below spiral chart.
Each turn of the spiral is the frequency of a character appearance during season 1 to season 6. It was divided into 6 parts which describes the total 6 seasons of GoT where the outermost layer is characters with the most screen time, while the innermost layer is characters with the least screen time.
This article is intended for readers to get a brief knowledge of how to create graphs we use in the dashboard. In order to replicate these graphs, we suggest that readers would also visit all references provided to fully grasp the theory behind them. Thus, modifying it to readers’ own objectives.
So, which house won the most battle? Who appeared the most frequently from season 1 to season 6? Visit our page, interact with the graphs and find out the answer! Thank you for reading.
