Personal
HTML/CSS/JS, Numbers
My daughter used to be a competitive gymnast, and for 8 years I tracked the scores from all her meets. I thought it'd be an interesting exercise to visualize the scores and see if I could spot any trends. Some of the questions I wanted to answer were: 1) How did her scores change over time?, 2) What other metrics could I come up with beyond scores?, and 3) Could any new metrics be more informative than just the scores? The first visualization concept I dug into was a way to represent her scores on each event relative to her competitors, so I designed and built a prototype with actual scores. The idea was to see the scores plotted on rows per event to see how they're distributed, and where her scores fell versus the group (and versus the average, too). Building off of that concept, I also wanted to come up with some metrics to support the idea of seeing how the scores were distributed, so I created a series of charts to visualize: difference vs the average (to adjust for the variable judging per meet), rank percentile (as a better relative measure of where she ranked), and z-score (to incorporate standard deviations as a representation for extraordinary scores).
VISUALIZING ALL SCORES
I wanted a way to visualize all the scores from my daughter and her competitors, so I built an HTML prototype. White circles are competitors scores, thick white vertical lines are the average score on each event, and colored circles are my daughter's scores (green if above the average, red if below). The scores are all in a JSON object, and the chart logic and layout is built with JavaScript.
DIGGING DEEPER INTO TRENDS AND STATS
I loved the way the visualization turned out, but as she competed in more events, it wasn't a good way to view long term trends. With that in mind, I created several charts to track how her scores were trending over time. Average difference, top 3 average difference, rank percentage, and z-score gave me a much clearer picture over the long term.
More Projects
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
Hi, I’m Josh Fallon — a design manager and product designer in Los Angeles with several years of in-house experience managing, designing, and launching products on web and native platforms for large organizations. More About Me