data-viz-comp-prog/website.html at main · JimTsiob/data-viz-comp-prog · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Website</title>
  <link rel="stylesheet" href="css/styles.css" />
  <link rel="stylesheet" href="css/navbar.css" />
  <link rel="stylesheet" href="css/plots.css" />
  <link rel="stylesheet" href="css/transitions.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <script src="https://code.jquery.com/jquery-3.7.1.slim.js"
    integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc=" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"
    rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap"
    rel="stylesheet">
</head>

<body>
  <script src="navbar.js"></script>

  <div class="intro">
    <h1 id="headerLibre" class="website-color">How to spy on your trusted users.</h1>
    <p id="paragraphLibre">
      The last category of visualizations is different from the previous ones in terms that it provides information
      relative to the website itself and not competitive programming.

    </p>
  </div>

  <div class="plot-group tag reverse-order-mobile">
    <div class="inner-plot-group right-text-aling">
      <h3 class="plot-title website-color">Activity per month and new problems</h3>
      <p class="plot-desc">
        With the line chart we visualize how much the user activity on the website has increased from 2009 until 2016
        while showing how many new problems were created every month.
        <br><br>
        It is obvious that as the time passed the number of users got bigger and the site gained popularity. Starting
        small, there was a steady increase each year with few "downs". From May 2013 where visitors surpassed
        1,000, activity started blooming, touching almost 6000 on August 2015. This could have happened because of the
        new content that was added the past 3-4 months.
    </div>
    <iframe width="50%" height="600" frameborder="0" scrolling="no" src="//plotly.com/~loukaspap/6.embed"></iframe>
  </div>
  </div>

  <div class="plot-group tag">
    <iframe width="50%" height="600" frameborder="0" scrolling="no" src="//plotly.com/~loukaspap/8.embed"></iframe>
    <div class="inner-plot-group left-text-aling">
      <h3 class="plot-title website-color">Traffic per hour</h3>
      <p class="plot-desc">
        It is important for a company to know at which time of the day the site has the highest traffic of users. For
        example, it can pick a time with high activity to roll out a promotion and gain more attention. That's why we
        visualize with a stacked bar chart how many users were active on the website for each hour of the
        day from 2009 to 2016.
        <br><br>
        We see for all years that from noon hours and after, the traffic is increased. The main peak hour is before
        midnight at 23:00 which is not surprising because a lot of programmers code at night.
      </p>
    </div>
  </div>
</body>

<footer>
  <h2>&copy; 2024 by the Kala Mandata team, UoA</h2>
</footer>

<script>
  var a = document.getElementById("website");
  a.className = "active";

  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
</script>


<script>
  $(document).on("scroll", function () {
    var pageTop = $(document).scrollTop();
    var pageBottom = pageTop + $(window).height();
    var tags = $(".tag");

    for (var i = 0; i < tags.length; i++) {
      var tag = tags[i];

      if ($(tag).position().top < pageBottom) {
        $(tag).addClass("visible");
      } else {
        $(tag).removeClass("visible");
      }
    }
  });
</script>

<script>
  const element2 = document.getElementsByClassName(
    "pa2"
  );
  element2.remove();
</script>

</html>