sleepGalaxy: final design

Displaying different activities with the right duration and start time

Displaying different activities with the right duration and start time

There were still a couple of variables to visualise once the basics design was ready. I had to work on integrating my pre-sleep activity. In the end I used three activity types: sport, social and screen (computer and television). Of the first two I’d logged duration by recording start and finish time. For screen time I just logged total duration because it was often scattered.
I was looking for a way to display all aspects (type, start, finish and duration) in a way that fitted with the nice, round shapes I’d been using so far. Then I realised the pre-sleep activities were recorded from 18:00h onwards. So the main circle could act as a dial. I could split up the space from 18 till 23:59 using the activity duration. I calculated the starting position of each activity as a degree on the dial and added the minutes the activity lasted. Using the arc shape with a substantial line thickness resulted in nice, bold strokes around my “night” circles. Each activity type has its own colour.

The final night design (rating still in green)

The final night design (rating still in green)

I was happy with the result but then the recovery line just looked plain ugly. I decided to use the same arc shape on the other side of the circle. The more recovery the thicker the stroke in green. The less recovery the thicker the line in red.

Finally there was the subjective rating of the sleep. I think it is important to incorporate how the night felt for me. Emfit uses a star system from 1 to 5 stars. So I played around with stars, ellipses and other shapes but finally settled on simple golden dots. A five star night would have the fifth and biggest dot in the middle of the deep sleep circle, this seemed fitting.

UFO like rating design

UFO like rating design

When the individual nights were finished it was time for the overall poster design. I somehow had got it into my head that this would be easy. But it was quite hard the capture the look and feel I was aiming for. I wanted the poster to be simple so that the individual nights would stand out and make a nice “galaxy”. On the other had I did want a legend and some explanation of what was on display.

Sketch of the poster design

Sketch of the poster design

My first idea was to go for a size of 70 x 100 cm, the nights would have a size of around 10 cm. This was too small for all the details to be visible. My final poster will be 91 x 150 cm. The nights are big enough and they all have enough space on the sheet while it is still possible to compare them. I found the nice, slim font Matchbook for the title, the legend and text. I’ll be sending the pdf to the printer next week.

sleepGalaxy: design & calories

Design

Design

I’ve been working on the overall design step by step, alternating between coding and looking. I want to incorporate my calorie intake after 6 PM. I’m not recording the times I ate and I suspect they influence my whole sleep. So the most logical position is to circle all around the “sleep circles”. There is a lot of difference in daily intake after 6 PM, ranging from zero to 900 calories so far. I wanted to plot every calorie so they would have to change sizes depending on the amount. I also wanted to spread the calories evenly around the entire circle. How to go about that? Fortunately, I’ve found this great tutorial. The code is deprecated and the feed doesn’t seem to work any more but I managed to recycle the code concerning the plotting of the elements in a circle.

calorieViz1

Plotting numbers instead of dots

The code uses translate and rotation, which (for me) are very hard to grasp concepts. So instead of using the dots in the design I used numbers to get insight into how the elements are placed on the screen.
By keeping the size of the calorie circle constant, you can already see relations between the sleep duration, the amount of calories eaten and recovery.

cals2

Evening with a lot of calories

cals1

Evening with less calories

In the design you can also see an eclipse. These are the stress and happiness values for the whole day. I poll them by picking a number between 1 and 7 in the form at the end of the day. The mood is the bright circle. The stress circle covers the brightness depending on the amount of happiness felt during the day. By vertically changing the position, I can create a crescent. This can turn into a smile or a frown. The opacity of the black circle indicates the amount of stress. I’m coding this at the moment.

Bewaren

sleepGalaxy: kick off

Finally, I’ve started to work on a piece that’s been on my mind for almost two years. Ever since I met the nice people from Emfit at the Quantified Self conference. They kindly gave me their sensor in return for an artwork I would make with it.

Emfit QS

