HTML/CSS/JS, Smart Scale, Apple Health
As a believer in the Quanitified Self philosophy ("self-knowledge through numbers", as it's simply described), I've been tracking various aspects of my personal life for the past several years. One of the most relevant ones for me is body weight. After years of recording my weight manually in a spreadsheet, I got a smart scale that syncs with Apple Health to make data collection more seamless, and made daily weigh-ins more practical. Now that I have over 7 years of usually at least weekly data (over 400 data points), I wanted to visualize the trends and correlate them with significant events like diets, vacations, and illnesses. One of the obvious insights was seasonal changes — if my weight was a stock, you could make a lot of money buying low in the summer (aftermath of getting in shape for swimsuit season) and selling high when the new year rolls around (aftermath of holidays and vacation gluttony). Time will tell, but I'm hoping to buck that trend in 2020.
BODY WEIGHT OVER TIME
Using the fantastic Metrics Graphics library (underpinned by D3) to build the visualization, I heavily customized the UI to get the look I wanted. A couple notable features are the rug plot on the y-axis (to linearly see where weights cluster) and a brush tool to zoom in (handy to zero in on shorter term trends).
LoopNet Design SystemCorporate In-House
LoopNet Listing Detail PageCorporate In-House
LoopNet Search ResultsCorporate In-House
Wall of QuotesPersonal Project
Dribbble Top Player StatsPersonal Project
Body Weight AnalysisPersonal Project
Gymnastics Scores Data VizPersonal Project