forked from haydenudelson/haydenudelson.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (173 loc) · 10.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Box Office Prophet</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Favicons -->
<link href="img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Poppins:300,400,500,700" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="css/style.css" rel="stylesheet">
<!-- =======================================================
Theme Name: Regna
Theme URL: https://bootstrapmade.com/regna-bootstrap-onepage-template/
Author: BootstrapMade.com
License: https://bootstrapmade.com/license/
======================================================= -->
</head>
<body>
<!--==========================
Header
============================-->
<header id="header">
<div class="container">
<!--<div id="logo" class="pull-left">
<h1><a href="#hero">Regna</a></h1>
</div>-->
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active"><a href="#hero">Home</a></li>
<li><a href="#about">The Team</a></li>
<li><a href="#services">Sypnosis</a></li>
<li><a href="#services">Final Report</a></li>
</ul>
</nav><!-- #nav-menu-container -->
</div>
</header><!-- #header -->
<!--==========================
Hero Section
============================-->
<section id="hero">
<div class="hero-container">
<h1>Box Office Prophet</h1>
<h2>Our EECS 349 project to predict the profitability of films based on production attributes.</h2>
<a href="#about" class="btn-get-started">Get Started</a>
</div>
</section><!-- #hero -->
<main id="main">
<!--==========================
About Us Section
============================-->
<section id="about">
<div class="container">
<div class="row about-container">
<div >
<h2 class="title" style="margin-top:-50px;">The Team</h2>
<p style="margin-bottom:-60px;">
We are two Sophomore Computer Science majors at Northwestern University who have curated this project for EECS 349 (Machine Learning). Both of us worked collaboratively on cleaning the dataset creating different models on Weka.
</p>
<div class="icon-box wow fadeInUp">
<div class="icon" style="margin-top:100px;"><i><img src="img/anna.jpg" style="width:275px;"></i></div>
</div>
<div class="icon-box wow fadeInUp" style="margin-top:100px; margin-bottom: 50px;">
<h1 class="title" style="margin-top:125px; margin-bottom:-50px;">Anna Deng</h1>
<p class="description">Anna is a current sophomore computer science major with a passion for education and technology. Anna focused on developing the website for this project as well.</p>
<p class="description" style="margin-top:-85px;">Contact: annadeng2020@u.northwestern.edu</p>
</div>
<div class="icon-box wow fadeInUp" data-wow-delay="0.2s" style="margin-top:50px;">
<div class="icon"><i><img src="img/hayden.jpeg" style="width:275px;"></i></div>
</div>
<div class="icon-box wow fadeInUp" style="margin-top:100px;">
<h1 class="title" style="margin-top:125px; margin-bottom:-50px;">Hayden Udelson</h1>
<p class="description">Hayden is a current sophomore computer science major. Hayden contributed greatly to the first draft of the final report.</p>
<p class="description" style="margin-top:-85px;">Contact: hudelson@u.northwestern.edu</p>
</div>
</div>
<!--<div class="col-lg-6 background order-lg-2 order-1 wow fadeInRight"></div>-->
</div>
</div>
</section><!-- #about -->
<!--==========================
Facts Section
============================-->
<section id="facts">
<div class="container wow fadeIn">
<div class="section-header">
<h3 class="section-title">Sypnosis</h3>
<p class="section-description" style="margin-top:20px;">The global film industry is a major force not only in culture but economics. Global box office revenue is expected to reach $50 billion by 2020 as it continues to grow. In the United States, the film industry is expected to generate $35.3 billion in revenue in 2019. A successful film can not only generate large amounts of revenue, but shape cultural dialogue long after its run in theaters has expired.
</p>
<p class="section-description" style="margin-top:-40px; margin-bottom:-30px;">
Our goal is to apply machine learning techniques to predict whether or not a film will be successful based on a number of attributes of that film. For the sake of this project, we interpreted success as whether or not a film earns more money in the box office than it cost to produce. A film is an artistic endeavor, with a large overhead cost and a large degree of uncertainty as to its profitability. Further, the success of a film is highly uncertain. Roughly half of movies produced by Hollywood turn a profit in the box office, and this is true of our data set as well. Of 4,157 films in our dataset, only 55.7% were profitable. By creating a machine learning model to predict a film’s success, we can shed some light onto what makes a film a hit versus a flop.
</p>
<p class="section-description" style="margin-top:20px; margin-bottom:10px;">
We were able to build a random forest model that can predict with 72% accuracy whether a film will be profitable. We found that the most predictive factors in whether a film is successful is the number of critic reviews, the duration of the film, the number of likes on the director's Facebook page, whether the film was shot in color, and the number of likes on lead actors' Facebook pages. This suggests to us that a film's relevance (including a well-known director and discussion by many critics) is a key factor in its ultimate profitability. Further study is needed to build a more accurate classifier, but we believe our work is a strong starting point in predicting the success of films.
</p>
<div class="section-title" style="margin-top:50px; font-weight:200;">Graphs</div>
<div class="section-description">Below are a graphs that highlight a few key attributes that affect profitability of films. Blue data points represent movies that produced profits, red represent movies that did not.</div>
<table>
<tr>
<th>
<div class="section-description">
<img src="img/movie_facebook_likes.png" style="width:400px; border-radius:1%; margin-bottom:15px; margin-left:50px;"><p style="margin-left:25px;">Movie's Facebook Likes vs. Gross</p></a></th>
</div>
<th>
<div class="section-description">
<img src="img/budget.png" style="width:400px; border-radius:1%; margin-bottom:15px; margin-left:175px;"><p style="margin-left:200px;">Movie's Budget vs. Gross</p></a>
</div>
</th>
</tr>
<tr>
<th>
<div class="section-description">
<img src="img/num_critics.png" style="width:400px; border-radius:1%; margin-bottom:15px; margin-left:50px;"><p style="margin-left:50px;">Movie's Number of Critic Reviews vs. Gross</p></a>
</div>
</th>
<th>
<div class="section-description">
<img src="img/number_voted_users.png" style="width:400px; border-radius:1%; margin-bottom:15px; margin-left:175px;"><p style="margin-left:180px;">Movie's Number of Online User Voters vs. Gross</p></a>
</div>
</th>
</tr>
</table>
</div>
<div class="row counters">
<!--<div class="col-lg-3 col-6 text-center">
<span> figure </span>
<p>Clients</p>
</div>
<div class="col-lg-3 col-6 text-center">
<span data-toggle="counter-up">521</span>
<p>Projects</p>
</div>-->
</div>
</div>
</section><!-- #facts -->
<!--==========================
Services Section
============================-->
<section id="services">
<div class="container wow fadeIn">
<div class="section-header">
<h3 class="section-title" style="margin-bottom:20px;"><a href="img/Box_Office_Prophet.pdf" download>Final Report Download</a></h3>
<p class="section-description"><a href="https://drive.google.com/file/d/1tXwP7QBOfKRQenV-8mbuk9MmaHZWhqG6/view?usp=sharing" target="_blank" style="margin-left:-15px; margin-top:30px; color:#00ab95"> Original Dataset</a>
<a href="https://drive.google.com/file/d/1gHmjMauMOgZ2by6mIsM-2kPSUtbQc57G/view?usp=sharing" target="_blank" style="margin-left:20px; margin-top:30px; color:#00ab95">Cleaned Dataset</a></p>
</div>
</div>
</footer><!-- #footer -->
<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
<!-- JavaScript Libraries -->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/jquery/jquery-migrate.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD8HeI8o-c1NppZA-92oYlXakhDPYR7XMY"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/superfish/hoverIntent.js"></script>
<script src="lib/superfish/superfish.min.js"></script>
<!-- Contact Form JavaScript File -->
<script src="scripts/contactform.js"></script>
<!-- Template Main Javascript File -->
<script src="scripts/main.js"></script>
</body>
</html>