Interactivity II
CASE STUDY

Overview

This Fitness Data Visualization is a project based on my own personal fitness data. I wanted to use the Swift language to create a data visualization that is personal to me. With this project, I can further expand the use of my data and present it in different ways in the future.

Users & Audience

The users and audience of this project are people who enjoy tracking their data. Many people use wearables like Apple Watches, Fitbits, or even their mobile phones in order to track their movement. As well as those who are interested in Swift coding.

Scope & Constraints

The scope of this project is quite small. Since I do not have much experience with Swift, I kept this project very simple. My main focus was to extract user data and display it correctly on the screen, specifically step data. I would add an extra layer by having a "goal" of 10,000 steps which would change the color of the data.

Process & Insight

HealthKit Setup

I started by reading the documentation for HealthKit on Apple's developer's website. Since I will be accessing my own health data I needed to add this framework to the project.

Once I embedded it into the project, I had to request permission in the info.plist of the project.

After adding those capabilities and requesting access to the user's health data, the preview screen looked like this. I am only requesting step data, so that is the only thing that populates on the screen.

XCode & Swift

I started with creating a swift file to pull the data that I need from my Healthkit data. I wanted the step count information, the month, and the day. Below is the code I used to extract and store that data.

I then continued with creating an initial list view just to make sure that my data was being extracted correctly. I created a new swift file and set it as a ContentView. This would be what the user sees on the screen. I used the variables I created in the last file to pull that data into this view.

After creating the list view in Xcode, I built it on my phone just to make sure it worked. My phone is currently on dark mode which is why the colors look different, but I coded it to take the user's display mode into account.

Since the list view was a success, I decided to do some more research. I wanted the visualization to be more appealing so I began to create a second view that will look like a bar graph.

I started by making a new ContentView file where the bar graph view will live. I set up this space in order to add more UI elements to it and for that I had to go back to the Swift documentation in order to learn the syntax of the shapes and colors and how to implement them in my project.

I created a VStack in this view and within that I created an HStack which sorts the views horizontally. Then within that HStack, I created another VStack to hold the bars.

Once I made the bars, I added the text for each bar and for the total number of steps. Just for the sake of the Xcode preview, I added random numbers so I can see what those step counts would look like from a small step count to one that exceeds 10,000 steps.

After that, I just built and ran it on my phone with my own real data.

I started playing around with the colors of the bars because I didn't like the green that much. I chose pink just to see what it would look like.

This is what the pink looks like on my phone with my step data.

I played around with the different UI shapes and colors until I settled on the capsule shape and the purple color for the bars.

I then built the app onto my phone with the new UI that I chose. Everything is still working perfectly fine and as you can see, some days I passed 10,000 steps and some days I didn't.

Outcome & Lessons

Many lessons were learned during this project. I have used Xcode and Swift in the past for a previous project, but that project was a completely different workflow, which was storyboarding. While working on this current project I learned another workflow and learned how to access the HealthKit framework. HealthKit stores so much data and can be used for many reasons if the user allows. Using SwiftUI is something I also experienced for the first time with this project. Even though the UI was minimal, it was still a good first step. There's so much that you can do with SwiftUI and I would like to experiment with it some more in the future. Overall, I would like to revisit this project and create an updated data visualization that is eye-catching and interactive.