3 – Concept/Crit

As the end result we wanted to use different charts and graphs, so we chose a line, bar chart and radar graph. However, the radar graph is hard to represent the data accurately, within the time we had we could not make many changes. We used these three types of graphs to show the data because of our information. The data had uneven anomalies in each week, which meant that there were major differences in it. Using different types of charts and graphs allows us a variation and makes it more interesting for users to find the errors in it. 

Having the charts interactive allows the user to see the data easier, as there are major differences in the scale, it makes it hard to see it clearly. For example, the chart would range from a number of 10 to 400. Also, a lot of the data for some categories would be similar, making it hard to view in the large scale chart.

 

 

3 – Prototype

 

For our first experiments, we used our data manifested from the Health App and created three line charts. This helped us visualise the uneven data and determine what kind of narratives we would use for each dataset. We collected the data from the health app from the three categories that we chose. These three were Move, Exercise, and Stand. With the dataset, we chose to use 3 weeks of the dates. In each chart, there are anomalies that stand out and does show uneven information. 

 

3 – Research

We came across a news article that the Health App was used in a murder trial, which helped learn about the case. The data could be manifested and help lead to answers in about the murder. Which gave us the idea to use our data and create a visualisation that would use our own scenarios, showing the ‘Truths’ of it. What can be accessed and found may not entirely be true to the actual events recorded, and what can be inferred from data anomalies. Which creates a different meaning, giving an interactive narrative to our data.

 

The method of data visualisation we chose for the concept is using charts. As this would be a web-based, we wanted to make it interactive for the users to explore the data and go through our scenarios to nd the truth in the data. As some of the data we gathered from the watch was uneven, whereas the watch was not worn, the data would be very different. We chose to represent this as charts because we can see a comparison of data easily and effciently in a visualisation.

3 – Initial Ideas

At first, we wanted to experiment with three.js for this project. Unfortunately, within the two weeks timeframe, we could not use it with our little knowledge about it. We would have had to learn a lot and it wouldn’t have fitted into our time schedule.

We chose to use the Health App by Apple. The data that we would manifest from for the categories is the Move (calories), Exercise (minutes) and Stand (hours). This data is from using the Apple Watch, which had 4 weeks of data on it. These would be the main sets of data we would use for visualisations and the narratives.

 

2 – Concept/Crit

The final concept of the project is a month’s radar chart showing each day of the week’s activity in days. The chart creates heptagons that show a comparison of each week in the month. It creates unique shapes based on the user’s data and is different each time. The reason why it is a heptagon is that of the category of days.  On the left, are minimizable tabs of the weeks to show specific data of the days in each week of the month and gives an average for that week.
These are all coded from P5.js and uses inputted data into javascript to create the shapes.

To improve this I would have liked to make more examples of the categories, like time of the day. I would have liked to code more javascript functions into the interactive visualisation, being able to change the opacity of each week manually through the user’s choice to show and hide each week. Also, the user can change the order of the shapes bringing them to show at the front or back. Furthermore, I would have liked to be able to create a more detailed chart within the shape to show the scale using javascript.

2 – Prototypes

For the prototypes, I decided to make categories to separate the data and show comparison. The categories that I came up with were months, weeks, days and time. The reason for this is the user can see what is their most active times whether it is a specific hour or day within the week. The user will be able to see an efficient comparison with the radar chart. The idea is to let the user use the interface to easily compare the data on one screen.

Some of the inspiration came from charts that had similar characteristics of using lines and opacity.

.

I extracted the data of 4 months from my health app into a spreadsheet, which showed each day from January to April. It has the distance of miles I moved every day with my phone and the steps I had taken.

 

2 – Research

Looking into the health app, I found that all the data for each day can be accessed. The health app displays each day, week, month and yearly data in a bar chart. However, these bar charts can be seen by sliding through each filtered chart. What this data does not show is an effective way of comparing the data to each other. In my opinion, the data is not compared well, therefore I will find a solution to enhance this.

Apple Health App

The data showing the distance walked and steps taken are tracked by a phone or a wearable technology linked to the app. It shows the trajectory and movement of bodies in the physical space, as it is tracked by the device. As I do not have the apple health app correctly setup and do not have an apple watch, I have a limited amount of data that is tracked. However, I do have a quantitative data sets that have a large time frame. Which will give me plenty of data to compare and show differences in the data. Which will demonstrate the different movement in physical space.

Next, I looked at different charts and methods to represent the data in an efficient way. Looking at many different types of charts, I decided I could use a ‘Radar Chart’. I chose this method because it would allow me to show a comparison in the most interestingly and efficient.

Charts