index.html

<!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>
          <h2 id="project_tagline"><center>CS1951a : Data Science Project</center></h2>

            <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>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>