A responsive web application that analyzes and displays instant ramen statistics to help college students find the best ramen for them.
As the stereotype says, many college students around the world live up to the concept of a “broke college student”. During our search for ideas, we thought we could use the data set of instant ramen noodles, a primary food source that many broke college students eat day to day. Our final project is a website to analyze and display instant ramen statistics to help college students find the best ramen for them.
To build our project, we’ve opted to use a data set from Kaggle, which has compiled over 2500 independent reviews of different instant ramen brands and types from the website, “The Ramen Rater.” We will be analyzing and visualizing this data using JavaScript, TypeScript, Vega-Lite, and JQuery; for the front end, we will be using HTML and CSS.
- Use Figma, an online collaboration design tool, to create mockups of each page
- Figma Mockups with Style Guide: https://www.figma.com/file/XKVAFUWeG7JXBygHBhpzuT/RAWMENT?node-id=4%3A291
- Figma Prototype with Style Guide: https://www.figma.com/proto/XKVAFUWeG7JXBygHBhpzuT/RAWMENT?node-id=1%3A2&scaling=min-zoom
- Use illustrations from websites like Undraw.co and Icons8 to instill a sleek UI
Although we used Figma to create mockups, they served more as inspiration and our final product has some changes!
- A mobile-friendly, dynamic landing page that uses Bootstrap to mimic a Ramen-eating experience.
- Describe the context of the study
- Describe the context of the project
- An overview of how we plan on giving meaning to the data.
- Determine which countries have the most ramen
- Determine which countries have the highest rated ramen
- Which style has the highest rating?
- What style has the most mentions?
- What brand has the highest ratings?
- What brand has the most mentions?
- What style has the highest ratings?
Although our original project description had most common noodle flavor and top ramen of every year, we decided to remove those in exchange for frequency based graphs on brand information with rating and amount due to the fact that the data set had thousands of variations for flavors and there was no year information.
For the data page, we wanted to show majority of the graph data and make it easy for the viewer to read the data so we did not make the graph responsive when looking at smaller screens.
@nguyev12
- Convert the raw CSV data into usable JSON data to be processed with JavaScript.
- Responsible for the Vega-lite and graphical portion of interpreting the data.
@areeta
- Design and create mockups for the website using Figma.
- Responsible for the HTML/CSS/Bootstrap portion of the project.