In time for this year’s Oscars (okay, last month) the New York Times produced this fascinating graphic showing box office receipts for recent films. Amanda Cox lead in the original print graphic and was assisted by Mathew Bloch, Lee Byron, and Shan Carter. The print version only went back a year (2007) and had a vertical orientation but the interactive version, linked here, goes back 20 years horizontally and is more immersive, allowing the user to query individual film “bubbles” or “threads” by name on mouseOver or by using the search box. I’ve a few ideas how it was created but the overall effect is artful while retaining a sine-waved influenced precision. Would have been nice to add the actual box office revenue figures to the mouseOvers.
UPDATE (6 Mar 2008)
The Times site has some discussion of this graphic:
http://www.nytimes.com/2008/02/25/business/media/25asktheeditors.html?pagewanted=5
A mystery software from Lee Bryan was used to make the chart.
However, if I were to create a similar graphic, I’d start in Excel and create two filled and stacked bar charts. For each chart I’d take half the films selected (some box office hits, some duds to even things out). These are time series where much of the time axis has 0 data values until the opening of the film. Then a big opening weekend and finally trailing off with a long tail till ending its box office run and then 0 values past that date. The data was weekly and there are 52 weeks in a year so 1040 total entries for each film. Open both charts into Illustrator. Now flip one so it formed the “bottom†half of this graphic. In the print version that would be the “left†and “right†halves. Join the two up along the common seam. Run a script or plugin to pull out the anchor points on each vertex for the bar chart fills, this gives it that nice curvy look. Then use the warp tool in Illustrator to give it the sine-wave effect by running it manually along the seam. Then fine tune the final result till it looks nice. The same thing can be done programatically by applying a sine wave to the data points (more effect closer to the seam, less far away).
Two solutions to smoothing out the sharply angled stacked area chart imported from Excel are:
- A free function in Illustrator CS3:
Just select the anchor points with the hollow arrow selection tool and then there are extra settings in the control panel for changing the points to curve (and back to hard angle). - A pay plug-in for earlier Illustrator versions:
http://www.nineblock.com/products.html#betterhandles_prod
Tags: box office receipts, movie, nytimes, oscars, revenue
…curious as to the few ideas how this was created? I like it for originality and of course information, although it is dificult to actually find a movie that you’re interested in (if it wasn’t huge). Also arbitrary which movies are up and down, it seems relevant but isn’t (right?). Still, viewers will definetely spend some time on this, it’s great fun.
The interactive version (http://www.nytimes.com/interactive/2008/02/23/movies/20080223_REVENUE_GRAPHIC.html) has a search ability that makes finding films easy.
If I were to create a similar graphic, I’d start in Excel and create two filled and stacked bar charts. For each chart I’d take half the films selected (some box office hits, some duds to even things out). These are time series where much of the time axis has 0 data values until the opening of the film. Then a big opening weekend and finally trailing off with a long tail till ending its box office run and then 0 values past that date. The data was weekly and there are 52 weeks in a year so 1040 total entries for each film. Open both charts into Illustrator. Now flip one so it formed the “bottom” half of this graphic. In the print version that would be the “left” and “right” halves. Join the two up along the common seam. Run a script or plugin to pull out the anchor points on each vertex for the bar chart fills, this gives it that nice curvy look. Then use the warp tool in Illustrator to give it the sine-wave effect by running it manually along the seam. Then fine tune the final result till it looks nice. Does that help?
Two solutions to smoothing out the sharply angled stacked area chart imported from Excel are:
A free script:
http://illustrator.hilfdirselbst.ch/dokuwiki/en/skripte/javascript/smooth_points
A pay plug-in:
http://www.nineblock.com/products.html#betterhandles_prod
Or if you have CS3, there is a handy option for converting points to curves. Just select the anchor points with the hollow arrow selection tool and then there are extra settings in the control panel for changing the points to curve (and back to hard angle).
Hi there,
Been looking at a lot of “wavegraphs”, “lastgraphs” and “themerivers” lately, I was intrigued and tried al your ideas – thanks very much for your mail by the way. With Betterhandles I was able to pull out the handles the same amount and rotate them all to horizontal, which is what i found in all the LastFM graphs. This works great!
In all those graphs created from LastFM data (lots of pdfs on the internet!), the data is presented symmetrical – not the case in the NY-times graphic – but easy to recreate in Excel with a formula and an extra column of data to fill the bottom part (to be thrown away).
I don’t think the movie-graph is made up of two seamed-up graphs, since you can’t see a middle-line. Seems to be just random, or at least not serving a goal to help legibility.
Thank you very much for your ideas on this and the great blog – keep up the great work.
Digging more, Amanda Cox at the NY Times used R, a statistical program that has a very steep learning curve to filter the data and create the graphic. Get in over your head here: http://www.r-project.org/
Wow! Guess “R” made the difference in these graphs. When I have a year or two to spare, I’ll get to the bottom of it.
[…] supplements and posters they like to admire and reexamine. This might have been raised by the 2008 box office graphic from the NY Times, implementing a steamgraph, but the general question applies to all infographic […]