Characters in the Iliad

Recently I decided to read The Iliad, by Homer. Don’t ask me why, but I just felt possessed. If you’ve never read The Iliad, let me tell you there are a crapload of characters mentioned in the 459 pages of text. All of them with crazy old names like Menelaus, Patroclus, Agamemnon, etc. After even a few pages your head starts swirling and eyelids start dropping. (Incidentally, I highly recommend this book as a sleep aid.)

As I was reading, I kept having this thought that there must be an easy way to keep track of all these characters in some visual way. Something that would tell you, chapter by chapter, who are the most important characters to keep track of and whom you can let slip out of your mind.

Today I decided to take a quick try at using JavaScript to create a automated visual breakdown of all the characters in the book from start to finish. Here’s what I did:

  1. Downloaded The Iliad as a plain text file.
    There are several sources for downloading public domain books for free such as Project Gutenberg.
  2. Used JavaScript to find every word that started with a capital letter.
    Capitalized words are typically either characters, places, other proper nouns, or the beginning of a sentence. I used a bit of code to exclude words at the beginning of a sentence and also eliminated one letter words like “I”.
  3. Divided up these words according to the chapter in which they appear.
  4. Counted each occurrence of the word and used that number to adjust the font size of that word on the page. (Sort of like a tag cloud)
  5. Put the most frequently used words on top.

And I got something like this:

Screen Shot 2014-08-17 at 5.04.15 PM

Well, that was fun, but what’s the point? Well, several things can now be observed at a glance as a result of this visualization:

  1. You can quickly see the main characters involved in the story: Acheans, Trojans, Achilles, Agamemnon, etc. Even before you’ve started reading, a basic character visualization such as this can give you some of the big picture. This is great, because when you start reading you’re brain will naturally pick up on the words that you need to pay attention to and ignore the ones that are less important.
  2. You can start to see the focus of the chapters and the rise and fall of characters. I won’t give anything away, but in Chapter 16, Patroclus plays a big part then afterwards, not so much. You can see this clearly in the visualization:
    Screen Shot 2014-08-17 at 5.20.03 PM
  3. You can also observe other small things like the fact that there is a ton of characters mentioned by name in Chapter 2, but most of them are only mentioned once and so you can pretty much skip over them. Chapter 2 has a rather lengthy section which describes the names and history of practically every single dude in the entire Greek army. It’s a bit tedious.

But the great thing is, this is just the beginning. Because this visualization is generated automatically by dissecting  the text with code, it can be easily tweaked to create a visualization of any book. Having a visualization such as this next to you while you read a book like The Iliad can really help understanding and keep you focused.

My next step will be to create an interactive element to it so you can get a visualization of any book. Also, there’s lots more to do as far as adding more relevant information besides just names. It could also be tweaked to be less chapter specific and show instead the most important characters in the book as a whole.

Check it the The Iliad visualization v1.0 »


A graphic history of US Presidents

I’ve got a weird thing for timelines. Like, if timelines were a person, they’d probably have a restraining order against me. When I was in school, learning about history, I always felt like I was missing the context of what we were learning about. Where it fit in the big picture. Timelines are great for taking a step back and seeing something as part of a whole.

I’ve been working on this timeline of US Presidents off and on for a long time now and it’s not done yet, but it’s worth showing. A few things I wanted this timeline to show at a glance were:

  1. An overview of presidential terms, who’s served longest, shortest, etc.
  2. How many terms ended in deaths and/or assassinations.
  3. What presidents served during which wars and other notable periods (ie: Prohibition)
  4. How have the length of wars changed over time?

Here it is so far, still not quite there yet, but I welcome anyone’s feedback. (Click thru to view it full size as an SVG, on which you can zoom in and out with your browsers zoom controls.)


A Blackjack Chart Tufte Would Be Proud Of

At some point in the past year I really got into blackjack. If you think you’ll ever find yourself in a casino with time to kill, this is a great game to know and if you memorize some basic strategy rules you can reduce the casino edge to only 0.25%. Earlier this year, I set out to do just that, but the problem I ran into is that most blackjack strategy charts out there are some of the worst examples of information graphics in existence.

