A Game of Data Visualizations: Making Alluvial Diagrams Without Code

I did my best to categorize each character’s arc as accurately as possible.

So if you’re a super-fan with a more-correct understanding of the show’s progression, please by all means take the csv and correct/use for your own purposes!For those interested in the how-to aspects of the tools involved, a bit more context before getting into the specifics.

Intended Audience and Other ApproachesAs implied, RAWGraphs and Lucidcharts are extremely easy to use.

The intended audience for the below are non-coders with spreadsheet/flat-file based reporting and presentation responsibilities.

For the code-minded, there are numerous different packages, libraries, etc.

, that can produce alluvial diagrams.

For my fellow R aficionados, I’d recommend the ggaluvial package.

It’s built specifically within the principles of the tidyverse, and as its familiar two-character prefix implies, it works seamlessly with ggplot2.

Additionally, code-based GoT data visualization projects are a tried-and-true genre.

One of my favorites is 32 Game of Thrones Data Visualizations, by Jeffrey Lancaster.

Definitely check it out if you’re interested in pursuing something along those lines.

Back to the non-coders though, I think you’ll find RAWGraphs extremely useful, given it’s positioning as “the missing link between spreadsheets and data visualization.

” As long as you can structure data properly in a spreadsheet, you will surprise both your selves and your audiences alike with the kind of visualizations you’ll soon be able to belt out.

Serving as a nice complement to RAWGraphs, Lucidcharts is great for process depiction and other diagramming needs.

Essentially a web-based, slightly-more-open version of Microsoft Visio, it’s become a key part of my personal production process.

As mentioned, both have their own great set of tutorials to get you started with your initial work:RAWGraphs: How to make an alluvial diagramLucidcharts: The Beginner’s Guide to LucidchartNow let’s take a look at the specifics of the diagram that I made in RAWGraphs, as well as the summary text and other presentation aesthetics I used to round out the finished-product infographic in Lucidcharts.

Sourcing and Structuring the DataAlluvial diagrams are named so because the flow bands resemble the naturally occurring alluvial fans that form from sediment deposits left by rivers and streams.

They are similar to Sankey diagrams, that depict weighted system transfers and flows.

The most famous example of a Sankey diagram is the Minard Map (which actually pre-dates the Sankey name and namesake by a few decades), depicting troop counts and movements during Napoleon’s disastrous Russian Campaign of 1812:Updated (and translated) version of the Minard Map, link to the original hereLike a Sankey, Alluvial diagrams consist of flows (i.

e.

the alluvium) between segmented blocks of nodes.

That block segmentation can be determined by most any form of organization: spatial, date/time, process step, milestone, etc.

Between each block, the flows of an Alluvial diagram show the changes in node composition between each block.

Everything I wrote in the preceding few sentences will seem to be complete and utter gibberish if this is your first exposure to the subject, so, let’s just look at an extremely simplified example.

Assume a table where the first column consists of nondescript things.

Then assume that, in some unnamed/undocumented/purpose-less process, those things switch between different nodes at different steps (blocks) in the process:Thing# Step 1 Step 2 Step 3 Step 41 Node 1 Node 1 Node 2 Node 42 Node 1 Node 3 Node 2 Node 43 Node 3 Node 3 Node 3 Node 34 Node 2 Node 3 Node 2 Node 35 Node 3 Node 2 Node 2 Node 36 Node 4 Node 3 Node 2 Node 37 Node 4 Node 3 Node 2 Node 28 Node 4 Node 4 Node 3 Node 19 Node 3 Node 1 Node 2 Node 310 Node 3 Node 1 Node 2 Node 4After copying/pasting the above into RAWGraphs input box, selecting “Alluvial Diagram”, and then finally dragging/dropping each step into place, you should arrive at the following:The 4 vertical (disjointed) black lines are the blocks, and all of the nodes are labeled.

The auto-colored alluvial streams connect each node, shifting in thickness to reflect node weight changes between block.

Pretty awesome… albeit generic.

Enter the much more interesting and tangible material that is Game of Thrones.

Recalling back to the section-header, we sort of had to cover the Structuring of the data first, but are now on to the Sourcing.

Nothing fancy here.

I simply went to GoT’s IMDb cast list, click-dragged the 740+ rows from Peter Dinklage on down to Noah Syndergaard (ha), and then copy/pasted it all into an Excel sheet (use Paste Special → Unicode unless you want to crash Excel with headshots).

I also had to manually add rows for the dragons & direwolves, given their cgi-driven lack of IMDb credits.

It took a bit of cleanup from there, which you can see here under the “Col_split” tab in one of my working files.

