A d3.js data visualization of Hollywood films
JavaScript Ruby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
config
db
doc
lib
log
public
script
.gitignore
Gemfile
Gemfile.lock
LICENSE
README.md
Rakefile
config.ru

README.md

Hollywood Budgets

What is it?

Hollywood Budgets is web-based data visualization of Hollywood films. This D3.js project was created as an entry for the Information is Beautiful Awards and was subsequently shortlisted. This data visualization can also be found on Visual.ly.

The Visualization

Each film is represented as a bubble on the chart. The bubble's position is determined by its Rotten Tomatoes score and its profitability percentage (gross over budget). The size of the bubble represents the worldwide gross. Films are color coded and categorized into 22 story types.

Hollywood films can be filtered by year, story, and worldwide gross using the user interface on the right. Hovering your cursor a bubble will display more detailed information about the film. Hovering over a story will display a description of the story type.

Users can use their mouse wheel to zoom into the graph to get a better picture of where films stand against its neighbours. Once zoomed in, users can click and pan around the graph.

Background

This project was started as an exercise to practice building data visualizations using D3.js and other common web libraries. The visualization was initially built without any web framework. The web page and assets were simply served up by a server. Recently I decided to migrate the project to Ruby on Rails as another exercise. This allowed better management of dependencies via gems and allowed Rails to serve the various libraries and files through the sprockets asset pipeline.

Data Source

Data was provided by The Information is Beautiful Awards in the form of a spreadsheet. The data was processed and cleaned up using various tools including Google Refine/OpenRefine. The raw data through various stages of transformation can be found in the /public/data/ directory of this project.

Libraries & Dependencies

Potential Improvements

  • The visualization could be extended by implementing more filtering options.
  • The user interface could allow users to switch the variables on the graph axes to view the films from a different perspective.
  • A search feature could be implemented.
  • The data could be viewed in a tabular form with sorting options.
  • When panning around the graph, bubbles disappear too early and reappear too late. Some simple geometry and mathematics can resolve this issue.
  • Some transitions (fade in/out) of bubbles could be improved. Smooth transitions are non-existent in some cases due to performance issues.
  • The cleaned data can be used to visualize the information in a completely different way.

Credits

This nifty data viz was created by Gordon Chan. Feel free to fork and contribute. :)

Hollywood Budgets is free software distributed under the new BSD License.