-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
346 lines (201 loc) · 10.6 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
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="description" content="CS1951a : Data Science Project">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<title>YouTube Recommendation System with Data Trends Analysis</title>
<link rel="stylesheet" href="stylesheets/style3.css">
<link rel="stylesheet" href="stylesheets/style_base_for_button.css" type="text/css" />
</head>
<body>
<div id="world"></div>
<script src='javascripts/Stats.js'></script>
<script src='javascripts/three.min.js'></script>
<script src="javascripts/index3.js"></script>
<!-- This is HEADER CONTENT -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/pengyangwu/CS1951a">View on GitHub</a>
<h1 id="project_title"><center>YouTube Recommendation System with Data Trends Analysis </center></h1>
<h5 id="project_tagline"><center>[Outline]:
We are using YouTube videos to analyze and predict tags associated with each video using Machine Learning techniques & find interesting trends by performing sentiment analysis using Natural Language Processing, on the top 10 trending videos in YouTube using title, description & comments.
</center></h5>
<section id="downloads">
<a class="zip_download_link" href="https://github.com/pengyangwu/CS1951a/zipball/master">Download this project as a .zip file</a>
<a class="tar_download_link" href="https://github.com/pengyangwu/CS1951a/tarball/master">Download this project as a tar.gz file</a>
</section>
</header>
</div>
<!-- This is AUTHOR INFO CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<h2>
<a id="command-line-youtube-data" class="anchor" href="#" aria-hidden="true"><span class="octicon octicon-link"></span></a><font color='#ff6600'>YouTube Recommendation System with Data Trends Analysis using YouTube API</font></h2>
<h4>
<a id="author-Aaron-Abhishek-Natalie-Preston-Wennie" class="anchor" href="#" aria-hidden="true"><span class="octicon octicon-link"></span></a>
<font size = 4><i><u>Author</u>: Aaron Wu (pwu8), Abhishek Dutta (adutta2), Natalie Roe (nroe), Preston Law (plaw), Wennie Zhang (yzhang46)
</i></font>
</h4>
<h5>
<a id="brown-university" class="anchor" href="#" aria-hidden="true"><span class="octicon octicon-link"></span></a>Brown University
</h5>
<!-- This is VISUALIZATION CONTENT -->
<h3>
<a class="anchor" href="#" aria-hidden="true"><span></span></a>
Data Visualization
</h3>
<ol>
<li><code>Simple Way</code>: Directly click buttons below to see all data visualizations, scroll down to see our <b>Blogs</b> on the same webpage.
<li><code>Backup Way</code>: Safari/Chrome browser works perfectly. If your browser is not supported (e.g Firefox/IE), please read the instruction in following section:
</ol>
<a href="viz1.html">
<div class="back">
<div class="button_base b03_skewed_slide_in">
<div>1. The US Map Viz</div>
<div></div>
<div>* Click for Map Viz! *</div>
</div>
</div>
</a>
<a href="viz2.html">
<div class="back">
<div class="button_base b04_3d_tick">
<div>2. Accuracy Viz</div>
<div>*Click to see Accuarcy!*</div>
</div>
</div>
</a>
<a href="viz3.html">
<div class="back">
<div class="button_base b05_3d_roll">
<div>* Click for Senti Viz! *</div>
<div>3. Video Sentiments Viz</div>
</div>
</div>
</a>
<a href="viz4.html">
<div class="back">
<!--<div class="button_base b11_3d_jumpback">-->
<div class="button_base b06_3d_swap">
<div>4. Total Sentiments Viz</div>
<div>* Click for Total Viz! *</div>
</div>
</div>
</a>
<a href="viz5.html">
<div class="back">
<div class="button_base b06_3d_swap">
<div>5. Sentiments Trend Viz</div>
<div>* Click for Trend Viz!</div>
</div>
</div>
</a>
<a href="https://youtubedatascience.wixsite.com/youtubedatasci">
<div class="back">
<div class="button_base b06_3d_swap">
<div>* Team Photo *</div>
<div>Check it Out! 😊</div>
</div>
</div>
</a>
<!-- This is INSTRUCTION CONTENT -->
<h5>
<a id="known-issues" class="anchor" href="#known-issues" aria-hidden="true"><span class="octicon octicon-link"></span></a>How to Quick Fix?
</h5>
<ol>
<li> <code>Chrome</code>: Click the shield icon in the far right of the address bar, in the pop-up window, click 'Load anyway' or 'Load unsafe script'.
<li> <code>Firefox</code>: Click the shield icon, in the pop-up window, change the option to Disable Protection on This Page.
<li> <code>IE 9.0</code>: After a pop-up message shows up at the bottom of the page, click 'Show all content'. (For IE 8.0 or earlier, when it appear click 'No' to go on).
<li> <code>Safari</code>: Safari does not any block mixed content like other browsers do (HTTPS over HTTP protocol), so we strongly recommend you use Safari browser, if you got an issue above.
</ol>
<h5>
<a id="how-to-run-this" class="anchor" href="#" aria-hidden="true"><span class="octicon octicon-link"></span></a>What if my browser is not supported anyway?
</h5>
<ol>
<li>Download the zip file by clicking grey folder button at upper right corner ↗ </li>
<!-- <li><img src="images/download_icon.png" width="30" height="20"><li> -->
<li>Open the <code>front_end</code> folder.</li>
<li>Open <code>index.html</code> then to click each button to see visualization locally.</li>
<!-- <li><img src="images/download_icon.png" width="30" height="20"><li> -->
<!-- <li>Issue the command <code>python -m SimpleHTTPServer</code> to start the server</li> -->
<!-- <li>Click Open your browser <code>http://localhost:8000/index.html</code> to visualize data</li> -->
</ol>
<!-- <li>since d3.js uses ajax to load tsv files, the files contained in the src folder cannot be run in a browser directly using <code>file://index.html</code>.
Please execute the above commands under the src directory to create a HTTP server. To display<em> Data Visualization(a)(b)(c) separately</em>~</li>
</ol> -->
<!-- This is BLOG POST CONTENT -->
<h3>
<a id="contact" class="anchor" href="#contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>Blog Post #1
</h3>
<p>Our Project Blog Post #1 is: <a href="blog1.html"> here </a>.</p>
<h3>
<a id="contact" class="anchor" href="#contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>Midterm Report
</h3>
<p>Our Project Midterm Report is: <a href="midterm.html"> here </a>.</p>
<h3>
<a id="contact" class="anchor" href="#contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>Blog Post #2
</h3>
<p>Our Project Blog Post #2 is: <a href="blog2.html"> here </a>.</p>
<h3>
<a id="contact" class="anchor" href="#contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>Blog Post #3
</h3>
<p>Our Project Blog Post #3 # is: <a href="blog3.html"> here </a>.</p>
<h3>
<a id="contact" class="anchor" href="#contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>Final Proposal Report
</h3>
<p>Our Project Final Proposal is: <a href="final_proposal.html"> here </a>.</p>
<h3>
<a id="contact" class="anchor" href="#contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>Blog Post #4
</h3>
<p>Our Project Blog Post #4 is: <a href="blog4.html"> here </a>.</p>
<h3>
<a id="contact" class="anchor" href="#contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>Blog Post #5
</h3>
<p>Our Project Blog Post #5 is: <a href="blog5.html"> here </a>.</p>
<!-- https://docs.google.com/document/d/1Oqq7jcZ_KRUHkYZhNT8jP2aVDzco5XiB8EUiF2lu8U4/pub -->
<h3>
<a id="contact" class="anchor" href="#contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>Project Poster #
</h3>
<p>Our Project Poster # is: <a href="images/Poster_Updated/Slide1.jpg"> here </a>.</p>
<h3>
<a id="contact" class="anchor" href="#contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>Final Project Report #
</h3>
<p>Our Final Project Report # is: <a href="https://docs.google.com/document/d/1qxfwEn3zyMIkMxydz24hUfH55RzfEDhk5YsWIb4jE70/pub"> here </a> </p>
<h3>
<a id="contact" class="anchor" href="#contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>GitHub Respository #
</h3>
<p>GitHub Respository # is: <a href="https://github.com/abhishekdutta/youtube_recommender_system"> here </a>.</p>
<h3>
<a id="contact" class="anchor" href="#contact" aria-hidden="true"><span class="octicon octicon-link"></span></a><font color = red>Web Application for our YouTube Recommender System</font>
</h3>
<ul>
<li>An interesting web application for our YouTube Recommender System, using Node, mysql, JS.</li>
<li>Independent & neat UI and extremely user-friendly. Needed to run it on <a href="https://en.wikipedia.org/wiki/Localhost">localhost. </a></li>
<li>Download: <a href="https://github.com/abhishekdutta/youtube_recommender_system/tree/master/webapp"> here </a>.</li>
</ul>
<h3>
<a id="contact" class="anchor" href="#contact" aria-hidden="true"><span class="octicon octicon-link"></span></a><font color = red>The final results of the predicted tags for all the videos</font>
</h3>
<ul>
<li>Recall: 70.7326%</li>
<li>Precision: 94.2882%</li>
<li>F1 score: 75.6736%</li>
</ul>
<canvas id="nokey" width="20" height="20">If Empty, Means Your Browser Don't Support Canvas. Please Use Chrome Browser ^_^``</canvas>
<script src="javascripts/index2_line.js"> </script>
<script src='javascripts/jquery.min.js'></script>
<!-- This is OTHER FORMAT CONTENT -->
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p class="copyright"> This page created and maintained by <a href="https://github.com/pengyangwu/CS1951a">Aaron Wu, Abhishek Dutta, Natalie Roe and Wennie Zhang</a></p>
<p>© 2017 YouTube Data Science Team. <a href="https://youtubedatascience.wixsite.com/youtubedatasci">See team members.</a></p>
</footer>
</div>
<!-- <script src="javascripts/sketch.min.js"></script> -->
</body>
</html>