-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
312 lines (308 loc) · 10.7 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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>10510031 Sukhinderpal Mann - Data Visualization Assignment 2</title>
<!-- D3 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.min.js"></script>
<!-- Plotly Js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css"
/>
<style>
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: "Poppins", sans-serif;
}
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
.loader {
margin-top: 10%;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid blue;
border-right: 16px solid green;
border-bottom: 16px solid red;
border-left: 16px solid pink;
width: 240px;
height: 240px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script defer src="graphing.js"></script>
</head>
<body>
<div class="container" style="margin-top: 1%;">
<h2>Cinelysis</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a
class="nav-link active"
id="home-tab"
data-toggle="tab"
href="#home"
role="tab"
aria-controls="home"
aria-selected="true"
>Movie Analysis</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
id="profile-tab"
data-toggle="tab"
href="#profile"
role="tab"
aria-controls="profile"
aria-selected="false"
>Actor Analysis</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
id="verdict-tab"
data-toggle="tab"
href="#verdict"
role="tab"
aria-controls="profile"
aria-selected="false"
>Findings</a
>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<div class="loader center" id="loading-spinner"></div>
<div class="row">
<div id="chart-1" class="col-9" style="height: 100%"></div>
<div class="card col-3" id="form-div">
<div class="card-body">
<h5 class="card-title">Movies</h5>
<p class="card-text">Profit Made</p>
<form
id="profit-analysis"
onsubmit="form_inputs(); return false;"
>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input
step="1000000"
id="profit-value"
type="number"
class="form-control"
placeholder="Profit"
aria-label="Username"
aria-describedby="profit-value"
required
/>
</div>
<label for="movie-genre">Select Genre:</label>
<div class="input-group mb-3">
<select class="form-control" id="movie-genre" value="All">
<option value="-1">All</option>
</select>
</div>
<button class="btn btn-info">Plot</button>
</form>
</div>
</div>
</div>
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
<div class="row">
<div id="chart-2" class="col-9" style="height: 100%"></div>
<div class="card col-3">
<div class="card-body">
<h5 class="card-title">Actor</h5>
<p class="card-text">
Average Profit Made (as per Movie profit, featured actors have
appeared in more than 2 movies)
</p>
<form
id="actor-analysis"
onsubmit="actor_analysis_form(); return false;"
>
<label for="movie-actor-multi">Select Artist:</label>
<div class="input-group mb-3">
<select
class="selectpicker"
id="actor-search"
multiple
data-live-search="true"
data-selected-text-format="count > 2"
required
>
<option id="all-select" value="-1">All</option>
</select>
</div>
<button class="btn btn-info">Plot</button>
</form>
</div>
</div>
</div>
</div>
<div
class="tab-pane fade"
id="verdict"
role="tabpanel"
aria-labelledby="profile-tab"
>
<div class="container">
<h3>Movie Findings</h3>
<div class="container row">
<p>
In the analysis I found
<a
href="https://en.wikipedia.org/wiki/Changes_in_Star_Wars_re-releases#Star_Wars_release_history"
target="_blank"
>Star Wars</a
>
to be a weird outlier. It had a very small budget but ended up
making millions of dollars in revenue which lead me to research
more on the movie and it's interesting how the movie was
re-released 2 times in 3 different decades, it was first
released in 1977, then it was re-released in 1981, then 1985,
and then finally a VHS version 1995 with the re-release.
</p>
<p>
Then there is another outlier that is
<a
href="https://en.wikipedia.org/wiki/Avatar_(2009_film)#Box_office"
target="_blank"
>Avatar</a
>, which has made abusrdly high revenue. The second closest is
<a
href="https://en.wikipedia.org/wiki/Titanic_(1997_film)#Box_office"
target="_blank"
>Titanic</a
>
which is 1 billion dollars less in revenue. Another movie which
was very odd was
<a
href="https://en.wikipedia.org/wiki/The_Lone_Ranger_(2013_film)#Critical_response"
target="_blank"
>The Lone Ranger</a
>
which had a really good budget but was a failure at the
box-office. Reading more into it I saw the movie had casting
issues, bad script but most importantly it went against really
big movies, like
<a
href="https://en.wikipedia.org/wiki/Despicable_Me_2#Box_office"
target="_blank"
>Despicable Me 2</a
>
which is one of the top 50 earners of all time.
</p>
</div>
</div>
<div class="container">
<h3>Actor Findings</h3>
<div class="container row">
<p>
In this analysis I saw that
<a
href="https://en.wikipedia.org/wiki/Mark_Hamill"
target="_blank"
>Mark Hamill</a
>
famous for his role as
<a
href="https://en.wikipedia.org/wiki/Mark_Hamill"
target="_blank"
>Luke Skywalker</a
>
has been highly rated across his films and has had 3rd most
average profit for his movies.
</p>
<p>
There aren't strong trends of female actors leading the charts
in average profit for their movies. The most profitable male
actor according to the box-office sales is
<a
href="https://en.wikipedia.org/wiki/Chris_Pratt"
target="_blank"
>Chris Pratt</a
>
who's movies on an average makes a profit of almost 800 million
dollars while the best female actor
<a
href="https://en.wikipedia.org/wiki/Zoe_Saldana"
target="_blank"
>Zoe Saldana</a
>
makes almost 400 million dollars which is half of the male
counter-part.
<b>
<i>Note:</i> These aren't the actor's earnings, this is the
profit their movies made.
</b>
</p>
</div>
</div>
</div>
</div>
</div>
<script>
$("#actor-search").on("changed.bs.select", function(
e,
clickedIndex,
isSelected,
previousValue
) {
if (clickedIndex == 0 && isSelected) {
$("#actor-search").selectpicker("selectAll");
}
if (clickedIndex == 0 && !isSelected) {
$("#actor-search").selectpicker("deselectAll");
}
});
</script>
</body>
</html>