Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
291 lines (203 sloc) 10.1 KB
<!DOCTYPE html>
<html lang="en">
<script type="text/javascript">var _sf_startpt=(new Date()).getTime()</script>
<meta charset="utf-8">
<title>Hollywood Data Explorer</title>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src=""></script>
<!-- Le styles -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/custom/jquery-ui-1.8.16.custom.css" media="all" />
body {
padding-top: 0px; /* 60px to make the container go all the way to the bottom of the topbar */
<link href="/favicon.png" rel="shortcut icon" type="image/x-icon" />
<div id="container">
<div id="header">
<a href="#about" id="about_header">About</a>
<a class="brand" href="#"><div id="title_g"><h1>Test</h1></div></a>
<div id="main" role="main">
<div id="film_info">
<table id="info" >
<td class="movie" id="movie_title" colspan="4"></td>
<td class="col1">Genre: </td>
<td class="col2" id="movie_genre"></td>
<td class="col3">Budget ($m):</td>
<td class="col4" id="movie_budget"></td>
<td class="col1">Critical Rating: </td>
<td class="col2" id="movie_rating"></td>
<td class="col3">Gross ($m): </td>
<td class="col4" id="movie_gross"></td>
<td class="col1">Year: </td>
<td class="col2" id="movie_year"></td>
<td class="col3">Profit: </td>
<td class="col4" id="movie_profit"></td>
<div id="controls">
<h3>Chart Controls</h3>
<h5>Set X-Axis</h5>
<button id="x_rating_rt" class="btn btn-small x_view btn-primary">RT Rating</button>
<button id="x_rating_aud" class="btn btn-small x_view">Audience Rating</button>
<button id="x_opening" class="btn btn-small x_view">Opening</button>
<button id="x_budget" class="btn btn-small x_view">Budget</button>
<button id="x_film" class="btn btn-small x_view">Film</button>
<h5>Set Y-Axis</h5>
<button id="y_gross" class="btn btn-small y_view btn-primary">Gross</button>
<button id="y_rating_aud" class="btn btn-small y_view">Audience Rating</button>
<button id="y_profit" class="btn btn-small y_view">Profit</button>
<button id="y_pl" class="btn btn-small y_view">Profit/Loss </button>
<button id="y_opening" class="btn btn-small y_view">Opening</button>
<h5>Bubble Size</h5>
<button id="r_budget" class="btn btn-small r_view btn-primary">Budget</button>
<button id="r_rating" class="btn btn-small r_view">RT Rating</button>
<button id="r_pl" class="btn btn-small r_view">Profit/Loss</button>
<button id="r_none" class="btn btn-small r_view">None</button>
<h5>Bubble Colour</h5>
<button id="c_none" class="btn btn-small c_view btn-primary">None</button>
<button id="c_genre" class="btn btn-small c_view">Genre</button>
<button id="c_year" class="btn btn-small c_view">Year</button>
<div class="slider_container">
<br/><h5 id="budget_range">Budget: $0 - $500 </h5>
<br/><div id="slider1"></div><button id="reset" class="btn btn-tiny reset">Reset</button>
<h5>Search for a film:</h5><input id="search" /><button id="reset_search" class="btn btn-tiny reset">Clear</button>
<div id="genre_list">
<h5>Choose Genres</h5>
<div class="btn-group" data-toggle="buttons-radio" id="genre-toggle">
<button class="btn btn-small" id="all_genres"><i class="icon-ok"></i> Select All</button>
<button class="btn btn-small" id="no_genres"><i class="icon-remove"></i> Select None</button>
<div id="genre_left">
<INPUT NAME="genre" TYPE="CHECKBOX" class="genre" checked="checked" VALUE="Action">
<span class="genre_label">Action</span> <BR>
<INPUT NAME="genre" TYPE="CHECKBOX" class="genre" checked="checked" VALUE="Adventure">
<span class="genre_label">Adventure</span> <BR>
<INPUT NAME="genre" TYPE="CHECKBOX" class="genre" checked="checked" VALUE="Animation">
<span class="genre_label">Animation</span> <BR>
<INPUT NAME="genre" TYPE="CHECKBOX" class="genre" checked="checked" VALUE="Biography">
<span class="genre_label">Biography</span> <BR>
<INPUT NAME="genre" TYPE="CHECKBOX" class="genre" checked="checked" VALUE="Comedy">
<span class="genre_label">Comedy</span> <BR>
<INPUT NAME="genre" TYPE="CHECKBOX" class="genre" checked="checked" VALUE="Crime">
<span class="genre_label" >Crime</span> <BR>
<INPUT NAME="genre" TYPE="CHECKBOX" class="genre" checked="checked" VALUE="Documentary">
<span class="genre_label">Documentary</span> <BR>
<INPUT NAME="genre" TYPE="CHECKBOX" class="genre" checked="checked" VALUE="Drama">
<span class="genre_label">Drama</span> <BR>
<div id="genre_right">
<INPUT NAME="genre" TYPE="CHECKBOX" class="genre" checked="checked" VALUE="Fantasy">
<span class="genre_label">Fantasy</span><BR>
<INPUT NAME="genre" TYPE="CHECKBOX" class="genre" checked="checked" VALUE="Horror">
<span class="genre_label">Horror</span><BR>
<INPUT NAME="genre" TYPE="CHECKBOX" class="genre" checked="checked" VALUE="Musical">
<span class="genre_label">Musical</span><BR>
<INPUT NAME="genre" TYPE="CHECKBOX" class="genre" checked="checked" VALUE="Romance">
<span class="genre_label">Romance</span><BR>
<INPUT NAME="genre" TYPE="CHECKBOX" class="genre" checked="checked" VALUE="Thriller">
<span class="genre_label">Thriller</span><BR>
<div id="year_list">
<h5>Choose Years</h5>
<div class="btn-group" data-toggle="buttons-radio" id="year-toggle">
<button class="btn btn-small" id="all_years"><i class="icon-ok"></i> Select All</button>
<button class="btn btn-small" id="no_years"><i class="icon-remove"></i> Select None</button>
<INPUT NAME="year" TYPE="CHECKBOX" class="year" checked="checked" VALUE="2007">
<span class="year_label">2007</span><BR>
<INPUT NAME="year" TYPE="CHECKBOX" class="year" checked="checked" VALUE="2008">
<span class="year_label">2008</span><BR>
<INPUT NAME="year" TYPE="CHECKBOX" class="year" checked="checked" VALUE="2009">
<span class="year_label">2009</span><BR>
<INPUT NAME="year" TYPE="CHECKBOX" class="year" checked="checked" VALUE="2010">
<span class="year_label">2010</span><BR>
<INPUT NAME="year" TYPE="CHECKBOX" class="year" checked="checked" VALUE="2011">
<span class="year_label">2011</span><BR>
<div id="chart_container">
<div id="footer">
<p>James Fisher | 2012 | @fisherific | Thanks to <a href="">Information is Beautiful</a> for the data! Best viewed in Chrome or Safari.</p>
<div class="modal hide fade in" id="about">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>About the Data Explorer</h3>
<div class="modal-body">
<p>An interactive web application designed to explore some of the metrics coming out of Hollywood. The tool allows exploration of over 500 films from the past 5 years.</p>
<li>Hover over a bubble to see the film details.</li>
<li>Click on a bubble to highlight it. Click 'clear' beside the searchbox to clear the selection.</li>
<li>Use the Chart controls on the right to play with the data. </li>
<p>Does the critical rating of a film affect its profitability? Set the X-Axis to RT Rating, the Y-Axis to Profit to find out.
There are hundreds of possible combinations available with all of the controls.
<p>WebKit seems to handle the SVG animations pretty well. Try Chrome or Safari if the app seems slow or unresponsive.</p>
<p>Data provided by Information is Beautiful. Big thanks to d3.js (@mbostock) for the amazing library.</p>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src=""></script>
<script src=""></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js"><\/script>')</script>
<script src="js/libs/bootstrap-modal.js"></script>
<script src="js/libs/d3.js"></script>
<script src="js/hollywood.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19494605-1']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
<script type="text/javascript">
var _sf_async_config={uid:33186,domain:""};
function loadChartbeat() {
window._sf_endpt=(new Date()).getTime();
var e = document.createElement('script');
e.setAttribute('language', 'javascript');
e.setAttribute('type', 'text/javascript');
(("https:" == document.location.protocol) ? "" : "") +
var oldonload = window.onload;
window.onload = (typeof window.onload != 'function') ?
loadChartbeat : function() { oldonload(); loadChartbeat(); };