How to display workout progress at 3 different levels in a linear way
October 5, 2018 10:19 AM Subscribe
Programmers and data scientists, I need your guidance on displaying a certain configuration of workout results in graph form for an app I am working on. Details below the fold.
A user does a specific exercise during a workout on a given day.
They can choose the intensity level of that exercise each time they work out. (Beginner, Standard, Advanced).
They then log the number of reps (strength) or seconds (cardio) they were able to complete while doing said exercise. The verbiage doesn’t matter — both reps/seconds result in a 1-3 digit number.
I need to find a way to display both aspects of this data in a linear way so that it is clear to that user what their progress has been in terms of reps/seconds at the three intensity levels over time.
What kind of graph/chart/data visualization would a) communicate this and b) be something I could code in Swift or Obj-C so it can be displayed in an app? Links to Github repositories would be AWESOME.
Client has proposed these visualizations but I do not know if they make sense or if they're even possible to code. (I am a designer, not a programmer.)
A user does a specific exercise during a workout on a given day.
They can choose the intensity level of that exercise each time they work out. (Beginner, Standard, Advanced).
They then log the number of reps (strength) or seconds (cardio) they were able to complete while doing said exercise. The verbiage doesn’t matter — both reps/seconds result in a 1-3 digit number.
I need to find a way to display both aspects of this data in a linear way so that it is clear to that user what their progress has been in terms of reps/seconds at the three intensity levels over time.
What kind of graph/chart/data visualization would a) communicate this and b) be something I could code in Swift or Obj-C so it can be displayed in an app? Links to Github repositories would be AWESOME.
Client has proposed these visualizations but I do not know if they make sense or if they're even possible to code. (I am a designer, not a programmer.)
Agree with madcaptenor's final suggestion. It's just three different (though related) data series overlaid. Each should be toggleable so they can see just one or all three; they'd be on different vertical scales presumably (i.e., probably fewer reps/less time at higher intensity).
posted by supercres at 10:45 AM on October 5, 2018
posted by supercres at 10:45 AM on October 5, 2018
they'd be on different vertical scales presumably
that's a good idea. But then how do you decide how much to rescale?
(speculating about other people's graphs is more fun than making the ones my employer wishes I were making)
posted by madcaptenor at 10:49 AM on October 5, 2018 [1 favorite]
that's a good idea. But then how do you decide how much to rescale?
(speculating about other people's graphs is more fun than making the ones my employer wishes I were making)
posted by madcaptenor at 10:49 AM on October 5, 2018 [1 favorite]
Maybe something like this?
- Y axis is plotted as ± percentage from baseline, which here we assume is first workout. Maybe after sufficient time, re-estimate baseline as moving average of last N workouts?
- Shows individual data numbers (though maybe a little busy)—if dataset is sufficiently large, maybe only show initial and final numbers?
posted by Maecenas at 11:03 AM on October 5, 2018
- Y axis is plotted as ± percentage from baseline, which here we assume is first workout. Maybe after sufficient time, re-estimate baseline as moving average of last N workouts?
- Shows individual data numbers (though maybe a little busy)—if dataset is sufficiently large, maybe only show initial and final numbers?
posted by Maecenas at 11:03 AM on October 5, 2018
Your problem here is that you've got two Y-axes and they don't precisely correlate. Are ten reps of level one equivalent to only five reps of level two? With tight correlation, you could do a bar chart where the width of the bar varies with intensity, and the height with reps/time, so that the total area of the bar represents total effort. Assuming that misrepresents the data, though, it's not really a great solution.
One option would be to do a bubble chart where the radius of the bubble corresponds to one Y axis (say, intensity) and the height of the center of the bubble corresponds to the other Y axis (reps/time). If you're really fancy you could toggle between the two in your graph. X axis would be the date in both cases.
I kind of like the idea of a trellis chart where you just do parallel line or bar graphs for each intensity. Some graphing tools will allow you stack multiple line graphs over a single X axis; some will even let you drag a marker over the X axis to highlight a day's activity in each individual graph.
If you have the screen real estate (say, on a big phone or a tablet) you could do a broader trellis of bubble or stacked line charts that shows all activity for all types of exercise.
For iOS examples and libraries, maybe dig around this "curated list?"
posted by fedward at 11:27 AM on October 5, 2018 [1 favorite]
One option would be to do a bubble chart where the radius of the bubble corresponds to one Y axis (say, intensity) and the height of the center of the bubble corresponds to the other Y axis (reps/time). If you're really fancy you could toggle between the two in your graph. X axis would be the date in both cases.
I kind of like the idea of a trellis chart where you just do parallel line or bar graphs for each intensity. Some graphing tools will allow you stack multiple line graphs over a single X axis; some will even let you drag a marker over the X axis to highlight a day's activity in each individual graph.
If you have the screen real estate (say, on a big phone or a tablet) you could do a broader trellis of bubble or stacked line charts that shows all activity for all types of exercise.
For iOS examples and libraries, maybe dig around this "curated list?"
posted by fedward at 11:27 AM on October 5, 2018 [1 favorite]
Response by poster: Additional challenge: there will be many exercises. A user will be able to scroll through all the exercises they've done since they started using the app to see their progress across all the things. Only one exercise per graph, though. Width of graph will be about 80% of a phone screen's dimensions.
Is this the kind of bubble chart you're talking about, fedward? (Chart at top of page)
posted by Hermione Granger at 12:23 PM on October 5, 2018
Is this the kind of bubble chart you're talking about, fedward? (Chart at top of page)
posted by Hermione Granger at 12:23 PM on October 5, 2018
That’s the one. I was assuming there would be many exercises, which is why I was thinking the iPad presentation could maybe show them all in parallel, but you could do the parallel treatment with bubbles or with stacked lines. On a phone, though, one chart at a time is probably best.
posted by fedward at 5:58 PM on October 5, 2018
posted by fedward at 5:58 PM on October 5, 2018
This thread is closed to new comments.
However, in your first visualization I see a problem. Let's imagine that this person starts out and can do 100 at beginner (green) or 50 at standard (yellow). They alternate every day between beginner and standard and gradually improve in both. So you have a green dot at 100, a yellow at 50, a green at 105, a yellow at 55, etc... and you get this distracting "sawtooth" effect.
I'd consider maybe drawing one line that connects the green dots and another line that connects the yellow dots.
posted by madcaptenor at 10:26 AM on October 5, 2018 [6 favorites]