Data Visualization

17
May

The Project [+Inspiration].

It is no secret that our mood can influence what we want to see at the movie theater. Nor is it news that the overall state of the economy, through its direct impact on the lives of each one of us, can have a significant impact on our mood. So mathematically it would follow that the economic state of the nation would have some impact on the movies we watch, especially when we consider movies by genre. This documented relationship (there have been more than a couple studies on the topic) was the inspiration for this project—it is designed to allow you to see the relative popularity of each genre (based on the top 20 movies of each year to ensure that we are sampling movies that were actually popular with users) while simultaneously seeing the changing economic conditions over time.

The visualization is currently live at lizrutledge.com/boxoffice-economics for anyone interested in interacting with it first-hand! There is also a screen capture showing the visualization’s functionalities below.

Technology/Implementation

The visualization is built using a whole group of web languages, making use of a MySQL database, PHP to pull and parse the data, JSON to translate the PHP into javascript, and Processing.js to take these new js variables and visualize them dynamically. I also made use of a jQuery slider from a tutorial site that I heavily customized (in both appearance and functionality) to suit my rather specific needs. All text in the legends are clickable active html, overlaid on top of the canvas area in which the Processing sketch is running. This allowed for much easier and more fluid interactions by enabling me to simply use javascript onclick attributes to change variables without requiring any sort of click detection within the sketch or page refresh to acquire new PHP data.

Initial Concept Prototypes.

1. GDP Line Graph with Move Pop-Outs

This was my first full sketch on the concept, using a completely different strategy. This implementation would have focused more on the GDP data and simply scattered movie pop-outs along the length of the graph.

The [Box Office] Economics of Emotions | Original Concept Sketch

2. GDP Line Graph with Move Pop-Outs | Higher Fidelity

Once I got this into Illustrator, it ended up not looking like I had wanted to (imagine this picture with confetti all over it), so I decided to change course in order to emphasize the genre popularity more than the GDP information. (It may be richer data, but at the end of the day people are more interest in movies that they have an emotional connection with than the GDP from 1972.)

The [Box Office] Economics of Emotions | Second Concept Iteration

3. Area Graphs of Each Genre Over Time

This was an attempt to clean up the overall aesthetic and tackle the issue of displaying 12 different genres’ respective popularities over the same axis. While this type of area chart was not the answer, I was happy with the concept of focusing largely on the genres so continued to move in this general vein.

The [Box Office] Economics of Emotions | Third Concept Iteration

Final Concept: The First Iteration.

In this version of the visualization, I decided to move to bar charts that change dynamically over time instead of trying to tackle the issue of 12 different area graphics of varying magnitudes on the same axis. To interact with the visualization and see these relationships for yourself, you can move the slider left and right to view the composition of box office revenues separated by genre from 1948 to 2010—the bar charts will automatically resize to the new year’s data.

Below the bar chart on the right side, the top four movies of that year are dynamically shown, along with their genre for comparison.

In addition, there was a GDP graph below the slider (in a sort of spark line approach) to show the viewer what the economic conditions were for that year relative to a larger timespan. When moving across the time axis, increases in the GDP graph are denoted by the marker turning blue—drops in the data are denoted by the marker turning red. (So when the ball that glides along the GDP chart turns red, that indicates a period of economic downturn. Likewise, a red segment of a genre’s historical box office revenues would indicate a decrease in revenues from the last period, making it easier to notice the ups and downs.) While I was very happy with the animation of this part of the visualization, it felt very segregated from the rest of the data and needed to be further integrated.

The [Box Office] Economics of Emotions | First Iteration

Final Concept: The Current Iteration.

In this most recent iteration, I wanted to integrate the GDP chart more closely into the composition, so moved it behind the bar charts instead of down below the slider as it was placed in the last iteration. In addition, I added the functionality of detail views that let you see the relative popularity of each genre over time.

Just as before, to interact with the visualization and see these relationships for yourself, you can move the slider left and right to view the composition of box office revenues separated by genre from 1948 to 2010. In this new iteration, however, you can also click on one of the genres to see a more detailed historical visualization of the genre over time.

When moving across the time axis, increases in time-based line graphs are still denoted by the marker turning blue—drops in the data are denoted by the marker turning red. (So for example, when the ball that glides along the GDP chart turns red, that indicates a period of economic downturn.) By including this same functionality on the detail views of each genre as well, however, you can now watch the relationship between the GDP marker and the genre markers and begin to see the direct and inverse relationships that emerge from the data.

