Next Generation Prototype

Prototype v.3

- View live demo here

I ended up with making a dashboard which can easily check the information about my drinking history.  I've collected the dataset since early august and kept adding it to my json data. 

At first, I made the overview section that I can check out how much money and time I spent over the last 2 month and the average spent per day. This part is to alert myself about spending lots of money and time for drinking. 

Also, I was curious about the most common drink I had, I added 'My favorite drink' so that I can see the trend of what I had. I had a technical difficulty to get the right data from the json file. I sorted all the brand name of drinks and count them by matching duplicates.

I used the Heatmap JS from D3.js to visualize the value of drunkenness day by day. The more I got drunk, the more color gets dark. You can see the pattern of my drinks on the daily map that I usually got drunk around weekends. And the pie chart from Chart JS is for visualizing the ratio of drunkenness over the period. 

Once you hover over each day unit, all the information about that day is shown at the bottom of the map.

I'm going to add a map later which shows the specific locations I went to drink. It shows more solid color based on the frequency of visiting a place. This is the early version of map visualization.

While developing this dashboard, I'm going to build mobile tracking site as well which allows me to track all the information above more easy and send the data to the dashboard right away so that I don't have to add data in the json file manually.