Super-Knockout/visuals.html at main · Oceanestars/Super-Knockout · 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
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
<!DOCTYPE html>
<html style="font-size: 16px" lang="en-US">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="page_type" content="np-template-header-footer-from-plugin" />
    <title>visuals</title>
    <link rel="stylesheet" href="nicepage.css" media="screen" />
    <link rel="stylesheet" href="visuals.css" media="screen" />
    <script
      class="u-script"
      type="text/javascript"
      src="jquery.js"
      defer=""
    ></script>
    <script
      class="u-script"
      type="text/javascript"
      src="nicepage.js"
      defer=""
    ></script>
    <meta name="generator" content="Nicepage 4.6.5, nicepage.com" />
    <link rel="icon" href="images/favicon.png" />
    <link
      id="u-theme-google-font"
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Martel:200,300,400,600,700,800,900"
    />

    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "Organization",
        "name": "TL-DR",
        "logo": "images/HackCUTL-DRLogo1.png"
      }
    </script>
    <meta name="theme-color" content="#5c5c9f" />
    <meta property="og:title" content="visuals" />
    <meta property="og:description" content="" />
    <meta property="og:type" content="website" />
  </head>
  <body class="u-body u-xl-mode">
    <header class="u-clearfix u-header u-header" id="sec-a4a3">
      <div class="u-clearfix u-sheet u-sheet-1">
        <a
          href="index.html"
          data-page-id="588211795"
          class="u-image u-logo u-image-1"
          data-image-width="500"
          data-image-height="500"
          title="index"
        >
          <img
            src="images/HackCUTL-DRLogo1.png"
            class="u-logo-image u-logo-image-1"
          />
        </a>
        <nav class="u-menu u-menu-dropdown u-offcanvas u-menu-1">
          <div
            class="menu-collapse"
            style="font-size: 1.25rem; letter-spacing: 0px; font-weight: 700"
          >
            <a
              class="u-button-style u-custom-active-border-color u-custom-border u-custom-border-color u-custom-borders u-custom-color u-custom-hover-border-color u-custom-left-right-menu-spacing u-custom-padding-bottom u-custom-text-active-color u-custom-text-color u-custom-text-hover-color u-custom-top-bottom-menu-spacing u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base"
              href="#"
            >
              <svg class="u-svg-link" viewBox="0 0 24 24">
                <use
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  xlink:href="#menu-hamburger"
                ></use>
              </svg>
              <svg
                class="u-svg-content"
                version="1.1"
                id="menu-hamburger"
                viewBox="0 0 16 16"
                x="0px"
                y="0px"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g>
                  <rect y="1" width="16" height="2"></rect>
                  <rect y="7" width="16" height="2"></rect>
                  <rect y="13" width="16" height="2"></rect>
                </g>
              </svg>
            </a>
          </div>
          <div class="u-custom-menu u-nav-container">
            <ul
              class="u-custom-font u-heading-font u-nav u-spacing-20 u-unstyled u-nav-1"
            >
              <li class="u-nav-item">
                <a
                  class="u-border-active-grey-30 u-border-hover-grey-30 u-button-style u-nav-link u-text-active-custom-color-1 u-text-grey-90 u-text-hover-custom-color-3"
                  href="extension.html"
                  style="padding: 10px 30px"
                  >extension</a
                >
              </li>
              <li class="u-nav-item">
                <a
                  class="u-border-active-grey-30 u-border-hover-grey-30 u-button-style u-nav-link u-text-active-custom-color-1 u-text-grey-90 u-text-hover-custom-color-3"
                  href="visuals.html"
                  style="padding: 10px 26px 10px 30px"
                  >visuals</a
                >
              </li>
            </ul>
          </div>
          <div class="u-custom-menu u-nav-container-collapse">
            <div
              class="u-black u-container-style u-inner-container-layout u-opacity u-opacity-95 u-sidenav"
            >
              <div class="u-inner-container-layout u-sidenav-overflow">
                <div class="u-menu-close"></div>
                <ul
                  class="u-align-center u-nav u-popupmenu-items u-unstyled u-nav-2"
                >
                  <li class="u-nav-item">
                    <a
                      class="u-button-style u-nav-link"
                      href="extension.html"
                      style="padding: 10px"
                      >extension</a
                    >
                  </li>
                  <li class="u-nav-item">
                    <a
                      class="u-button-style u-nav-link"
                      href="visuals.html"
                      style="padding: 10px"
                      >visuals</a
                    >
                  </li>
                </ul>
              </div>
            </div>
            <div class="u-black u-menu-overlay u-opacity u-opacity-70"></div>
          </div>
        </nav>
      </div>
    </header>

    <div id="instagramData">
      <h1>Instagram Data</h1>
      <p>
        Below is the information that was captured on one of our team members,
        let’s call her Alex. We have included detailed information on exactly
        what we did in order to get the information to look the way it does. If
        you’d like to see what information has been collected on you, we highly
        recommend following along.
      </p>
      <div class="row" style="margin-bottom: 10%">
        <img src="img/cloud.png" alt="Word clout" />
      </div>

      <div class="row">
        <!-- <img
          src="img/IGsentiments.png"
          alt="Sentiments data"
          style="height: 80%"
        /> -->
        <p>
          Alex began by asking Instagram for all of her information. To do this
          go to the three bars are the top right-hand corner of the screen,
          click on account activity, scroll to the bottom and request to
          download all your information. After a few hours or days, Instagram
          will send you an email letting you know that your download is ready.
          <br /><br />
          After receiving the information, we sifted through it and decided that
          the information about consumer tastes and in particular, reels, would
          be most interesting. We took this data and converted it into a .csv
          file.
          <br /><br />
          Taking this .csv file, Alex pulled out analytics about the information
          using SQL as well as created a word cloud to better visualize the
          data. This process proved to be extremely convoluted as we had to
          check multiple sources to find how to download the information, then
          waited a long time to receive the information, and then finally had to
          convert all of the data into a usable format.
        </p>
        <!-- <img src="img/IGtopics.png" alt="Instagram Topics Data" /> -->
      </div>
    </div>
    <div id="netflixData">
      <!-- # of things watched in 2022 : 103 -->
      <!-- # of episodes watched in 2022 : 100 -->
      <!-- Minutes of tv shows watched on Netflix: 550
 -->

      <h1>Netflix Data</h1>
      <p>
        Next, Alex asked Netflix for all of her information on what she has
        watched this year. This information was delivered within minutes and was
        much easier to parse through since it was already in a .csv format. The
        information that was in the file though only included the name of the
        movie or episode and when it was watched. In order to make this
        information more useful, Alex joined it with online Netflix tv shows and
        movies libraries that give more information about each show. This is the
        online dataset: https://www.kaggle.com/shivamb/netflix-shows that we
        used. From this point, we were able to draw analytics about what types
        of entertainment Alex like to consume.
      </p>
      <div id="dataCircle" class="row">
        <div class="column">
          <h6># of things watched in 2022</h6>
          <div class="circle"><p>103</p></div>
        </div>
        <div class="column">
          <h6># of episodes watched in 2022</h6>
          <div class="circle2"><p>100</p></div>
        </div>
        <div class="column">
          <h6>Minutes of tv shows watched on Netflix</h6>
          <div class="circle3">550</div>
        </div>
      </div>
    </div>

    <footer
      class="u-align-center u-clearfix u-footer u-grey-80 u-footer"
      id="sec-4299"
    >
      <div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
        <p class="u-align-center u-small-text u-text u-text-variant u-text-1">
          <span style="font-style: italic"
            ><i>&nbsp;</i> <span style="font-style: normal">Copyright 2022</span
            ><i>
              <a
                href="https://github.com/Oceanestars/Super-Knockout"
                class="u-active-none u-border-none u-btn u-button-link u-button-style u-hover-none u-none u-text-active-custom-color-2 u-text-body-alt-color u-text-hover-custom-color-3 u-btn-1"
                >TL-DR</a
              >&nbsp;
            </i> </span
          >|&nbsp; Made with
          <a
            href="https://nicepage.com/c/pricing-html-templates"
            class="u-active-none u-border-none u-btn u-button-link u-button-style u-hover-none u-none u-text-active-custom-color-2 u-text-body-alt-color u-text-hover-custom-color-3 u-btn-2"
            >Nicepage</a
          >
          <br />
        </p>
      </div>
    </footer>
  </body>
</html>