rawment/data.html at master · areeta/rawment · 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
<!doctype html>
<html lang="en">
  <head>
    <!-- meta tags -->
    <meta charset="utf-8">
    <meta name="author" content="Vivian Nguyen & Areeta Wong">
    <meta name="description" content="A responsive web application that analyzes and displays instant
      ramen statistics to help college students find the best ramen for them.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="RAWMENT, ramen, ramen review, ramen information,
    inf 133, inf 133 final project, inf 133 project">

    <!--Online scripts-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!--JQuery-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.1.2/math.min.js"></script>
    <!--math.js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.1.2/math.min.js"></script>
    <!--Load Vega-lite-->
    <script src="https://cdn.jsdelivr.net/npm/vega@5.6.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.0.0-beta.8"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@5.1.3"></script>
    <!-- BootStrap -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
			integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
			crossorigin="anonymous">
		</script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
			integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
			crossorigin="anonymous">
		</script>

    <!--Local scripts-->
    <script src="js/get-ramen-review-data.js"></script>
    <!--Local ramen-review-data file, which will load all of the ramen reviews into the variable RAMEN_REVIEWS-->
    <script src="js/ramen-review.js"></script>
    <!--Load local ramen-review.js file, which was generated from TypeScript-->
    <script src="js/graphs.js"></script>

    <!-- Reem Kufi Font -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Reem+Kufi&display=swap" rel="stylesheet">

    <!-- Style -->
    <link href="https://fonts.googleapis.com/css2?family=Muli:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/data.css">

    <title>RAWMENT: Data</title>
    <link rel="icon" href="assets/favicon.svg">
  </head>
  <body>
    <!-- navigation bar -->
    <nav class="navbar navbar-fixed-top navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand js-scroll-trigger" href="index.html">
        <img src="assets/favicon.svg" alt="Bowl of ramen">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="data.html">Data</a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- description section -->
    <section id="description">
      <div class="col">
        <div id="title">Data</div>
        <div id="detail">
          From 2500 independent reviews of different instant ramen brands and types from the website,
          “The Ramen Rater”, we’ll aggregate and visualize helpful ramen information to help you find
          your next meal
        </div>
      </div>
      <img src="assets/world-view.svg" alt="One person looking at the globe" id="world-view">
    </section>

    <!-- stats section -->
    <section id="stats">
      <div class="section-title">General Statistics</div>
      <p>After looking at all of the data, there were:</p>
      <ul>
        <li><span id="numberRamenReviews">???</span> ramen reviews</li>
        <li><span id="numberCountries">???</span> countries with ramen reviews</li>
        <li><span id="numberStyles">???</span> types of style of ramen</li>
        <li><span id="numberBrands">???</span> brands of ramen</li>
      </ul>
      <p>Please make sure to view these graphs on a larger screen since we wanted to include as much information
        on the graphs without compromising the user's ability to see the data (no responsiveness on graphs)!
      </p>
    </section>

     <!-- country section -->
    <section id="country">
      <div class="section-title">Ramen Information by Country</div>
      <p>The top three countries with most mentions in the data are Japan, USA, and South Korea.</p>
      <div id="reviewCountVis"></div>
      <p>The top three countries with highest average ratings in the data are Malaysia, Singapore, and Indonesia.</p>
      <div id="countryAvgStarsVis"></div>
    </section>

    <!-- style section -->
    <section id="style">
      <div class="section-title">Ramen Information by Style</div>
      <p>While pack style ramen has the most reviews, bar style ramen has the highest average ratings.</p>
      <button id="styleSwitch" class="btn btn-primary" onClick="showStyleGraph()">Show frequency</button>
      <div id="styleAvgStarsVis"></div>
      <div id="numStylesVis"></div>
    </section>

    <!-- brand section -->
    <section id="brands">
      <div class="section-title">Ramen Information by Brand</div>
      <p>While Higashi has the highest average rating for ramen, Nissin has the most ramen reviews.</p>
      <p>Disclaimer: For both graphs, we opted to show only the top 50 of each type of graph because
        the actual graph was far too big to display.
      </p>
      <button id="brandSwitch" class="btn btn-primary" onClick="showBrandGraph()">Show frequency</button>
      <div id="brandAvgStarsVis"></div>
      <div id="numBrandsVis"></div>
    </section>
  </body>
</html>