sleepGalaxy: design & calories



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.


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.


Evening with a lot of calories


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.


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


- Introductions

- Look at and discuss examples from the web collected in a Pinterest board (

- 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:

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.

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.

looping through the years

I’m starting a new data visualisation project. It uses some eight years of data from the numuseum website. In 2005 I started with a micro diary (255 characters per day) using custom software to update it every two hours. In 2006 followed my energy level and in 2008 inner peace and stress were added. All could be updated every two hours using the custom software. There are almost 900 pictures and around 60 haiku’s.

All this data will be integrated in an off-line visualisation: reversed calendar. This will take the form of an enormous tear-off calendar, where every leaf represents a day. There will be 2865 leafs in the calendar.

So I first have to get my head around the data sets. Luckily statistics wizard Marco Altini is helping to sort things out. He uses the very powerful program called R. Which can give you quick insight into data correlations. It was a bit embarrassing to discover how sloppy my data is. Notations have changed over the years and errors cause my program to halt.

At the moment I’m designing the leafs and doing some initial data accessing. I started out with the micro diary. I use Processing and Java to read in the data and at a later stage create pdfs for every day which can then be printed and made into a real tear-off calendar.

My idea is to make a big loop going through all the days from 27-4-2005 till 01-03-2013. I use the Java GreogorianCalendar class for that. The diary is in csv format consisting of a date and text string. I then compare every date with the date text string in the loaded data. It took some time to get the formatting right so the data can be compared as strings. I now have the first data ready to be incorporated into the pages. The printed output looks like this:

maandag 25-02-2013 // date of the page
Things are looking clear today.<br />Why does everything go more slow then you hoped? // diary text
p. 2861 // page of the calendar
dinsdag 26-02-2013
I hope I will learn the art of not worrying.<br />A nice conversation, new perspectives.
p. 2862

I want to share a little bit of code with you that I’m not using in the application but which might come in handy sometime. It lets you compare a date string to the incremented date (calStart):

Date d = new Date();
// make date
String myDate = “30-11-2005″;
DateFormat sdf = new SimpleDateFormat(“dd-MM-yyyy”);
d = sdf.parse(myDate);
catch(ParseException e){
Calendar tmpCal = new GregorianCalendar();

if(tmpCal.compareTo(calStart)== 0){

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.


annual rings

I’ve worked on the new numuseum interface today, these are the first
sketches. I want to combine the different subjects (e.g. webart,
photographs, etc.) in a scrollable circular interface that functions as a
timeline. The black lines indicate the years (like annual rings in a tree)
and the coloured lines are the subjects. The red line would indicate a
cursor with which to navigate the years and their different products.


Collecting silence first data visualisation


My first attempt at visualising the stress and noise data from the
collecting silence ( project. An aim of the project is to discover if there’s
a direct relation between silence and relaxation/well-being. In this cut-out
of a large graph there seems to be some relation. (The longer and more
transparent the line the higher the value.)