The Main/Home Screen (View All Genres for Each Year)

The [Box Office] Economics of Emotions

The Detail View (View One Genre Over Time)

The [Box Office] Economics of Emotions | Detail View

Future Considerations.

Going forward, I have a handful of plans for this visualization. I have some APIs lined up (which never made it to the “editing table” due to time constraints) that would allow me to display cover art from top movies for each year, as well as link from the top four movies of each year to reviews (NYTimes is the obvious candidate but something like Rotten Tomatoes could be another option). With more time I would also like to develop a non-cluttered way to show the movie(s) responsible for each peak in the historical graph just by clicking on the point, and change the detail view’s “Top 4 Movies” to be the top four movies of that particular genre until you go back to the main view. And as with any design, there are a million little things that I would tweak to increase the level of polish.

These changes are only a few of the things I would love to do to refine this further and increase the functionality and strength of message—I hope to have more time over the summer to keep working on it. (So many changes, so little time!) I’m really happy with the improvements made in between the last iteration and the current one, and look forward to seeing what else I can improve upon with a much less limited schedule.

Category : Data Visualization | Spring 2011 | Blog
8
Apr

The Assignment.

For this assignment, we were tasked with creating a data visualization that uses two potentially unrelated APIs to create one cohesive “mashup” visualization. Chris Piuggi and I teamed up to make something out of the Facebook API and NYTimes Best Sellers API, but after some initial research quickly changed to the NYTimes Movie Reviews API in order to access information that would be more relevant in the context of a social network service.

The Concept.

We began to develop the idea of a Facebook Movie Recommendation Service (FMRS) that would primarily make use of the Facebook API to pull information about your favorite movies as well as those of your friends to create a sort of visual Pandora for movies. This interaction provided users a path to discover similarities between friends and movies, and begin to discover new titles they might enjoy. The envisionined application seeks to provide recommendations based on friends rather than individual preferences to show a wealth of options, as well as prompt discover between the user and data. The hope would be to grow this into a full fledged system in which users could recommend movies and find ratings, based on their friends, as well as their preferences. Integration of Netflix API could potentially create this dynamic interchange between the user and the data.

Movie Visualization Mockup

Movie Visualization Mockup

Movie Visualization Mockup

Movie Visualization Mockup

The Implementation.

As we started to work on the visualization, it became apparent that the Facebook API is a beast. We tried to grapple with several different APIs within the Facebook API structure, spending some time working with the FQL (Facebook Query Language) API only to find out that it was not going to meet our needs given our familiarity with the API’s unique quirks in the given amount of time. We then decided to use the graph API (a REST API) to access data about you and your friends and could get data reliably from our own friends, but only if we manually went into the system and extracted an authentication token every ten minutes when it expired. Wanting to make this a realistic app, we decided to tackle some javascript in order to allow the user to log in to their Facebook account on the same page and get authentication that way (since we clearly wouldn’t have users playing in the code itself).

This is where things got sticky. In order to use these login authentication features, we needed to use javascript, a language in which neither of us have much experience. We made a lot of progress and got to a point where we had data from several different sources ready to be called, but could never get all of the languages to talk to each other. The complications of passing variables between PHP, javascript and Processing.js turned out to be very tricky, and got the best of us on this go around, but with more time we hope to be able to get all of the components coexisting happily in the future.

Aside from the data being accessed but not passable between languages at our point of progress, we also created a Processing sketch that we included in a web page to perform the actual visualization. In the sketch, the user would click the wheel or hit a key to move the “carousel” either forward or backward in order to see each of their friend’s movie preferences. A video of the interaction can be viewed below.

Future Considerations.

In the future it would be great to get all the variables talking to each other and really get this visualization off the ground. We think that it would provide a unique and useful service to Facebook users once we integrate the separate movie information and reviews and got the visuals working exactly as we would like them, and hope to see a more developed version in the future now that we’ve been able to learn a little bit more about all the web language interactions going on behind the scenes.

Category : Data Visualization | Spring 2011 | Blog
19
Mar

For this assignment, we were asked to make a visualization using the New York Times Newswire API. For my visualization, I decided to look at the distribution of images across the articles in different categories.

Newswire Visualization