Emfit QS sleep sensor

You put the sensor in your bed, go to sleep and it wirelessly sends all kinds of physiological data to their servers: movement, heart rate, breath rate. All this data together they use to calculate the different sleep stages. From the heart rate they’ve recently started calculating HRV and recovery. This latter value to me is best indicator of my sleep quality and how energetic I feel.
Emfit offers a nice interface to explore the data and view trends.
emfitInterface

In sleepGalaxy I want to explore the relationship between sleep quality and the following variables: exercise, social and work meetings, calorie and alcohol intake, screen time and overall happiness and stress during the day. I’m under the impression that these have the most impact on my sleep, that is, the sleep phases, the ability to stay asleep and recovery.

Google form

Google form

To track the variables I’ve created a Google form that I fill in every night before I go to sleep. I’ve set an alarm on my iPad so I don’t forget.

Excel sheet with some of the Emfit data

Excel sheet with some of the Emfit data

firstNight

First circle visualisation

From all the Emfit data I’ll be using a subset. My first sketches focus on the sleep phases. I’ve spend a couple of hours programming first the basic idea: transforming the sleep phases into concentric circles. Going from awake to light sleep, REM sleep and deep sleep in the centre.

The next step was to make sure the different phases are displayed correctly, representing the amount of time spend in each phase and total time in bed. I’m programming in Processing and I’ve created an class called Night. After reading in the Emfit excel data as a csv file I loop through the rows and create a night object representing every night.
Displaying the circles went fine but the proportions between the circles just didn’t look right. I realised I had a conflict working with minutes in a decimal context. I wrote a little function that converts the minutes of the hours into decimal values and then adds them to the whole hours:
float min2dig(String time){
String[] tmp = split(time,'.');
float t = float(tmp[0])+(float(tmp[1])/60);
return t;
}

Now the basis of the visualisation is ready. The image below displays sleep phases of the four nights in the excel data from above. I look forward to adding more data. To be continued…
firstNights

e-Textile and data visualisation

Report of the meeting “Wearables and data visualisation” 13-6-13 @ V2_

Present: Ricardo O’Nascimento and Danielle Roberts (organisers), Anja Hertenberger, Meg Grant, Beam van Waardenberg

Skype: Annick Bureaud

Program:

- Introductions

