Daily Meal Data Analysis with Javascript

During the pandemic, we are spending most of our time at home, and cooking is one of the most important things we do when we are at home. So for this project, I collected my daily meal data to analyze and understand how different meal factors affect my dining experience, and which one gives me the highest satisfaction.

Data Collection

Properties my project
1. Date ( from 9 January 2021 to 4 April 2021 )
2. Type of meal ( breakfast, lunch, dinner, and snacks )
3. Price of the meal( $0–$200 )
4. Food category ( American food, Chinese food, and other food )
5. Main Flavor ( salt, spicy, sweet, sour, bitter )
6. Calories of the meal ( 0 — 2000 )
7. Sugar include in the meal ( 0g —200g )
8. Protein include in the meal ( 0g — 200g )
9. Fullness level ( from 0 to 6 ) fullness level :0 means I am hungry, fullness level :3 means I am not hungry, fullness level :6 means I am very full.
10. Deliciousness level ( from 0 to 6 ) deliciousness level :0 means taste really bad, deliciousness level :3 means taste not bad, deliciousness level :6 taste awesome.

Data Collection Challenges
Sometimes I can't find certain properties of my meals, so I use NOURISH by WebMD site to calculate approximate numbers for my properties. For the main flavor attribute, some food is spicy and salty, or slatted and sour, I just choose the main flavor based on how I feel about the meal.

Another challenge thing is using html to collect the data from JSON form. The data format in JSON form should be: "main_ﬂavor": “salt”, but the data shows on the html is: main_ﬂavor: salt, so I need to add double quotes to fit the format and finally I enter the data into my data.json.

Raw data

Data visualization

rScale: price of the meal( $0 to $200 )
xScale: main ﬂavor in the meal(sour, sweet, spicy, salt, and, bitter (because I never eat bitter food so this ﬂavor did not show on the visualization )
yScale: calories included( 0 to 2000 )
color of the circle: deliciousness leveling of the meal from number 0 to 6:
(deliciousness_level:0 means taste bad. deliciousness_level:3 means taste ok, deliciousness_level:6 means taste awesome)

‍Hypothesis:
From the visualization, I can see some circles both large(the meal is more expensive) and dark (that meal is more delicious) are illustrated on the higher level of yScale (higher calories), this supports my hypothesis that the meal include high-calorie would be more expensive , and can bring me more satisfaction.

Conclusion:
I think my satisfaction with the meal is indeed affected by the price, and this draft can well support my hypothesis. Usually, I order higher-priced meals from restaurants, and every time I want to order multiple meals, so it is definitely a high-priced and high-calorie food. In addition, I am not a good cooker, so I am less satisfied with the food I cook, in the othe words, I can not get higher satisfaction at lower price meals. Also, the draft shows me that I really like spicy food, I have many very dark circle(higher deliciousness level) on the spicy area. From the draft, I can see that I am not really like sour food because I have a few light color(lower deliciousness level ) circle on the sour area.

Daily Meal Data Analysis with Javascript.pdf