data-viz-comp-prog/time.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
113
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Competitive Programming Visualizations - Time</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="time-color">Tick tock! It's code o'clock!</h1>
    <p id="paragraphLibre">
      Moving on to the time section, we will be presenting diagrams regarding execution time as a criterion.
    </p>
  </div>


  <div class="plot-group tag reverse-order-mobile">
    <div class="inner-plot-group left-text-aling">
      <h3 class="plot-title time-color">Average execution time per difficulty level</h3>
      <p class="plot-desc">
        Time is of the essence! This chart shows how much time a solution takes (in milliseconds) for every level of
        difficulty.
        <br><br>
        Harder difficulty problems require more time to complete because they use techniques needing more computational
        power. Regardless of optimization (via specific data structures, algorithms, etc.), these problems inherently
        take longer due to their complexity. Easy problems take less time than beginner problems because programmers at
        this level have learned better coding practices and algorithms from their earlier mistakes, resulting in more
        efficient code.

      </p>
    </div>
    <!-- Average time taken by difficulty -->
    <iframe width="50%" height="600" frameborder="0" scrolling="no" src="https://plotly.com/~jimtsiob/1.embed"></iframe>
  </div>

  <!-- Fastest language by time taken -->
  <div class="plot-group tag">
    <iframe width="50%" height="600" frameborder="0" scrolling="no" src="https://plotly.com/~jimtsiob/9.embed"></iframe>
    <div class="inner-plot-group left-text-aling">
      <h3 class="plot-title time-color">Fastest language by execution time</h3>
      <p class="plot-desc">
        Next up, we are investigating the fastest programming language. This bar chart visualizes the execution time of
        problems' solutions for each language on average.
        <br><br>
        C and ADA get the number one place with a very small difference on ADA's time over C. The worst languages are
        F#, LISP Sbcl and SCM guile. C and ADA might be the fastest, but most competitive programmers use C++ in its
        newest version (currently C++ 20) for their solutions.
      </p>
    </div>
  </div>

</body>

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

<script>
  var a = document.getElementById("time");
  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>