Articles with images are displayed as a small thumbnail image; articles without an image are displayed as a plain colored block where the color represents the article’s category. I used the physics library fisica in Processing to create the 2D gravity and collision effects. While the ability to pick blocks up and toss them around doesn’t necessarily illuminate the data any further, I think it adds a fun element to the visualization that makes you want to spend more time with it, without cluttering it or making analysis of the data difficult.

Video Documentation and Earlier Iterations.

Video of me playing with the visualization and a screenshot of an earlier prototype/iteration can be viewed below. If you closely you can see the cursor that is “grabbing” the blocks and throwing them around.

The First Iteration.

In this first iteration, I hadn’t sorted the data into columns yet. I liked the effect of the larger images but decided to scale them down so that viewing the whole composition would give you some information about the number of total articles, not just the ones with images.

Newsire

Category : Data Visualization | Spring 2011 | Blog
24
Feb

Relationship Data | Liz Rutledge and Kenny Roraback

Click to expand/collapse the rest of the presentation

Relationship Data | Liz Rutledge and Kenny RorabackRelationship Data | Liz Rutledge and Kenny RorabackRelationship Data | Liz Rutledge and Kenny RorabackRelationship Data | Liz Rutledge and Kenny RorabackRelationship Data | Liz Rutledge and Kenny RorabackRelationship Data | Liz Rutledge and Kenny RorabackRelationship Data | Liz Rutledge and Kenny RorabackRelationship Data | Liz Rutledge and Kenny RorabackRelationship Data | Liz Rutledge and Kenny RorabackRelationship Data | Liz Rutledge and Kenny RorabackRelationship Data | Liz Rutledge and Kenny RorabackRelationship Data | Liz Rutledge and Kenny Roraback

Category : Data Visualization | Spring 2011 | Blog
18
Feb

Time Visualization

See the actual application running here. (I suggest Firefox or Safari…Chrome doesn’t seem to want to play nice.)

Category : Data Visualization | Spring 2011 | Blog
11
Feb

The first concept involves increasingly large bins that empty some material (water? bouncy balls?) from smaller to bigger as time passes. (The top box would be seconds, the bottom hours, and so on.) It could be done with a physics library in Processing but might not be that interesting. I think I’m going to move forward with the next idea instead.

Time Visualization

The sketches below are the beginnings of my Monster Clock. (The first page is the primary rumblings, the second page has the more developed concept. For the Monster Clock, little monsters would appears on three different tiers, each of which is hinged at the middle. At the 60 second/60 minute/hour mark, the floor tilts to one side and pours all the monsters into the mouth of a bigger one on the platform below. I may use just boxes that condense into a larger box to start with in case the animation/illustration of the Monsters ends up being outside of the scope of the project given the quick timing.

Time Visualization

Time Visualization

Category : Data Visualization | Spring 2011 | Blog
4
Feb

Statically inspiring from my idols over at xkcd.com:

I totally respect the dude over at xkcd.com—he is always able to combine unbelievable nerdiness and accuracy with really funny (albeit still nerdy) humor. This comic has an impressively detailed Lord of the Rings narrative chart that tracks the movements of all the characters in the trilogy, as well as a few other movies (some real, some just jokes). But jokes aside the Lord of the Rings one is both pretty amazingly complete and fun to weave your way through.

Click on image to see the detailed [read: GIGANTIC] version)

Dynamically Inspiring from InformationIsBeautiful:

This visualization BLOWS MY MIND. I’m really into natural supplements and holistic healing, so know really more than I should about all sorts of weird vitamins and homeopathic “cures” for various ailments. (That’s what you get when you combine a hypochondriac with a San Franciscan whole/natural foods enthusiast.) Basically it’s a large collection of the various supplements that are being touted as either miracle cures or just things you should take because they’re good for various parts of your body/system, placed in order of legitimacy—the higher the bubble, the more scientific evidence there is supporting its claims of effectiveness. The size of the bubbles correspond to their “popularity” (i.e. amount of hits on google) and the bubbles that are rust colored signify that not much research has been done on that particular supplement but that the results have been promising so far. Plus each bubble is also labeled with what the supplement is allegedly good for.

I should never have been shown this.

Data Visualization

Just for fun:

Demetri Martin is a stand-up comedian who generally has a certain amount of data visualization worked into his routines (go figure). This is a nine minute or so clip of him doing what he does best—you obviously don’t have to watch the whole thing (or any of it really) but there are some real gems in there.

Category : Data Visualization | Spring 2011 | Blog