Existing Charts

Garish colors, poorly thought out layouts and just plain bad design. See the following screenshot of a Google image search:

blackjack charts


Rather than mistreat my delicate designer eyes by staring at these things, I decided to design my own. Softer colors, more meaningful abbreviations, and clear division of sections were quick changes that made a big difference in readability. If you are well-versed in blackjack, then skip straight down to the design dissection section.

How blackjack works (in a nutshell)

I’ll attempt to explain just enough about blackjack here so you understand the design choices, but I’d encourage you to check out the game in more depth elsewhere because it’s great fun when you know how. You play against the dealer (not others at your table) and you attempt to get as close to 21 without going over. The key thing to know about blackjack when looking at the chart is: you are dealt 2 cards face up and the dealer is dealt 2 cards with just one facing up. Depending on the combination of the sum of your cards (shown down the side) and the dealers up card (across the top) you need to hit, stand, double down or split. For each combination there is a statistically-preferred action to take which gives you the best possible odds. Memorizing what do to do and when can reduce the casino edge to around 0.25% which means you and the casino are almost equally matched. Throw in a few free cocktails and you can come out ahead and have fun doing it.

My chart design


Design Dissection

What makes it so great? Here’s a few key improvements:

  1. Color
    Softer less saturated colors are easier on the eyes. I kept the basic idea, from some existing charts, of “red means stop, green means go” when I choose background colors to indicate action. “Stand” is red, “Hit” is light green, “Double Down” is darker green. Extra green means extra “go”, in a sense, because “Double Down” means we are doubling our bet. Using that logic, though, it was tough to determine what color to use for “Split”, which also involves a doubling of your bet if you have 2 of the same card (ie: a pair of eights). In theory it should also be green, but with 3 greens I thought there would be too little differentiation between them so I choose a light blue instead. The blue is still far away from the “red means stop” of the stand colors.
  2. Subtle Divisions
    One of the more common information graphics blunders when using data tables such as this is to divide each cell with a thick black line. The result is that the viewer focuses on the dividing lines rather than the information within the cells. Tufte calls this an “information prison”. Here I use a thin white line to divide the cells which recedes to the background especially among the softer background colors of the cells.
  3. Meaningful Abbreviations: Sp, St, D, H
    Most other charts abbreviate the words “split”,”stand”, etc within each cell, and each chart that does so runs into the question “Should ‘S’ equal ‘Stand’ or ‘Split’?”. Some charts solve this problem by using “P” for split, which I think is extremely confusing. Others use “SP” for split and “S” for stand, which is also troublesome because if you are are only looking at the upper portion of the chart, it’s unclear whether “S” means stand or split. Only by looking down to the bottom of the chart will you understand that “SP” is split and so by default “S” must be stand (?). I solve this problem with two letters for both stand and split, reducing the amount of looking around the viewer must do in order to get the needed information. In addition, I use lowercase for the second letter as I feel this better indicates that is is the beginning of one word and not an abbreviation of two.
  4. Intelligent sections
    If you are using this chart during an actual game, you are most frequently going to use the top section. You’ll only use the Aces and Pairs sections if you have those cards in your hand. Creating a subtle division between the 3 sections allows you to quickly find the section you need (and ignore those you don’t) based on the cards in your hand.
  5. No explanatory headings
    Those not familiar with the game might be confused initially by this chart because there are no labels to indicate that your card totals are down the side and the dealers up cards are across the top. I originally made this chart for myself alone, but even for others, it makes sense to remove those headings as they are either easily explained off the chart or, for regular players, could be easily figured out. If headings or labels were placed on the chart it would add clutter to the chart that would only be useful on the very first viewing and then superfluous afterwards. Also, I designed the chart to fit on a wallet sized card if the viewer wanted to take it with them to use at the tables (which is allowed, btw). Removing the headings allows the rest of the content to be larger and more easily read.