Building a Data Dashboard

Hey all,

Despite the large number of exercise tracking solutions that have been on the market for a few years now, I decided to start a running journal last year that essentially began as a photo blog - just one photo for each run so that I could document the things that cross my path as I exercise outdoors.

In addition to the photo, I store a variety of meta data about each run. Now that I have over a year’s worth of data stored up, I decided to visualize some of the key metrics in a custom dashboard.

I put this dashboard together using the very robust charting library NVD3, which is built on D3JS. I’m continuously updating the charts as I learn more javascript, and am curious if and how others in this community are exploring data visualization in their Apps.

I wrote my own dashboard for writing, which counts how many words I added or subtracted in a given day. Then I chart the last 30 days. I used Jquery and Flot.

However, I haven’t got around to graphing my spreadsheet onto a web dashboard yet. So I should definitely think about doing that in the future.

Hello Mike,

What an awesome project! May I ask you what did you use to break down runs by photo location? Actual coordinates cross-referenced against the NYC Open Data file with neighborhood names, or u manually tagged the neighborhoods?

Thanks in advance,


Analytics just became personal! Can you express your everyday life in numbers? Can you improve your life by turning it into a series of games and experiments? Follow my personal “Measured Me” experiment to find out:

Hey thanks all!

@Kiba - This sounds like a great project! Reminds me of Stephen Wolfram’s data tracking a bit… except he tracks individual keystrokes. How are you finding Flotcharts to work with? I really like their simplicity.

@measuredme - This has been evolving as I learn more Wordpress customization, but as of right now I’m just pulling data from post categories and tags. I’m in the process of setting up custom content types that I’ll use to store more data that won’t show up anywhere else on the front-end… I painted myself into a corner pretty quickly sticking to just categories and tags, but fortunately there are plenty of ways to get around that now in Wordpress.

To your point, NYC Open Data is amazing and I’d love to be able to utilize that resource somehow.

Flotcharts, like any library I am unfamiliar with, took me a while to figure out. If you want date information, you need to set the mode to “time” and ensure all your date are in unix time. Once I figured out those things, I got what I wanted.

I heard Stephen Wolfram is a bad example because all he never actually use the data to improve himself.

Neat! Not sure about the pie charts though :slight_smile:

How does your raw data look like?

Yeaaaaah, I’m continuously tweaking the charts for each metric… I think the pie is successful for location but not so much for the other charts with only two categories each. Suggestions welcome :slight_smile:

Wordpress stores the meta data I add for each photo (and all other content) in a sql database - and also a nicely sortable table in my website’s admin interface. Right now I have to punch the data for each metric into a javascript file manually, but my next project is automatic linkage between the sql database and the charts themselves (probably using JSON). Punching in the data manually is OK to do for myself, but if anyone else wanted a dashboard setup for them using Wordpress data I’m sure that would be a deal-breaker :slight_smile:

Punching in data manually is better than nothing. If I wait for an automatic tool to measure my steps count, I would have never gotten started.

@Kiba - haha good point :smiley: I suppose that comment was not directed at this audience, but more for a hypothetical non-techy friend that might want a dashboard made for them that measures their own Wordpress data.

Another suggestion: It might be better to not use wordpress and write a website entirely dedicated to self quantification dashboard.


You actually inspired me to learn D3.js and NVD3 :slight_smile: that would definitely give us more flexibility when dealing when data, compared to cookie-cutter software like Tableau.

Considering switching to Wordpress too soon (I am currently using Typepad). And I am adding your site to my Blogs That Inspire Me blogroll :slight_smile:


Hey Thanks! I think you’ll find they’re both fantastic tools. If you have any questions getting started with either D3 or Wordpress give me a shout.

I should also mention, your site is quite a fantastic resource for personal metrics of all kinds - thanks for sharing them!

New dashboard iteration, 11-10-2012****

