index.html

---
layout: default
title: Home
permalink: /
has_viz: true
use_math: true
---
<div class="plot1">
  <img src="{{ site.baseurl }}/assets/img/settingButton.png" alt="zoom out button" id="settingButton">
  <img src="{{ site.baseurl }}/assets/img/zoomOut.png" alt="zoom out button" id="zoomOutButton">
  <div id="plot1_title_container">
  </div>

  <div id="plot1CheckBoxes">
    <span><input type="radio" name="plotKind" value="chartInterLeavingInput" id="chartInterLeavingInput" /> <label
        for="chartInterLeavingInput">Interleaving Chart</label></span>
    <span style= "display:none;"><input type="radio" name="plotKind" value="streamChartInput" id="streamChartInput" /> <label
        for="streamChartInput">Stream Chart</label></span>
    <span><input type="radio" name="plotKind" value="stackedAreaInput" id="stackedAreaInput" checked /> <label
        for="stackedAreaInput">Stacked Area</label></span>
  </div>
  <div id="plot1_container">
  </div>

  <div id="helper_container">
    <div id="table_container" class="collapsible-content" style="display: block;">
      <div id="tableTitle">Top 50 all categories videos for all time</div>
      <table id="dcTable">
        <div class="lds-default" id="tableLoader">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </table>
    </div>
    <button type="button" id="showTable" class="collapsible">Hide top videos table</button>
    <input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
    <label for="toggle-on" class="btn">Time Interval</label>
    <input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio">
    <label for="toggle-off" class="btn">Weekly</label>
    <div id="plot2_container">
      <div id="duration_plot">
        <div id="durationTitle">Duration of all categories videos for all time</div>
      </div>
      <div id="hist_plot">
        <div id="histTitle"><select id="countSelect">
            <option value="0">Views Count</option>
            <option value="1">Likes Count</option>
            <option value="2">Dislikes Count</option>
          </select><label for="countSelect" id="countTitle"> of all categories videos for all time</label>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="content-text">
  <h1>Welcome in the world of YouTube videos</h1>
  <p>
    In this project, we aim to explore the metadata of 96 million YouTube videos. They span from the very origin of
    YouTube to late 2019 when the data was scraped. We use a sample from English channels with more than 10 thousand
    subscribers as our source. For your convenience, we present only data from January 2008 to June 2019 so you can
    appreciate how YouTube grew over the years. The visualization is separated into two parts, the main visualization on
    the top with the weekly category score and aggregated results for the selected time interval and categories below.
  </p>
  <h2>How to navigate through time and categories</h2>
  <p>
    The main way to change the time is by panning and selecting a time interval either on the main graph directly or on
    the timeline below it. You can drag and modify your selection on the timeline. If you are interested in getting data
    weekly instead of an aggregation over the selected time interval, please toggle the button below the table. In this
    mode, you can press <code>f</code> while hovering the plots to freeze the time and learn more about the
    distributions of the main metrics. To select a given category, simply click on the category name or on the category
    in the main plot.
  </p>
  <h2>Ranking categories over time</h2>
  <p>
    For a given category \(C_i\) and a time period \(T\), its score \(score(C_i, T)\) can be defined as
    \[score(C_i, T) = \sum_{c_j = C_i \wedge t_j \in T} v_j \cdot w_j \]
    Where for a given video \(j\): \(c_j\) is its category, \(t_j\) its publication date, \(v_j\) its number of
    views and \(w_j\) the weight associated with the channel that published the video. This weight is inversely
    proportional to the probability of a channel being sampled during the scrap phase. Rarer channels have higher
    weights because they are underrepresented in our sample. The score is then scaled down by 1 million to have a
    comprehensible Y axis.
  </p>
  <h2>An interesting spike to look at</h2>
  <p>
    While you enjoy some old music that hang on the top of our charts using our embedded video player, you may think
    where do they come from? You may have spotted this huge spike in late 2009 in the music category. It is flagrant if
    you view the chart in interleaving mode (Click the cogwheel to change the disposition). Well, as we have a view of
    the data as it was in November 2019, we see an accumulated number of views for this short period. This is thanks to
    VEVO, dropping most of last century music clips for our enjoyment in less than a month.
  </p>
  <p>
    <em>
      We hope that you can enjoy some of your time listening or watching some relics of the past while uncovering more
      about the evolution of YouTube.
    </em>
  </p>
</div>

<div id="youtubePlayerBox">
  <div class="corner topLeft">
    <img src="{{ site.baseurl }}/assets/img/closeButton.png" alt="">
  </div>

  <div class="minusButton">
    <img src="{{ site.baseurl }}/assets/img/minusButton.png" alt="">
  </div>
  <div class="corner topRight resizer">

  </div>
  <div class="corner bottomLeft resizer">

  </div>
  <div class="corner bottomRight resizer">

  </div>
  <!--<iframe width="420" height="315"-->
  <iframe id="youtubeIframe" type="text/html" allowfullscreen="true">
  </iframe>

</div>

<script type="module" src="{{ site.baseurl }}/assets/js/table.js"></script>
<script type="module" src="{{ site.baseurl }}/assets/js/helperPlot.js"></script>
<script type="module" src="{{ site.baseurl }}/assets/js/plot1DataModel.js"></script>
<script type="module" src="{{ site.baseurl }}/assets/js/plot1UI.js"></script>
<script type="module" src="{{ site.baseurl }}/assets/js/plot1.js"></script>
<script type="module" src="{{ site.baseurl }}/assets/js/youtubePlayer.js"></script>
<script>
  let coll = document.getElementsByClassName("collapsible");
  var i;

  for (let i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
      this.classList.toggle("collapsibleactive");
      var content = document.getElementById("table_container");
      if (content.style.display === "block") {
        content.style.display = "none";
        this.textContent = "Show top videos table";
      } else {
        content.style.display = "block";
        this.textContent = "Hide top videos table";
      }
    });
  }

</script>