Prototype development - My drinks diary

I decided to develop my second prototype which is self-tracking application. I've been struggling with purpose of the app, however, I just decided to get started with visualizing dataset at first and develop this sort of "dashboard" as a tool that I can see the trends, relationship between elements and my preference, etc. 

I've kept tracking my drinking life since mid-August so I began to design dashboard with the dataset. And my next step will be developing the app that I can easily track or save drinks diary on mobile.

 1. Planning my website's structure - Brainstorming / Rough sketches

• Elements
  • Date
  • Type of drinks - Beer / Cocktail / Whiskey / Tequila / ....
  • Location
  • People I drink with
  • Time spent
    • Total / Average per day 
  • Dollars spent
    • Total / Average per day 
  • Drunkenness - None / Good / Tipsy / Bad / Binge

 

2. Wireframe V.1

3. Prototype V.1

 

4. Prototype V.2 (Implementing functions)

Work flow

• Create a JSON file
• Render my JSON onto a webpage
• Create a cohesive Web page utilizing a combination of regular HTML/CSS/JS, 3rd party Javascript libraries (Chart.js and Heatmap.js) 
• Map visualization (using Mapbox or CartoDB) - work in progress