Slice of Life

• 

  submitting a category/activity/hours will update the pie chart, which is labeled by category. Clicking on a slice will show the breakdown.

• 

  pie chart with all entries, not grouped by category

Inspiration

As college students, we feel constantly drained and overcommitted. Where does our time go? Are we spending our hours effectively? Often we face this problem because we unknowingly make too many commitments without realizing the breadth of time each commitment will take up. Allison was facing this problem last year, and her mentor advised her to list out all of her commitments and her estimate of time each takes up in a week. Then Allison’s mentor added up all the hours of each commitment and subtracted from 168, the total number of hours in a week, to show how many hours a week she would have left after all of her commitments. This breakdown was an eye-opener as Allison realized how few hours in the week she had left for herself to sleep, eat, relax, and socialize. As inspiration from this method of breaking down the hours in our week, we built a webapp to help us visualize how our time is spent in a single week.

What it does

When a user inputs activities and the time each takes a week, Slice of Life will automatically generate a Pie Chart, showing the breakdown of how our 168 hours a week are spent by category, such as school, work, social, and exercise. This visualization gives users a clear overview of which types of activities they are spending the majority of their time on, and which they are spending minimal time on. For example, after using Slice of Life, a user may realize the large percentage of their 168 hours per week their work commitments take up, prompting the user to consider cutting back on their work hours if they are feeling overwhelmed with all their commitments. Users can also view a breakdown of their time spent within each category of commitments so that they can see the exact amount of time each specific commitment takes up.

How we built it

We started off brainstorming solutions to this problem of overcommitting and decided we wanted to help users visualize their activities. We first used dummy JSON to figure out how we would format the data and pass it into a VictoryPie chart. Then, we allowed user input and made sure that upon each input, our graph would update. Finally, we added more features to our visualization, such as a breakdown view and a more detailed view.

Challenges we ran into

We aren’t super familiar with using React, so we got stuck occasionally. A big challenge was making our graphic constantly update with user input JSON. Our state JSON was updating, but the program didn’t recognize that, so we had to update other states to make the component update by itself. We also struggled with passing our data JSON into another component for display, and we fixed it by restructuring our code so that user input was in App.js so that we could access the data.

Accomplishments that we're proud of

Working together as a team, sticking it out through the struggles, and producing a presentable end product.

What we learned

We learned how to use React. More specifically, we learned about hooks, as well as how to have the pie chart respond automatically to user submissions by constantly updating the state.

What's next for edit later

We would like to survey other college students on whether they also struggle with overcommitting, and whether they would use our product to assist them in visualizing how their time is spent per week. If we get positive responses, we would like to convert our web app to a mobile app for user convenience.

Built With

• javascript
• react