I updated the dashboard recently with a series of small improvements:
-Pie charts that didn’t really reveal much were removed
-I added an interactive stacked bar chart that shows the kinds of exercise I do each month. This chart I think is the most successful thus far of really telling the story of the blog. I’m looking at ways of adding annotations to key points in the data (like, for example, when an injury caused me to switch from running to cycling)
-I’m using color a little more meaningfully now… that is, only to show differences in metrics when it’s actually needed.
-Since this dashboard is just as much about memory and reflecting on where I was at each outing, I added a widget to show some of my favorite photos. I think it’s a bit of a misnomer that dashboards can only show quantitative information :slight_smile:

Hey QSers,

It’s been a while so I thought I’d check in with an update. Over the last several months I’ve tried to focus my efforts on building visuals that reveal the most relevant and insightful trends in the data I’m collecting (to recap, for me that is outdoor exercise data) – and cut out the fat. It’s been a very gradual, iterative process and I still have a long way to go, in part because my questions and interests continue to change over time.

The latest dashboard can be accessed here: Things I Run Into - Blog Dashboard

For the most part, I’ve tried to organize the information to answer the following questions in this order:
[]What is the scope of the data? Tell the user what they’re looking at in a nutshell so that the rest of the information has context and boundaries
]How am I doing? At the first of this year I started to more carefully track performance data. My basic concern here is knowing where I’m at and if I’m getting better or worse in particular areas
[*]How has the story changed over time? One of the first things that drew me to data visualization was the notion that over time I’d be able to look back over long periods and spot patterns, reflect on experiences, and make improvements.

In the pipeline I’m working on better ways mapping information (what I’m mapping right now admittedly isn’t very insightful) and benchmarking so that I can see how my performance data stacks up against the average Joe and various CDC fitness levels.

As always, I’d love to hear the thoughts and insights of those in the community.

Hello Mike,

It is actually your dashboard that has inspired me to create my own Lifestream! I am not as good with javascript or D3 as you are, so I used Google charts code( to build my dashboard. I try to update my data every 2 weeks. I am experimenting with ultimate metrics for capturing and quantifying everyday life, and Quantified Summer is the first phase of this longitudinal experiment in testing and validating the system. As you can see, in addition to main metrics, I included examples of additional insights that can be obtained from the data.

Here is the dashboard:

I will be releasing report by the end of September, and presenting some results at the QS conference in San Francisco


That is awesome!! And I’m glad you got started with Google Chart tools – as you found out they’ve got all the basics covered for the most common chart types and the api gives you a surprising amount of flexibility.

Your dashboard brings up a question that I’m starting to tinker with more in visualizations I put together – that is, additional context for the data. As I’m looking at your charts I’m thinking about how your data stacks up against different benchmarks. For example, are you getting more or less sleep than most people in your age group? Are you more or less active than government issued health guidelines? You might not be interested in comparing your metrics against benchmarks like that - which is fantastic if you’re just focused on self reflection and discovery - I’m just finding at this point in my dashboarding efforts that I want to build in as much comparative analysis into each graph as possible.

That’s a seriously impressive amount of self tracking. I’d be interested to hear what insights you’re discovering along the way… unfortunately San Fran is a bit far away!

Are you still updating this dashboard? Or what are you currently using? :slight_smile:

1 Like

Hey Lars – what a blast from the past!

I’m not updating that dashboard anymore, but I still curate the dataset and funnel it instead to Tableau Desktop. I don’t publish it to the web, but I get a lot of great use from it and like the speed + flexibility when creating views that Tableau provides.

Any new QS efforts on your end?

I’ve been building a dashboard with Google data studio. This is one of the pages:

But I’m not sure if I can use to calculate correlations or get insights in other ways than just looking through the data or put two variables on the same graph :slight_smile:

I’ve also considered making a business out of making a generic quantified self dashboard product, but it seems like people’s needs might be too different, and they have too many different trackers, which all has to be supported.

Currently I’ve been playing around with the idea of making a more specific quantified self dashboard for a specific use case, and then make integrations with as many trackers as possible for that use case. But I’m not sure about which area to choose yet :slight_smile: