Making of A Year of Scrabble

Note: This was a guest post on Data Sketches—a collaboration between by Nadieh Bremer and Shirly Wu wherein they created 24 data visualization projects on a wide variety of topics that interested them. This post was been reproduced here with their permission on December 11, 2020 and backdated with the date of the original release.

---

When Shirley and Nadieh asked me to make a guest post for Data Sketches, I jumped at the opportunity but immediately panicked a little because I had agreed to the daunting task of creating something like their wonderful projects over the past six months. Whether or not that happened will be left to the reader but below is the story of how it came to be.

Year 1 | data

Unlike many of my projects, I didn’t need to start by collecting data because I had already done so...three years ago. Maybe I knew one day I would do more with it. Back in 2013, when I just started getting seriously interested in the artistic side of data visualization, I did what any newly-obsessed data junky would do: I picked a familiar subject and tracked it obsessively.

Taking a step back, it’s important to mention that I play a lot of Scrabble. The game has been part of my family since before I was. My grandmother has is a force to be reckoned with in the game, my father has played for ages, and both of them taught me when I was about 12 as a way to build my language and math skills. (My father was an English teacher and I was always the scorekeeper.) They never let me win and for that I’m thankful but during the early years, they were formidable opponents—and still are!

Fast forward to 2013. I decided to track the weekly games with my father—hoping to chart our scores and find interesting patterns in our playing styles. After each game, I diligently entered the score data into my own MySQL database to query and generate a bare bones dashboard.

I wish I had the foresight to track which words were played and did so for the first two games of 2014 but lost motivation because I was prolonging each game by pausing after each turn to record which word was played, where it was played, and how many points it was worth. I did take a few pictures of the final boards though:

Days 1 and 2 | “sketching”

The day I was asked to work on a project about nostalgia, one of my first thoughts was that Scrabble dataset. It was personal, made me think of good times, and was detailed enough to generate some interesting results.

My goal was to explore the variety of points earned in each turn rather than who won or lost. I enjoy working with more experimental ways of visualizing data than creating graphics that strictly inform—though I do enjoy a well-made chart.

I’ve never felt sketching out ideas on paper worked for me. I enjoy seeing others’ sketches and have nothing against it but I do most “sketching” in my mind and feel sketching on paper slows me down. I enjoy brainstorming with real data—either a sample or the full set—to see if my ideas are realistic before polishing them. NodeBox is great for this because I don’t get bogged down with coding and I can see instant results after creating a few nodes to manipulate the data. Density Design’s Raw is another tool I frequently use. With every new idea that pops in my head, I save a new version so my “sketches” are reusable and adjustable if I want to examine a new direction based on an earlier version.

My first idea was to take the turn-by-turn step charts from my original dashboard and overlap them to see if any general trends emerged beyond the obvious. Seeing the result was personally satisfying but not very visually interesting. I left it be without bothering to add the steps.

Next, I wanted to see exactly when I played Scrabble throughout the year so I made an ugly but informative “date wheel” just showing dates of each game. I was surprised to see the large gaps since I thought we played just about every week. Some were expected like when I took vacations with family but the two in late winter/early spring were unexpected. I think those gaps were when my father was traveling at conferences or visiting friends.

The next logical step was to combine the first two sketches and see the turn-by-turn charts on the date wheel. The image below shows that but confused me at first because the gaps weren’t in the same spots as before. Then I realized that the lines weren’t straight but angled at about 45 degrees from each point—so they were in the correct spots but the angles shifted the gaps. This version reminded me of those plasma globe toys.

Differentiating games from one another was difficult so I created straight spokes around the wheel with circles representing each turn, color-coded by player and sized based on how many points were earned. Distance from the center corresponded to which turn was played (first turn closest to the center, last turn farthest). The results were genuinely interesting but reminded me too much of a previous project I created so I didn’t pursue it much. The gaps for when I didn’t play also started to get distracting.

However, creating this version resulted in a reusable setup for NodeBox for parsing my data using network nodes. Using a single flat dataset, I could now easily parse each game, each player, and each turn.

Once I had a reusable setup, I quickly created a version of the charts from my original dashboard just to see if I could. Without adding steps, the result was lots of wiggly lines. I would eventually come back to this version occasionally to play with this more.

Looking for a different approach, I created plainer design focusing on the process of inching toward a final score. This version showed each game as a group of horizontal lines with dots spaced out based on the points earned during each turn. I liked the relative even distribution but it was too busy and difficult to differentiate games and even players.

