🎉 Get ready to take control of your health! Use the checkboxes below to filter by macronutrients and discover how each specific nutrient can help you manage glucose peaks. Let’s make nutrition exciting! 🌟
The y-axis shows the average glucose peak—the highest glucose value recorded within a 2-hour window after consuming a food item. Only foods that meet at least 5% of the FDA-recommended daily value for the selected nutrients are included.
âś… Hover over each bar to see participant info like glucose peak, meal count, and HbA1C.
🖱️ Click on a participant to explore the individual meals that contributed to their average.
🎛️ Use the nutrient checkboxes, gender filter, and glucose threshold control to customize your view and uncover deeper insights.
As seen above, our interactive bar chart comprises several design choices that encourage users to interact with the data in hopes that it will raise their awareness regarding how their glucose level is affected by food macronutrients (protein, carbohydrates, fat) and types of carbohydrates (sugar and fiber).
To understand our design decisions, we need to firstly understand the y-axis unit: average glucose peak value. The “peak value” here describes how glucose levels typically rise and fall after eating. In other words, for each food intake, glucose levels increase, reach a peak within a 2-hour window, and then decline. We capture this highest point — the peak — as the representative glucose response to that food.
Then, we’ve provided a checkbox of all the macronutrients at the top page, arguably the main part of our visualization. This checkbox serves to filter the foods that qualify for the FDA-approved recommended value of those macronutrient intakes (as explained in the annotation). Anything above 5% of that value is considered significant and thus included in the calculation for the glucose peak value. This checkbox interaction feature was designed around the interaction techniques we learned in class, where we aim to achieve the connect and filter interactive elements, showing something conditionally, and providing more or less detail.
Lastly, there was a reconfigure element that was achieved by both the sort button and “filter by gender” button, both of which show a different arrangement (another interactive element discussed in class).
Other interactive elements that we thought were important are a hover and select feature, where users can simply hover over a participant and access more information regarding the food they consumed. While hovering, users can read the HbA1C value, which is the average blood sugar control value over 2–3 months. After clicking a bar chart, users can see which foods (Top 20) contributed to the participants’ glucose level, allowing them to evaluate what foods are most significant. This achieves the encode interactive element where we see a different visual representation.
An alternative design decision that we had was a red-dotted y-axis threshold line, which is set at 140 by default, to imply which level is considered healthy. Initially, we had this value fixed, but we later chose to have it user-adjusted since peak glucose responses can vary based on individual health conditions, such as insulin sensitivity or metabolic goals. Moreover, the red line was initially black, but we thought it’d be better in red since red usually implies a danger/warning zone, serving the purpose of this red-dot line.
EDA on that dataset. Since Rayyan had experience using a Dexcom, we understood the BIG IDEAs Lab Glycemic Variability and Wearable Device Data the best and decided that was the dataset we wanted to use. Ravi did EDA on the Food Logs of each participant, while Rayyan did EDA on the Dexcom data of each participant. Varick did EDA on the relationship between the food participants ate and their glucose levels.
We decided to use the Dexcom data and the food logs of each participant to see if there was a correlation between the food they ate and their glucose levels. We used the Dexcom data to find the average glucose levels of each participant and then used the food logs to find the average amount of protein, sugar, carbs, fat, and fiber each participant ate. We then used this data to create a bar chart that shows the average glucose levels of each participant and the average amount of protein, sugar, carbs, fat, and fiber they ate.
We brainstormed and ideated the interactive visualization that we wanted together as a team, taking us around 4-5 hours to finally decide on an interactive idea that filled the filter, connect, reconfigure, and elaborate aspects of interactive visualizations covered by Prof. Lau in class. It took us a long time to ideate because we had ideas that weren't supported by our dataset, either because of missing data or the nature of the dataset itself, so there were many times that we had to reset back to square one.
After getting through the aspect that took the most time, our interactive visualization consisted of two main parts: the main bar chart, and the other components, including the dropdown menus that allowed the user to customize the food features they wanted to display, a sort by y-axis value button, and filtering by gender. The overall process took 3-4 hours. Varick worked on developing the components, while Ravi worked on initial prototypes of the bar chart. Then, with both of those done, Rayyan linked it to our dataset and made sure the filtering process was working. With those delegations, we managed to develop our interactive visualization efficiently.