Information Visualization – How to effectively convert an abstract data to visual?

Data is getting generated from different sources. Walmart handles more than 1 million customer transaction every hour, Wikipedia handles billions of pages.

Skip and take me to step-by-step guide

Social networking sites Twitter, Linkedin and Facebook etc. generates new huge bytes of data in quintillion daily, the amount of data is only getting larger, deeper and more complex.

Data is considered as an asset today that’s because; its analysis adds value to business even, it is also being monetized directly or indirectly.

How information visualization add value to business?

Data is useless, if it is not adding any business value or information to empower making better decision. Some individuals learn better through visuals while others are attracted towards text.

Data in text format can be confusing but Intuitive visual representation of data helps user to make better decision quickly that in turns adds value to business.

I recently attended a seminar on “information visualization”, where speaker Aniket Mohan Sarangdhar shared his experience of the information visualization. Here in this article I am summing up the learning; I got from that seminar + my observation and experience in the same field.

Why Information Visualization?

Information visualization captures viewer’s attention and addresses complex problem through storytelling which is simplified using design. User gets information at glance to deduce insights quickly that in turns reinforce human cognition.

How to effectively convert an abstract data to visual?

In concise and simple words; understand the data first extract the data variables and match each data variable with most appropriate visual attribute. It is similar to identify which UI component is best for a specific data or task.

After mapping the data variable with visual attribute, focus on the logical placement of the different visual attributes. Now, let’s understand the terms used in above statement and the process in details with steps.

Step 1: Understand the data

As we understand the user before starting wireframing, similarly we need to understand the data for Information Visualization. The abstract data includes both quantitative (numerical) and qualitative (non-numerical) data. Let’s call it data set that will have number of data variables with different nature (type).

Classification of data type

Classification of data type

Let’s understand data type and data variable

Data Set Data Variable/Type
In a cricket Match Runs per over Runs = Cardinal
Overs = Nominal
In a weather report of Metro Cities, Sunny, Cloudy, Rainy, Thunderstorm Cities = Nominal
Types of weather = Nominal
In an organization No. Employees in each department Employee = Cardinal
Department = Nominal
Comparing spiciness of different sauces Low, Medium, High Type of sauce = Nominal
Level of spiciness = Ordinal
Number of users using internet in the age group 10-20, 21-30, 30-31, 31-40, 50+ No. of users = Nominal
Age group interval = Interval
No. of emails exchange between various department No. of email = Cardinal
Department = Nominal
Exchange Linkage = Relational

Now, after understanding the data we need to understand different visual attributes that help to create effective information visualization.

Step 2: Identify the visual attribute for data variable

Understand Visual Attributes

visual-attribute-for-data

Now, we need to map each data variable with most appropriate visual attribute. Before that, first let’s understand visual attributes in terms of perceiving data accuracy.

Visual attributes from most accurate to least accurate in terms of representing data accuracy.

visual-attribute-most-accurate

Step 3: Identify the nature of each data and map with most apropriate visual attribute

Visual attribute of data variables need to have one-to-one mapping. Visual attribute for a data can be position, length, orientation, area, shape, intensity, color etc. Each data variable needs to be mapped with one visual attribute.

conversion-of-information

After this one-to-one mapping, focus on the logical placement of these visual attributes. So, that user can deduce insights quickly.

Let’s create basic and static information visualization using the above understanding.

Cities Area (Sq. Km.) Population (millions)
Mumbai 603 18.41
Chennai 1189 4.68
Delhi 1484 11.03
Kolkata 185 4.5
Hydrabad 650 4.5

Here, we have data set and we need to understand the data first. Let’s identify the data variables and data types from this data set

Data Variables (3) Data Type
Cities Nominal
Area Cardinal
Population Count Cardinal

We have understand the data and as a result we have data variables with data types. Now next step is; to map these data variable with most appropriate visual attribute.

Data Variables (3) Visual Attribute
Cities Position
Area Length
Population Count Length

Chart

Here is the chart, where city is nominal and recognized by its position; area and population is quantitative data, where visual attribute length is used. A few points to be noted here. We have “rectangle” visual glyph and visual attribute that we have used are:

  • Position
  • Length
  • Color

Position and Length are the two most appropriate attributes in terms of perceiving data accuracy. But the table that we created had one position and two length visual attributes. Color visual attribute was not mentioned. That was because; two data variable is mapped with same attribute i.e. length, and we need color to differentiate the variables. At the end we have 3 variables and at least 3 visual attributes, it may vary.

Data visualization can be static or interactive. Charts and maps are the examples of static visualization. But representation of huge data or data set with multiple data variable need interactive data visualization.

Next, a case study to solve the complex data visualization will be shared – Stay Tuned…

Author: Gopal Juneja

A UX/UI enthusiast living in India Delhi having 18+ years of industry experience to use in beautiful design and handsome front end coding.