Once I had the names and episode counts parsed out, I added new columns for my blocks: “Origin”, “Starting Affiliation”, and then several more for “Affiliation at End of” each season.

I used the term affiliation here because I thought allegiance is too strong a term for many of the best characters.

Case-in-point:Within each block, I assigned the node-values based on whatever leader, house, or other faction/status that I thought the character was primarily affiliated with at the end of each season.

This included the status of being Deceased, an unsurprisingly common “affiliation.

”Consistent with la famiglia take on the show’s popularity, I used the “Origin” values to point back to the Major Houses that most of the characters came from.

Across all blocks, I used generic “Other” categories (split by the show’s two fictional continents) to represent affiliation with smaller, more niche groups, or for those who’s status and whereabouts are straight-up unknown.

Again, I assigned all of these based on my own viewing of the show, so I’m sure there are plenty of mis-interpretations and outright errors.

Super-fans: if you find any that are particularly egregious, please don’t kill me (or worse).

Making the Alluvial diagramUltimately, I came up with a “clean” and complete table of some 480+ rows.

I stopped short of categorizing all the characters because it became a bit time consuming, and otherwise I didn’t see much relevancy in the affiliations of “Brothel Child #2” or “King’s Landing Rioter” numbers #1- #3 (real characters, look ’em up).

Once ready, I simply copy/pasted the table into RAWGraph’s input box and then went on to quickly configure the chart:After adjusting all the width and height values, I made sure that the Sort by parameter was set to Size.

As you can see above, I used the “Episodes” column because I thought that each character’s individual alluvial band should be proportional to his or her importance to the show.

Also, the tool allows you to manually select colors for each alluvial band segment, but I left them alone because I think the auto-selections look pretty good.

While configuring all of this, I would occasionally notice errors that had to be fixed back in the original table.

A bit annoyingly, I found that the chart, Steps, and Size selections reset after each new copy/paste.

However, any inconvenience from that is more than made up for by how ridiculously easy RAWGraphs is to use in the first place.

Finishing the Infographic in LucidchartsThe .

png output from RAWGraphs is easy to load into Lucidcharts by either manual selection or drag-and-drop, and even retains its transparency setting (“Links Opacity” attribute).

Once the diagram was in, it was super easy to build, shape, and arrange all of the other infographic elements around it.

Within the Page Settings sidebar, you’re able to quickly fine-tune the grid, guide, and snap settings, minimizing the time you’d otherwise be spending extra clicks on “Align to”:Lines and arrows are generally easy to create and manipulate as well.

Hovering your mouse around the edge of any given figure reveals a red dot: clicking and pulling these will result in an arrow, or what ever your default line is (to set the default line, just adjust the line settings when no shapes are selected).

For curved lines, the point-direction handles illuminate when you click it, allowing you to immediately change the curve shape without having to right-click or use any other additional keystroke to initiate edits.

Another nice feature is Lucidchart’s Upload Font capability.

After finding a free approximation of GoT’s ultra-cool title font, it took just a few clicks to bring it in through the Font Manager:While taking the above screenshot, I just realized that the author had even mapped the actual logo to “SHIFT + 3” (the one with the T-stroke covering the whole of “Thrones”).

Mine in the title was just spelled out.

Oh well, too late to change now.

Lastly, I’ve come to really appreciate Lucidchart’s “Download as” options:Though not relevant here, I routinely use the “PNG with transparent background” option.

Additionally, if you need back-compatibility or the option to send your works-in-progress via email, “Download As → Visio (VDX)” is very handy.

After someone’s Visio edits, vdx files can be easily re-uploaded with the “Import → Import Visio” option on the main “Documents” page.

ConclusionAll-in-all, I had a lot of fun making this, and really enjoyed following the shifting flows of Game of Thrones character affiliations in the output diagram.

As a fan of the show, some of them were really interesting to spot and follow along with [SPOILERS again, but if you’ve made it this far, come on…]:The degree to which each Major House comprised/contributed to the Night’s Watch from “Origin” to “Starting Affiliation”Jon Snow and (per my interpretation) The Mountain’s movements to-and-from the Deceased nodes.

One of the dragons going over to the Night King.

The Deceased category itself growing laughably dominant by the most recent season.

And there are probably many more that I’ve failed to note here.

Regardless, I hope you enjoy the diagram as much as I did, and hope you find these RAWGraphs and Lucidchart tips useful as well.

Both tools provide a ton of fun and easy-to-use charting capabilities that should be enormously useful in your day-to-day.

Thank you so much for reading.

I wish you good fortune in the diagramming efforts to come.

-Matt.

. More details

Leave a Reply