I have been tracking some of my personal data for several years. To do it, I have used many great apps & tools that enable me to memorize a large amount of personal data. The only thing missing was the personal data dashboard displaying my activity metrics that I could look through every morning to have an insight into the results to be improved to get healthier. This is the idea that is behind my personal data dashboard built with the use of Chart.js and Leaflet libraries.

The dashboard visualizes different health-related metrics in 2 steps:

  • Quick view : The background color of the landing page enables to identify at once my present global health status. The battery percentage indicator let me find out at a glance the current trend in my metrics (it changes every day).

    • Analytical view: For each page, data history as well as main metrics provide a more in-depth analysis of my current health status and enable to understand how to improve my metrics.

Currently tracked indicators :

  • Number of steps
  • Weight
  • Amount of coffee taken
  • Monthly activities
  • Travel

All this data is tracked via an API created to collect interesting information coming from various social networks like foursquare, tripsQ (foursquare based travel app) or from an application specially created to track my daily caffeine intake. It also takes my Fitbit One and Fitbit Area data.

To visualize certain data (foursquare checkins) it was important to build a treemap. As it was not included in the Charts.js library. I’m posting it in pull request on GitHub so that it can be reusable by others.

In future this prototype could aggregate data from more tools and networks. So, it’s only just begun!:)

My API : http://api.fxcardi.com

Share this project: