The [Box Office] Economics of Emotions | Our Emotions, the Movies We Watch, and the Economy

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.

(And not to repeat myself, but in case you missed this in the first paragraph the visualization is currently live at lizrutledge.com/boxoffice-economics for anyone interested in interacting with it first-hand!)

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.

This entry was posted in Homework. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *