Design Delights: Fun with Borders

Effective use of color in data viz is key. But what happens when you have a viz where you need one color per person, and you have over 15 people? That was the problem I came across when creating Epic.

I wanted to use a chord chart, to represent who talks to whom. To do this, you connect the two people talking with a chord; each end is sized based on how many words they said to each other. In the graph above, Athena’s chord to Odysseus is red and it’s bigger on her end than on Odysseus’ end. That means that she spoke to Odysseus more than he spoke to her. The chords are colored by who spoke more to who, meaning that we do need one color per person in order to identify who spoke more.

I broke out who talked to who into the different sagas to show the progression of the story. That, combined with the sheer number of people speaking, meant I needed a lot of color, which goes against all data viz best practices.

On top of that, some people speak in multiple sagas, especially Odysseus. Another data viz principle is to make sure each color means one thing in a viz. But if I did that, then my colors were going to get really scrambled around, and I felt I would have lost the cohesion instead of reinforcing it by keeping each person with one color throughout.

After talking it through with the great Jessica Moon, I came up with a solution: creative use of borders. I knew I wanted to focus on Odysseus’ story, and I wanted to use the color from each saga’s album to show that each was a unique story. So I decided to highlight each bar and chord in white, to make since lines stand out without reusing color.

So how’d I do that? First, let’s start with the bars. The bars and pies are created using the Flerlage Twin’s blog here. I put them in one sheet instead of two. That is the min(1) placeholder. Then I created a dual axis.

The first pill, SUM([Word Count]), is just the number of words each person speaks. The magic comes in the second pill, Word Count for Border.

This will create one bar for Odysseus and then every other bar is null. I made sure everything was sorted in the same order, then made them a dual axis and sychronized them. From there, I made the bar color transparent (if you don’t know the magic of a transparent hex code, check out this blog!) and then made the border white. Because I used the transparent color, the border would still show up even though the inside wouldn’t. And there you have it, a bar chart with one bar highlighted with a border!

The chord chart … wasn’t as easy, but uses the same principles.

The chord chart is actually 3 charts layered on top of each other. I used La DataViz’s AdvViz creator to make the charts. After creating the chart, I duplicated the chart three times. The first is just the chord chart, as is.

The second keeps only the lines for Odysseus, and the Null values which ensure the chart keeps the same axis size as the full chart. Then I made the border white.

Then the third chart is the same as the first, except every color is transparent, with no border. That is the top layer because it means we can use it for tooltips; since the second only has Odysseus, we wouldn’t have been able to use the tooltips for everyone else.

And there you have it! Unique uses of borders and colors to tell Odysseus’ story.