- Look at and discuss examples from the web collected in a Pinterest board (http://pinterest.com/docentnv/wearable-dataviz/)

- Life demonstration

- Discussion

- Practical stuff

When preparing the meeting Danielle noticed that there are a lot of wearable viz that use knitting. We discussed why this is so. Data is logically related to patterns. Technically the Brother machines enable you to make your own patterns and connect them to an Arduino which can get input from a data stream. A drawback is that it can’t be live for most streams as the machine is too slow. We looked at the Neuro-knitting project and wondered if this is the real brainwave data? How close is the link to the actual data?

Ebru’s social knitting project where good news and bad news results in a change of colour while knitting is more a form of data logging. But it’s in real time. Other examples are: the conceptual knitting project: http://www.leafcutterdesigns.com/projects/creative-knitting-projects.html

What is data visualisation as opposed to data logging for example? Beam gave a clear explanation. Numbers are represented in a way that humans can understand. An RGB image is actually numbers transformed into colours. Our brain is the best data visualiser/interpreter. It simplifies the complex reality into something humans can grasp. So simplification is another essential. But it can easily become reduction. With reduction people lose the freedom to interpret all the layers of meaning. To get meaning from data combination of different sources and colourations between these sets is key.

Why is so many data on clothing static? To have dynamic data you need to work with electronics in clothing. As yet there is no fibre that can act as a carrier of information. Nano technology will be able to do so.

Maybe wearables are more suitable for data collection and screens more for displaying, Meg wondered? Screens are especially useful when looking back at collected data. And we all now carry our own personal screen with us in form of our Smartphone. Despite the drawbacks displaying data on you body can be significant Anja argued. Like people walking around with a sandwich board the wearer becomes part of the information. Or the funny guy at a party wearing a t-shirt with some crazy text on it. You can communicate about it. It can be seen as an extension. On the other hand part of your own identity is lost in transmitting the information.

Textile has a history as information carrier. Think about traditional embroidery to tell a story. And the use of colours and special gowns in different religions. This however has little relation to what we call data today. Data visualisation deals with Big data where data sets are combined, correlated and represented so we can derive meaning from them.

We’re still telling stories with data. This can take the form of life-logging. Ricardo’s Rambler shoe can be classified as a life-logging device. You can trace back your life from the track you’ve walked and share it on social media. Memoto is a company dedicated to life logging. Here too the device only captures images and GPS coordinates and the story is build in the database on screen.

Beam showed his brand new wearable that visualises space data from the sun. This is space data we can relate to. With other space data the connection is too thin and we lose interest. This wearable is a good example of simplifying a complex phenomenon, solar flares into an appealing visualisation that is dynamic but not changing too fast.

Danielle demoed an example of a wearable as a data collector. The True-Sense kit is a tiny bio sensor that can capture posture, EMG, EOG, EEG and Electrosmog. It can capture in real-time and log data. Brainwaves during sleep and meditation, activity, heart-rate, etc. All for €35. We are all very enthusiastic about it and will be organising a hands on meeting around it to explore its possibilities.

The practical stuff concerned the quality of the remote participation. This is very poor. Melissa suggested earlier that the e-Textile group should get a better microphone (±€120). Objections to this proposal were: who will own the microphone, will it help, isn’t the connection quality the main bottleneck? Our first step towards improvement will be to try out Google Hangout. So the next meeting we’ll be using that platform.

breathing_time at the Quantified Self conference

On May 12th I lead a breakout session at the second European quantified self conference in Amsterdam. The goal was to exchange experiences in breath and group tracking and to demo the new, wireless version of the breathing_time concept.

I started the breakout with an overview of the previous version. We soon got into a discussion on how hard it was to control your breathing rate. One participant used an Emwave device to try and slow down his breath rate. He could never quite make the target and therefore could never reach heart coherence which is frustrating. In my view the way to go is to become more and more aware of your breathing without intentionally wanting to change it. I went from chronic hyperventilation to an average breath rate of 4 times per minute without trying. Doing daily Zen meditation for lots of years has done it for me.

As usual people saw some interesting applications for the device I hadn’t thought of like working with patient groups. Another nice suggestion was to try out the placebo effect of just wearing the cone.

When it was time for the demo people could pick up one of the breathCatchers:

I’d managed to finish four wireless wearables. Working on 12 volt batteries with an Xbee module and an Arduino Fio for transmitting the data.

After some exploration we did two short breathing sessions so we could compare. The first was to just sit in a relaxed way and not really pay attention to the breathing (purple line). The second was to really focus on the breathing (grey line). The graph below shows the results:

Participants could look at the visual feedback but I noticed most closed their eyes to be able to concentrate better.

The last experiment was the unified visualisation of four participants. I asked them to pay close attention to the visualisation which represented the data as four concentric circles. A moving dot indicates breathing speed and moves depending on the breath flow.

It was fascinating to watch as the dots were moving simultaneously a lot of the time. However when asked how this session was experienced most participants saw the exercise as a game and were trying to overtake each other. They used “breath as a joystick”, to quote one of them. This was not my intention, the focus should be on the unifying aspect. I got some nice suggestions on how to achieve this: give more specific instructions and adapt the visuals to split the personal and communal data.

All in all we had a very good time exploring respiration and I’m grateful to all of the participants for their enthusiasm and valuable feedback.

days of my life

I’ve been programming hard to shape the pages that will represent my life in the calendar. I’ve used Marcos’ statistics to make a nice backdrop for my pages using the average of stress, energy, mood and inner peace values. Layered on top of that are the distinguishing values for the above parameters. I’ve also already incorporated the diary, haiku’s and photographs. It might take some tweaking still but the basics are there. See for yourself:

And a day with less data:

So the horizontal lines is the energy, diagonal is stress, the V or upside down is the mood and the white circles represent inner peace. All vary in colour and repetition depending on the value. I do love the different patterns that are drawn. Quite surprising.

working with data

I’ve been experimenting with the design and data visualisation using the personal data values: mood, stress, energy level and inner peace. Depending on the data value the lines, shapes and tone of each visualisation varies. This will create a different structure for every timeslot in every day.

Inner peace will be a big organic and mysterious shape.

Energy and stress level will be pictured using horizontal an vertical lines respectively. The upper image is average energy and stress level. The lower is low energy and high stress.

Mood will be an arrow head/smiley pointing upwards or downwards. It is the most upper layer, clearly visible on the peace shape.

This is an experiment with combined output for 4 timeslots using real data. It gets a bit busy and the lines in different directions are making me feel a little giddy. So work to be done but it’s a promising start.

big data hackathon

The Big Data Visualization Hackathon: ‘Making the healthy choice in any environment’ took place October 12 – 13 at the High Tech Campus in Eindhoven where 10 teams of hackers with various backgrounds created solutions in the area of health care.

I participated with Eugene Tjoa. We created a mobile app that acts as a personal compass guiding you to the areas most beneficial for you.

After filling in your health profile you can choose an activity. By combining different datasets the application overlays the vicinity with a grid that indicates better, neutral or worse areas. By clicking on one of the tiles you get more information about the advice. For example if you are suffering from asthma areas with high pollution will be red, clicking on the tile will tell you more about the air quality.

If this area is not good for you but a little bit further on it is better this will be indicated by a green circle just outside the map. The position of the circle indicates the direction you should be heading:

Despite all the talk on open data it was hard to find suitable datasets, especially ones with a finer grain. It was a very docile experience for us. We learned a lot about making apps with Flex. Philips provided a nice atmosphere, good food and inspiration. All in all a very good experience.

discovering Flex

I’ve been discovering the Flex development environment (Flash Builder) and the scripting language the last couple of weeks. I’ve been doing the very good on-line course which really gives you insight into the program and the object oriented approach that is used. It’s nice to test my knowledge of OOP and see how Flex compares to Java. In the course they use the MVC pattern to set up projects. The whole environment is set up so that it is easy to separate data from interface and functionality. Design can be styled in separate stylesheets. In design mode you can quickly create an application by dragging and dropping components.

After having worked with Flash for over 10 years this is such an improvement. Much credit of course goes to Eclipse, the base on which the Builder is build. I also love the Network Monitor. It lets you monitor all incoming and outgoing data in three views two of which being tree view (XML nodes) and raw (plain text). Binding is also a very important, new concept for me. It is used to bind data to UI components.

Flex can only take XML as input. Flash is a lot more flexible in that respect. So I have to format all the database data to XML which isn’t all that difficult once you get the hang of it. Below is my first Flex project using the data from the Collecting Silence database to determine the relationship between stress and silence. I’ve used a standard chart component to make a first visualisation and trying out the concepts.

silence explorer

Finally I can pick up the research about the correlation between silence and stress. This was of course the main goal of the Collecting Silence project but I never got round to really dive into it. So I picked up where I left two years ago.

I’ve worked on a sketch in Processing:

Blue = silence data, green = stress. I want to create a sort of landscape where the gaps between the two create the relation. I want to integrate this graph in an application where people can explore the data from the perspective of the correlation:

Rolling over the data lines displays the values and moves the map. You can pick a date and explore the data attached to that date.

I’m going to build the app in Flash/AS3 (as the website of the project is for a large part in Flash) and I’m trying to do it the OOP way again which is still quite hard for me.