Behind-the-scenes: Rocky Morphology

Happy New Year! One of my new year’s resolutions is to blog more — we’ll see how that goes.

2013 was pretty busy with the birth of my second daughter Flora and settling into a new home. Beyond my personal life, work at Fathom has been quite busy and rewarding. We continue to work on a lot of interesting data visualization projects, but unfortunately I can’t share most the of the work I’ve done at this time.

Rocky Morphology screenshot

One personal project—released in early December—I’m happy to share is Rocky Morphology. You can check out the full project and description here (or tap on the screenshot above). Below is some of the process that went into the creation of Rocky Morphology.

Rocky Morphology paper sketches

First, like many personal projects or sketches at Fathom, they start around the lunch table. I was sharing some of my childhood stories and the topic of Rocky movies came up. We were debating what the best Rocky movie was. In my mind Rocky I was always the best, but Rocky IV is the overall crowd pleaser. What’s more interesting was our discussion about the narrative arc and overall formula the movies all seem to hold. I started looking into examples of narrative arc to see how similar plot points within the Rocky movies overlap.

I thought about some books I’ve read dealing with narrative structure and character development. In particular Morphology of the Folktale by Vladimir Propp and The Hero with a Thousand Faces by by Joseph Campbell. Both books break down stories into their most basic narrative and character components. I wanted to see how this could be applied to the Rocky movies.

Rocky: 1 frame per second (detail)

Rocky: one frame per second (detail)

We generated a quick processing sketch that ripped one frame per one second of film in each movie. This was a really nice way to have a visual overview of all the movies. I found it interesting to see all the movies recompiled in this way. Immediately I saw some clear overlap within some of the scenes. Looking at the frames both horizontally and vertically, it created a new narrative which I also thought was interesting, but it wasn’t enough. It was a bit confusing and I didn’t think people would understand what I was trying to get at.

Rocky Morphology data collection

I finally realized what I needed to do, there was no getting around it. I sat down, opened a beer, and watched all six Rocky movies. With Adobe Premiere I started marking In and Out points for all the different scenes in each movie. I then distilled down all the different scenes into six categories (Dialogue, Training, Montage, Pre Fight, Fight and Credits). With a basic excel doc I was able to parse the data to create the bar charts and structure of Rocky Morphology.

I’m excited to find so many other people interested in this project. We got over one hundred thousand hits in the first couple days and the numbers keep climbing. Thanks for all the support and be on the look out for the next random idea that might come up at lunch.

Press:

Fast Company: The Plot Of Every Rocky Movie, Deconstructed

BuzzFeed: Extremely Detailed “Rocky” Breakdown Deserves A Nobel Prize In Movie Science

FlowingData: Rocky movie breakdown

Deadspin: Where Are The Sweet Montages? Breaking Down The Rocky Movies By Scene

boing boing: On the structure of Rocky movies

news by design: Rocky Morphology

Roots of All in the Family Tree

It’s been over eight months since I started at Fathom full-time. I’ve been having a great time working on a lot of interesting client and personal projects—a few are still under wraps, but hopefully they will be released soon. One personal project that was particularly enjoyable was finished in late November. All in the Family Tree came from my obsession with TV reruns and TV show spin-offs from my childhood. I posted about my inspiration on the Fathom blog, but I thought it would be nice to show some of the process that led me to the final result.

First, I found a few sources that outlined a majority of TV spin-off shows of all-time. Totally Useless TV Trivia, Wikipedia, and IMDB. I started plotting out shows by seasons (on-air) and Nielsen ratings.

Next, I looked at where the spin-off show began and mapped it’s Nielsen ratings on the Y axis. Although this was an interesting exploration I didn’t feel like it did the best job illustrating my idea.

I realized it was more important to focus on the cast members, and see what characters broke out of the original show to create the spin-off.

The TV show All in the Family was particularly interesting because it spun off so may shows, and successful ones at that. Most spin-offs usually tank.

I started to look at the All in the Family logotype and see if I could imbue some of the character of the nostalgic letterforms into the visualization. I started to create a dot matrix pattern from the logo. I thought I would make each dot one of the characters from the show and then connect it to their spin-off.

Then it hit me. It was right in from of my face. All in the Family, Family Tree? That’s it! All in the Family Tree. Inspired by this new name and the autumn leaves, I started sketching.

Each leaf represents one character from the show. Each color group represents the cast within the show. Hovering over the leaves reveals the name of the actor, their title, and if they have a connection to a spin-off show. Some gems like Sally Struthers appear in more than one show. See if you can find the others here fathom.info/allinthefamilytree. Enjoy!

Things I did this summer

This summer I worked at Fathom Information Design. Fathom was founded by Ben Fry, 2011 Cooper Hewitt Interaction Design winner and co-creator of Processing. Processing is an open-source programming environment for teaching computational design and sketching interactive-media software. It provides artists and designers with accessible means of working with code while encouraging engineers and computer scientists to think about design concepts. The best way to describe what processing is all about is it’s mission statement:

Processing seeks to ruin the careers of talented designers by tempting them away from their usual tools and into the world of programming and computation. Similarly, the project is designed to turn engineers and computer scientists to less gainful employment as artists and designers.

I love that mission statement. I was successfully working as a graphic designer for over 10 years but decided to leave a profitable job and go back to graduate school to see what else design can offer. In the past I’ve been frustrated with the separation of design and programming. Mainstream software created for designers is also extremely frustrating, due to the separation between layout, photography, video, animation, interactivity, and coding. My experience working at Fathom not only broke down the walls between designer and developer but opened my mind to other ways of tackling design through programming and computation. I hope to continue to be tempted away from my usual tools and ideas as I look to the future of design.

This semester I will continue to work at Fathom one day a week on an independent study, Visualizing Data. I plan to incorporate this work into my thesis. More to come on that.

Most importantly, we had a ton of fun working together. Below is a sample of projects I worked on this summer. Enjoy!

genetics app

Prototype sketch for an iPhone app that covers the human genome and genetic conditions.

population density

A map of world population and density. Each circle denotes the number of people in that area: larger, darker circles show low density areas, and smaller, brighter circles highlight higher densities. The top 20 cities are marked with white outline circles.

chelsea football

Chelsea Football Club team practice and rehabilitation overview.

Last but not least, Rag Time, an interactive typography game. It was really fun working on this project.

The Rag Time game challenges you to fix a bad example of ragged text and make it Swiss-perfect. Rag Time puts you up against the clock to make the best rag you can. Don’t be a Scheisser Rag!

Take the Rag Time challenge.