Solid, Visualisation Tool

A demo of a visualisation tool presents data of media coverage and health issues around the world. The objective of Solid is to show how media can influent and get our attention to one topic while there are other topics that are more crucial and deserve more attention.

We use the data of media coverage from the Google Custom Search API, and use the data of the health issues (Disability-Adjusted Life Year or DALY) from VizHub Health Data. The visualisations in the website is created from D3. See full project here: www.pruek.lk/solid

This project participated in C-Awards 2016 contest, got nominated into 2 categories-Bästa affärsmöjlighet (Best Business Opportunity) and Bästa forskningsframsteg (Best Research Opportunity), and won both categories, plus Publikens val (People’s Choice).

Read more about the project here: Solid, behind the scene

My roles

Art director, Designer, Web programmer, Co-project manager

My contributions

I was mainly in charge of the art director and designer role. I took care of the art direction and designed the logo and the website including web programming. In the late state of the project, I managed the project by assigning tasks and helped debug the engine of the website.

Team members

Adria Cruz
Cheng Tianchang
Ewoud van der Heide
Giovanna Vilaza
Ingrid Sorensen
Maria Rahamägi
Martin Hedlund
Pruek Laochaiyapruek
Yun Zeng

Disciplines

UI Design
UX Design
Web Programming
Project Management
Visual Design

Launch project

This project was from the Information Visualisation course at KTH (2016). As a group, we started from brainstorming about our interests and ideas in general. We talked about what were interesting to visualise and what were the issues we would like to solve. We got some interesting directions and we narrowed down our thoughts to one idea. Then, because the project was big, we split our team into 3 small teams (data, programming, and design) to work in parallel. We changed the design of visualisations for a couple of times due to technical problems and data issues. After we finished the demo, we submitted the project to C-Awards which was the contest of student projects.

After some discussions, we arrived at the media coverage versus morality rates because we thought that the media we consumed nowadays were biased in a way that they didn’t cover and present the information fairly. Some news or topics were exposed to the society too much when they didn’t even have much impact on the society, whereas some fatal topics were more important to the society but they weren’t presented to the society properly. We proposed this topic in the beginning but along the process when we started searching for data, we came across several problems. It was too difficult to obtain the data and most of them were unavailable. So we had to change our topic for a couple of times until we found the one that we can find more data to work with which was the health issues (DALY = Disability-Adjusted Life Year).

This is a slide from our presentation to explain why this topic was important. We compared the amount of the media coverage (articles) of one topic to the scale of the impact of that topic. We can see that sometimes the media exaggerated some issues too much and sometimes important issues were underrated. Though this graph is inaccurate. We used it to help explain the situation.

When we got our topic, I started to sketch the visualisation of the comparison between media coverage and mortality rates. There were 3 directions: a bubble chart, a pile of money (budget allocated in a topic) and blood dripping, and a solar system.

We decided to go with the bubble chart. So I started to sketch the interface and interaction of the visualisation tool (which was the main part of the website).

This is a more advanced sketch of the first sketch. We needed to present data of mortality rate of different causes and media coverage of these causes around the world. I chose to use a bubble chart, a world map and a parallel coordinates chart. The bubble chart presented the data of the mortality rate against the media coverage of different causes (one bubble, one cause) of one country. The world map was used for selecting a country to show the data in the bubble chart. The parallel coordinates chart was used for presenting all data in different dimensions which were different causes of death, money allocated for each cause, and media coverage of each cause in different countries and years.

I designed the interaction of the bubble chart and the world map. Users can hover over a bubble to get details-on-demand of each bubble, and can click the bubble to zoom in or click the blank space to zoom out. For the world map, users can hover over a country to see the country’s name and can click to select/deselect a country to show/hide bubbles of that country in the bubble chart.

I designed the colour scheme for the bubble chart and how the mortality rate should be presented against the media coverage (by lightening, darkening, or diagonal lines covering). The challenge was to choose different colours that are still able to distinguish and visible on both white and black backgrounds.

Once we started to research on data, we learned that some data were too difficult to obtain and deal with. We needed to change the scope of work for a couple of times. Consequently, we had to change the design of the visualisations. We ditched the bubble chart and changed to a segmented chart. When we tried to implement it, we learned that this chart wasn’t segmented accurately. The size of the segments was random. Then we changed to a sunburst which was our final decision. Along the process, we also cut out the parallel coordinates chart because it seemed to be unnecessary and too much for our scope of work.

Then I moved on to work on the visual design of the project. I sketched a logo of this project (Solid). The name came from the idea of being true and solid. Coming from our thought that media can cause bias and influence consumers, I thought that our project was a tool to reveal the truth and it should be transparent and solid no matter what the truth is.

After selecting the finalist with my teammates, this is the final design. The idea was that the big circle represents the world as Solid shows the data around the world and it also corresponds to the shape of the sunburst, and the O without a hole plays with the name Solid. I chose red colour to reflect the importance of this project and the problem we were dealing with.

After we changed to the sunburst, the use of colours was changed accordingly. We needed only 1 scheme for the sunburst. I used warm colours as the chart was a “sun”. For the world map, I used cool colours, so they contrasted with the colours of the sunburst.

This is how the homepage looked like in our final presentation. I managed to put everything together as sketched but the functionality and the engine of the diagrams were still unfinished. There was also some problem with the legend of the world map as it didn’t fit in the right side of the page.

After our presentation, we got some feedback on the design and the layout. Some suggested to move the world map inside the sunburst. So we can enlarge the sunburst even more. Here is how it looked like in the final design that we submitted it to the C-Awards (the last deadline of this project).

Although we struggled and failed to deliver our project in the final presentation, we managed to finish the project and submit it to C-Awards 2016 contest. Surprisingly, we won 3 awards-Bästa affärsmöjlighet (Best Business Opportunity), Bästa forskningsframsteg (Best Research Opportunity), and Publikens val (People’s Choice).

Solid, Visualisation Tool

My roles

My contributions

Team members

Disciplines

Share