The next version is where I finally started seeing potential. Instead of fitting all turns from all games on a single spoked wheel, I created separate spoked wheels for each game. Each turn is a spoke and reading clockwise from the top, a dot color-coded by player is positioned farther from the center the more points were earned. I really liked seeing the wide variety of each game and where big plays were made—likely with bingos (playing all seven tiles at once in a turn). This would eventually become the basis for one of the final visuals.

Still looking for more ideas, I decided to try an idea based on Stephanie Posavec’s Writing Without Words project where wandering paths were created by drawing lines between points following a simple algorithm: draw a line for the first turn based on points earned, turn 90 degrees, and draw another and repeat. I loved this idea when I first saw Stephanie’s project. It can be easily applied to so many topics with fascinating results. Applying it to Scrabble games produced very fun results and I decided to use them in one of the final visuals.

In an attempt to build on the wandering paths, created a quick-and-dirty variation that drew lines based on a ping-pong like algorithm: draw a line pointing left or right and alternate between the two moving up with every turn. The results weren’t great but I saved the idea nonetheless.

After feeling a little maxed out with NodeBox, I threw the data into Raw to see what there was to see. I created a couple treemaps of points per game color-coded on a linear scale and color-coded by player. I also created a bump chart showing ranking of players for the entire year.

Day 3 | polishing and code

I knew I wanted to use the spoked wheel design so I experimented with different ways of trying to combine them into one giant graphic resembling fireworks. I also started playing with different color ideas. In these combinations, the distance from the common baseline of an entire game is based on how many total points were earned that game. (More points = farther from baseline.)

NodeBox has a node for creating stars and just for fun, I replaced the dots with stars and configured the number of points on the star to correspond to the number of points earned on a turn, which resulted in a fuzzy appearance. It was a little silly but I liked it.

The more I played with a giant graphic, the more I realized that while it was appealing in theory, the details were lost and there was too many overlapping points—even when using a horizontal baseline instead of a radial one.

I wanted to find a different way of arranging the games and remembered that for an earlier project, I found Packomania when looking for a way to tightly arrange circles in a specific shape. This site offers a mindboggling number of diagrams showing how circles of varying or consistent sizes can be packed into squares, circles, and other shapes when the number of circles from just a few to over two thousand. The best part is that each diagram is available in a PDF with the original vector shapes. This is an incredibly valuable resource for people like me who don’t feel like coding packing algorithms.

NodeBox supports importing SVGs so it’s possible to use one of these diagrams to use as a guide for placing shapes. Here’s the general process:

1. Download a PDF of a diagram with the appropriate number of shapes. In my case, found diagrams with 47 circles for the 47 games I played.
2. Open the PDF in Illustrator and extract just the circles—removing all other shapes.
3. Reorder the shape objects in the order they should be parsed by NodeBox: first at the bottom, last at the top. In my case, the first corresponded to the first game I played in 2013.
4. Export the file as an SVG.
5. Use the import SVG node in NodeBox to import the SVG, connect it to an ungroup node and connect that to a centroid node. This finds the center points of each circle which can be used to position shapes.

At this point, it was just a matter of finding a symmetrical arrangement of 47 circles that I liked and that would fit well on a screen. After manually moving circles around in Illustrator for longer than I care to admit, I found a good arrangement. I also used the connect node to draw a faint line connecting all the centroids to illustrate the path from beginning of the year to the end. The same arrangement was used for both main visuals.

Below are the NodeBox configurations for the two main visuals.

I knew I wanted to keep the original stepped line charts for a more analytical view of how games unfold as a type of appendix. These were created with Highcharts. Highcharts is my go-to tool for creating charts because it’s relatively easy for me to use and I can focus more on how the charts look without worrying how they work under the hood. I really enjoy customizing the options to configure the colors, data, how they behave, and more—mostly because its documentation is some of the best I’ve seen with good explanations, easy navigation, and working examples of almost every option.

Reflections

The final result is a visual experiment of one of many years of Scrabble that I hold dear. I can’t remember every game I’ve played but looking at the visuals helps me remember the excitement of surging ahead with a bingo or the slogging along with a rack full of vowels playing turns worth only a few points.

Analyzing these games has helped me fondly remember a time when I looked forward to my weekly visit with my parents to have dinner and play a good game of Scrabble. Geography may separate us now but I still play with my father twice a week and we’re still just as dedicated to the game as we ever were.