Health Data Visualisation

Image for post
Image for post

Genae came to us with a challenge: think out an idea for a tool that promotes staicy, their health datamanagement platform used by researchers and scientist.

But how do you take something so personal and complex as health data and make it fun and accessible? Our creative department immediately started to think towards visualising data. Not in a boring, statistical way, but by generating a unique object.

With this concept in mind, the creatives came to us with the question if we could create a 3D object… in a web browser. After all, a web application allows us to reach both the general public as well as target potential customers through online marketing.

But how do we make an object unique? A 3D object is (among other things) composed of these 3 main properties:

  • shape
  • texture
  • displacement

We agreed early on that the general shape would always be a sphere, to have some sort of coherence between different visualisations. So the uniqueness would need come from the texture and the surface’s displacement. To make those properties unique, we needed some sort of data specific to a user and translate that data to a texture and displacement map.

We quickly came up with the idea of posing the visitor with a questionnaire. We would then use the answers given to those questions to generate a unique texture and displacement map. So if you would, for example, drink a lot of water the texture would have a lot of blue in it. If you have a lot of stress, we would make the shape more aggressive.

To build the texture, we decided to start with a basis, which we then modify with modification layers.

So to start off, we needed base textures. These are not created digitally. These are actual paintings. 70 to be exact. Which painting is chosen for the participant, depends a combination of three factors:

  • your gender
  • your daily amount of water consumption
  • your age

Our paint artist needed to make sure that these factors come through in the base texture. If your gender is female, we use rather soft, elegant colours. The older you are, the more you’ve been through in live (good or bad), the ‘harder’ the colours get. And if you drink a lot of water, your base texture will show lots of blue.

Of course, 70 possible textures is not enough. That’s hardly what one considers “unique”. That’s why we add custom layers to the base texture. For every given answer, a layer is added to the base texture.

Base painting + modification layer = unique texture

We place a total of 22 modification layers on top of the base layer. That’s one for every answer given in the questionnaire. Modification layers come in different types.

We have a total of 71 modification layers, or 71 possible answers. The chance that 2 people have the exact same texture, is quite small. Unless they are the same age and gender, and answer all questions equally, every texture will differ.

What we do to build the texture map, we also do for the displacement map. After all, we also want a unique shape for the spheres. I’m not going into more detail here, as this process basically mimics that of the texture map (start with base displacement + modification layers).

Once the application went live, it was interesting to see the diversity in spheres that would be created. You can test it out yourself.

https://myhealthportrait.staicy.com

Image for post
Image for post
Showing the diversity in rendered spheres.

Written by

Software Engineer @ Duke & Grace

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store