-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
310 lines (272 loc) · 14.5 KB
/
index.html
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
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
<!DOCTYPE HTML>
<!--
Urban by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Eating Experience Vis</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/home.css" />
</head>
<body>
<!-- Header -->
<header id="header" class="alt">
<!-- <div class="logo"><a href="index.html">Urban <span>by TEMPLATED</span></a></div> -->
<a href="#menu">Menu</a>
</header>
<!-- Nav -->
<nav id="menu">
<ul class="links">
<li><a href="index.html">Home</a></li>
<!-- <li><a href="motivation.html">Motivation</a></li>
<li><a href="generic.html">Data</a></li>
<li><a href="generic.html">Task Analysis</a></li>
<li><a href="generic.html">Design Process</a></li> -->
<li><a href="visualization.html">Final Visualization-1</a></li>
<li><a href="parallel.html">Final Visualization-2</a></li>
</ul>
</nav>
<!-- Banner -->
<section id="banner">
<div class="inner">
<header>
<h1>Visualization of Eating Experience</h1>
<p>CS7295 Final Project by Everlyne Kimani, Farha Jawed, Yixuan Zhang</p>
</header>
<a href="#main" class="button big scrolly">Learn More</a>
</div>
</section>
<!-- Main -->
<div id="main">
<!-- Section -->
<section class="wrapper style1">
<div class="inner">
<div class="col col2">
<h3>Motivation</h3>
<p> When talking about eating, what is the first thing that pops up in your mind?
When we look at the applications in the market,
we have seen tons of apps focus on tracking
food nutritional information, such as carbs, calories, sugar, etc.
The goal of current tools is to promote awareness of healthy eating and potentially change eating behavior.
However, eating experience can be influenced by a variety of dimensions,
including elements that are external to an individual
(e.g., time, location, companion, weather, distraction)
and elements that are internal to an individual
(e.g., mood, how hungry you are).
In this project, we are interested in visualizing eating
experiences to promote self-reflection on eating behavior.
</p>
<!-- <a href="#" class="button">Learn More</a> -->
</div>
</div>
<!-- </div> -->
</section>
<!-- Section -->
<section class="wrapper style2">
<div class="inner">
<div class="col col2">
<h3>Data</h3>
<p class="content">
Since we didn’t find datasets suitable for the scope of this project, we collected the data by ourselves.
We designed an eating experience journal using Google Forms
and used the convenience sampling method to collect our first
available primary data source.
Oral consent forms were obtained from the participants who agreed to contribute their data.
We received 420 responses from 10 users (4 male and 6 female)
from February 16 to March 24, 2018.
The data types include categorical, ordinal, and quantitative.
To be specific, categorical data includes usernames, meal type,
food content, eating companion, location of eating,
eating distraction, weather, and mood.
Ordinal data includes hunger scale before and after eating.
Quantitative data includes date and time. </p>
</div>
</div>
</section>
<section class="wrapper style1">
<div class="inner">
<div class="col col2">
<h3>Task Analysis</h3>
<!-- <p>summary of interview and task table</p> -->
<p class="subhead">INTERVIEW</p>
<p class="content">Our team interviewed Professor Carmen Sceppa of Bouve College of Health Sciences, Northeastern University, on the merits and methodology of our project on visualization of the eating experience of people. She believed that we had all the subjective domains (e.g. food, environment, emotion level etc.) needed to visualize the eating experience. Furthermore, she added that, as implemented in our data collection system, it was a good idea to take company, distraction, taste of actual food, and after-effects of food into consideration as components of the overall eating experience. We also came to know about current dietary intervention in general and ways to help people promote self-reflection on eating behavior from an expert’s point of view. In her opinion, dietary intervention is following dietary guidelines that involve eating all food groups (fruits, vegetables, dairy etc.) and maintaining a regular food habit. She said that incentives for eating can help people promote self-reflection on eating behavior. By incentives, she meant “relating the benefits of eating healthy to what it means to improving health or maintaining health”. The takeaways from this interview are- (i) the key to eating well is to enjoy a variety of nutritious foods from all food groups, and (ii) external and internal drivers contribute to deciding what and how much to eat. So, we focused on external and internal factors when visualizing eating experience to help people self-reflect on eating behavior.</p>
<p class="subhead">TASK TABLE</p>
<p class="content">Based on our interview notes and background research, we created a list of domain asks on self-reflection on eating behavior.</p>
<table>
<tr>
<th>ID</th>
<th>TASK</th>
<th>HIGH LEVEL</th>
<th>LOW LEVEL</th>
<th>MID LEVEL</th>
</tr>
<tr>
<td>1</td>
<td>View summary of an individual’s eating pattern</td>
<td>Consume: Present</td>
<td>Search</td>
<td>Summarize</td>
</tr>
<tr>
<td>2</td>
<td>Identify eating regularity</td>
<td>Consume: Discover,Present,Enjoy</td>
<td>Search</td>
<td>Identify</td>
</tr>
<tr>
<td>3</td>
<td>Explore how internal elements (mood and hunger scale) influence eating pattern</td>
<td>Consume: Discover,Present,Enjoy</td>
<td>Search</td>
<td>Identify</td>
</tr>
<tr>
<td>4</td>
<td>Explore how food satisfaction, mood, and eating effort are related</td>
<td>Consume: Discover,Present,Enjoy</td>
<td>Search</td>
<td>Identify</td>
</tr>
</table>
</div>
</div>
</section>
<!-- Section -->
<section class="wrapper style2">
<div class="inner">
<header class="align-center">
<h2>Design Process</h2>
</header>
<div class="flex flex-3">
<div class="col align-center">
<h3>Initial Sketches</h3>
<p>We began the design process by preparing sketches of data collected during the survey period. Our initial sketches included various visualizations including timeseries of an individual's eating pattern, simulated map showing location-based eating habit, cloverleaf like analogy to summarize a user's diet, radial graph visualizing the gist of the diet, and bar chart to depict the effects of emotion on participant's level of food craving. Finally, we decided to pick and choose the best of our ideas taking into account the overall scope of the data we collected and settled on the following: a scatter plot to show the overview of eating pattern, a variation of box-plot to show the hunger level, a bar plot to explore how internal elements (e.g. mood) influence eating pattern, and a map-based visualization to identify how eating location is related to foods people eat.</p>
<a href="https://drive.google.com/open?id=1RLrTLov9_bFejz1MhQDayAPHPU7pG2U_" class="button">View Initial Sketches</a>
</div>
<div class="col align-center">
<h3>Interactive Sketches</h3>
<p>After settling on the data and the types of chart to be used in our visualization, we began to brainstorm ideas to include interactivity and color. We decided to use categorical colormap from colorbrewer to depict meal types in our scatterplot. We used filtering, brushing and linking, linked highlighting, and details on demand technique in the scatter plot for interactivity. When any of the circles is clicked, hunger level graph, bar plot with depiction of satisfaction with mood, and location-based visualizations will be shown - all of these again support details on demand.</p>
<a href="https://drive.google.com/open?id=1Ne0hmGoa7uJj0MP4vM-UkwZlkFTfooU6" class="button">View Interactive Sketches</a>
</div>
<div class="col align-center">
<h3>Final Visualization Design</h3>
<p>After data analysis, we had to make a few last tweaks to our interactive sketches. Instead of a variation of box plot to show hunger level, we resorted to a line graph to clearly visualize the change in hunger level over time. Moreover, we decided not to use map-based visualization as we couldn't find any interesting variation of eating location of people. Instead we agreed to present an individual's eating pattern using parallel visualization. We kept the scatter and bar plots from the previous design phase. </p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="wrapper style1">
<div class="inner">
<!-- 2 Columns -->
<!-- <div class="flex flex-2">
<div class="col col1"><br>
<div class="image">
<video width="320" height="200" controls>
<source src="images/demoVid.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> -->
<!-- <a href="visualization.html" class="link"><img src="images/final.png" alt="" /></a> -->
<!-- </div>
</div> -->
<div class="col col2">
<h3>Final Visualizations</h3>
<p class="content">We built our visualizations using d3-v4, HTML, CSS, Bootstrap, and JavaScript. Our final visualization includes interactive scatter plot which provides an overview of regular eating pattern of all participants. Scatterplot allows to identify trends and outliers easily. Line graph was chosen to clearly visualize the change in hunger level over time. We used bar plot to explore eating satisfaction with mood as it is well suited for the task of looking up individual values. We resorted to a parallel visualization to explore an individual's eating pattern with more detailed information of environmental and emotional situation. Parallel visualization exposes greater detail and can display correlations among many variables. </p>
<a href="visualization.html" class="button">Click to View Final Visualizations</a>
</div>
</div>
</div>
</section>
<!-- Section -->
<section class="wrapper style2">
<div class="inner">
<div class="col col2">
<h3>Data Analysis</h3>
<p>
From our scatterplot visualization, we found that participants tend
to have a big variation in meal time, eating regularity, and change
in hunger scale.
We didn't observe a significant relationship between mood and how
people like the food.
Most users found the photos of meals were appealing as they helped
them better recall what they had for meals.
From the parallel visualization, users indicated that this visualization
helped them understand an individual's eating pattern in a more global sense.
</p>
</div>
</div>
</section>
<!-- Section -->
<section class="wrapper style1">
<div class="inner">
<div class="col col2">
<h3>Data Analysis</h3>
<p>
From our scatterplot visualization, we found that participants tend
to have a big variation in meal time, eating regularity, and change
in hunger scale.
We didn't observe a significant relationship between mood and how
people like the food.
Most users found the photos of meals were appealing as they helped
them better recall what they had for meals.
From the parallel visualization, users indicated that this visualization
helped them understand an individual's eating pattern in a more global sense.
</p>
</div>
</div>
</section>
<!-- Section -->
<section class="wrapper style2">
<div class="inner">
<div class="col col2">
<h3>Conclusion</h3>
<p>We designed an eating experience journal and advertised our journal using Google Forms.
We collected 420 responses between February 16 to March 24, 2018.
We used a variety of visualization techniques to explore how
visualizations can be used to improve awareness and self-reflection on eating behavior.
Our future work will continue to include an evaluation with users
who contribute the data. We believe visualization of personal data
is more meaningful to the person who provides the data.
</p>
</div>
</div>
</section>
<!-- Section -->
<section class="wrapper style1">
<div class="inner">
<div class="col col2">
<h3>Demo</h3>
<p>Click <a href="images/demoVid.mp4" style="color: blue">here</a> to view the demo video of our project with instructions.</p>
</div>
</div>
</section>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<div class="copyright">
<ul class="icons">
<!-- <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li> -->
<li><a href="https://github.ccs.neu.edu/kimani15/CS7295-Viz-Project-" class="icon fa-github"><span class="label">Github</span></a></li>
</ul>
<p>© DS-Viz 2018. All rights reserved. Design: <a href="https://templated.co">TEMPLATED</a>. Images: <a href="https://unsplash.com">Unsplash</a>.</p>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>