Box Office Success

Explore box office success in 2012

This visualization animates box office results over a twelve week window. Each circle represents a movie sized by theatre counts, Facebook likes, Rotten Tomatoes audience or critics score or budget. To start an animation select a week in the bar chart. The average movie is show in theatres for four weeks. Most revenue results in the first week, but a successful movie can stay in theatres more than three months. Select a week in the bar chart to start an animation.

Recipe for success

Big budget movie The Dark Knight Rises, released July 20th, 2012, with high audience and critics scores on Rotten Tomatoes, earned more than $220m in the first week and kept a strong theatre presence past week six.

Role of social media and audience scores

John Carter, released March 9th, 2012, demonstrates, low audience score and low social media interest will result in poor box office earnings despite a large budget.

Design and Inspiration

This Box Office Visualization was developed in d3.js. The original inspiration was Hans Rosling's 2006 2006 TED talk. I dreamed of creating my own time-series animation on the fun topic of movies. The user should play around and see what trends they can discover.

The bar chart stops and restarts the animation according to week. I used a novel approach to animation where new layers of movie data are added as the time series progresses. Each animation interval potentially introduces new set of movies as circles at week zero. These are new releases. Once a movie is added to the animation a recursive transition is applied, changing it's X and Y position as well as sizing according to user option. The user can stop the animation by clicking on on any circle as well as hover to view release date and sizing value. To prevent text cluttering, titles are removed after week six.


Chris Leuer



Final project for CS 171 Data Visualizations

Process Book
Code Sources
  1. Stackoverflow. A function by Phillip Lenssen named abbreviateNumber was used to abbreviate larger numbers.
  2. Rotten Tomatoes. A javascript example script was used as starting point to create rottentomatoes.html
  3. Caged. A tooltip library d3-tip was used to display tooltips.
  4. Jquery. The Jquery library was used implement javascript code.
  5. d3.js. The d3.js library was used to render the visualization.
  6. Twitter Bootstrap. The Bootstrap library was used to style the visualization.
  7. Eli Grey. A function from Javascript library Filesaver.js was used to save array data to csv files.
  8. Mike Bostock. Examples of d3.js bar chart and Wealth & Health of Nations were used at starting points.
Data Sources

Data from external websites and APIs was collected and used to display the visualization.

  1. Box Office Mojo. Data from BoxOfficeMojo was used to display budget, gross, titles and theatre count.
  2. Facebook. Data from Facebook was used to display number of Facebook likes.
  3. Rotten Tomatoes. Data from RottenTomatoes API was used to display audience and critic scores.
  4. IMDB. Data for movie category was entered from IMdb.