As a part of a course on Information Visualisations I took at KTH, Stockholm. I worked on a project in collaboration with Karolinska Institutet involving visualising prostate cancer patients in state of Stockholm. The tool is meant to be used by doctors and researchers to analyse patient information to find patterns to aid future research in this domain.

Front-end (jQuery, CSS)
Data Analysis and Visualisations (D3js)
Interaction Design

Process (Initial Wireframing)

We practiced an Agile (Lean UX) approach to design where we conducted workshop with the team where everyone comes up with rapid designs and explanations defending what they are aiming for. Since, we were a team of 8, we had a bunch of ideas on paper before we narrowed down to 2 designs.

 

Process (Development)

The initial project was built for a subset of the data since the idea was build a rough MVP instead of a full blown product. We used very basic jQuery and d3JS as the visualisation and animation libraries and GulpJS as a task runner.

The Sankey chart allows the researchers to define and narrow down what they are looking for. An onhover tooltip details the particular area about the real numbers and description of that section. Since the data for some data sets is naturally skewed towards unhealthy individuals no going for checks, we took the liberty to make the chart wider so that selecting these sets is not difficult.

To make the visualisations more research oriented, we added the ability for the users to define their own set of variables from a list of all available variables. We also defined what every variable meant to ease out onboarding and adding more context.

Each time the user starts playing around with the parallel coordinates, we provide him a summary of the highlighted data points, which could be exported and reused.

Parallel Coordinates forms the most important part of the visualisation which has all the features that allows the users to play with the axis, color different data points and event save custom curves (cohorts) for further analysis. All the axis are customisable as per the variables selected from the list of variables.

CATCAT

The entire process could be summarised in the project video.