Data Portraits

Learning the art of interactive data-vis.

“The purpose of visualization is insight, not pictures.” ― Ben Shneiderman

When I want to show a person, I take a picture or try to draw a portrait of them. And I have many ways to draw these portrait. The choices I make in regards to focus, framing and perspective have a huge impact on what stands out in the portrait. And so does the choice of medium I use - from chalk or pencil drawing to still photography to 360 degree video. So what does the portrait of a dataset look like? How can I reveal the structure and highlight the salient features of a dataset by showing it visually? How can I do this across static and interactive mediums?

Data Portraits is an approach for crafting an interactive data visualisation that reveals the structure and the pattern of a dataset. I am deliberately using the word ‘portrait’ to emphasise that it is a conscious and thoughtful process of creating it. The intent is to follow an iterative process of experimentation and layering, much like an artist would does, and do it with an understanding of the science and art of data visualisation. The science involves an understanding the grammar of interactive graphics and proficiency in tools to create them. This essay is however focussed more on articulating the art implicit in the process. The best way to illustrate this would be to work through a simple tabular dataset and show how this process could help us to gradually build an insightful interactive data-vis.

Start with a question

“The data is just a clue to the end truth” ― Josh Smith

The genesis for the creation of a data-vis start with a question. A question to which I want to take a data-driven lens and look at. It gives me the basis to where I need to go and look for data and also creates the bounds within which to start this exploration . I may have some ideas or guesses about the answers to that question, but the idea is to learn something new. Not just to confirm my hypothesis, but to be open to new hypothesis that the visualisation may reveal.

In India, we are all feeling the impact of demonetisation as the ₹500 and ₹1000 notes are withdrawn from circulation. So I wanted to understand better the share of notes by denomination in circulation in India. I went looking for a dataset to answer the question and found the Reserve Bank of India’s - Handbook of Statistics on Indian Economy. Within it, Table 160 deals with Notes and Coins in Circulation and I can use the data on notes in circulation to explore this question.

The dataset is small - 38 years of data (from 1977 to 2015) for 9 denomination of notes (₹1, ₹2, ₹5, ₹10, ₹20, ₹50, ₹100, ₹500 and ₹1000), with value in ₹ Billion of circulation. And I have done two missing data fill - which is the blanks in circulation of ₹1 notes in 1991 and 1992. Here is a sample of the dataset - the value of notes in circulation in 2015 in ₹ billion

Make a simple sketch

“Good design is a lot like clear thinking made visual” - Edward Tufte

I can start with simple visualisation as a way to explore the dataset and see the patterns. Since time (year) is the interval variable here and type of denominations (denom) is the ordinal variable, I can use a stacked area representation to start the exploration. And it is clear that value of notes in circulation have increased significantly in the last 15 years and it is driven by ₹500 and ₹1000 notes.

Change your perspective

“The greatest value of a picture is when it forces us to notice what we never expected to see.” - John Tukey

Now if I want to see the share of denominations across years, I need to change the scale on the y-axis to percentage from absolute values. It is a tradeoff - as I can see the distribution of denominations more clearly, but will lose the information about actual rupee amount in circulation. I can always play with space and add multiple charts to bring that information back if required. But let me stick with single frame visualisation for the moment. I don’t want to be afraid of trade-offs that come with shift in perspective. I want to show the data in the right perspective to communicate the insight.

Map the context

“Finding the right visual method is only half the battle… Providing context, showing uncertainty, offering narrative and guidance are all things that are critical.” - Adapted from Irene Ros

So far the steps that I have undertaken could be applied to any dataset. But I have not brought the context of the data in to the visualisation. Notes have a natural rectangular feature that I can identify with and it would be appropriate to use a rectangular mark to show the share of denomination. So let me change this to a treemap and see if that helps us bring the richness of the context to this. I have further lost the information of time now - as this is only 2015 data, so I will need to find ways to bring it back later.

Play with color

“Position is everything, Color is hard” - Moritz Stefaner

Choosing a color palette is hard. But color done correctly can enhance the emotional appeal for the visualisation. Since, each denomination note has a distinct color distribution, I can choose the highlight color from the image of each note itself. I can take the average color of the image or better still pick a color from distinct color clusters within the image. I have to play a bit with this to get it right - so that not only is the color palette representative for the denominations but also it has enough perceptual difference to work within the visualisation.

Use visual metaphors

“Aesthetics is deeply associated with emotions and feeling” - Giorgio Lupi

Appropriate metaphors can make it easy for the audience to read the data portrait. Finding the right metaphor is mostly a matter of thinking visually about the topic. In this case, I can take the color of the denominations approach to the extreme and use the denomination image itself as a way to fill the background. Now it is not so hard to see which area represents which denomination.

Focus on details

“The details are not the details. They make the design.” - Charles Eames

Crafting an engaging data portrait is a gradual process of refinement of both the representations and the aesthetics. I do not get it right the first or even the second time. I need to be constantly thinking about the detailed design choices I make and edit them as needed. Here I can see the notes visual metaphor is probably too extreme - it has similar photo of Gandhi, text which is unnecessary and repetitive (like RBI, specimen) etc. They actually distract from the data portrait I am trying to create. So let me edit it. I can just use the numerals printed on each denomination notes. They still have the distinct color palette and in addition shows me the denomination also.

Add layers to it

What space is to static visualisation, layers is to interactive visualisation. Thinking interactive design is to think about the layers of visual representation I want to move between. Here, clearly I can see that each layer is the treemap for that year of data. So, I can add a year slider to the portrait and make the layers move from one year to another. I can also add a big year label on the bottom to keep track of which year this now represents.

Make it alive

“Ensure that interactivity has ‘affordance’. To afford means to give a clue” - Dan Norman

Animation is the most powerful feature I have to exploit in creating a data portrait. Using animation effectively can help me focus attention and make the whole data portrait alive. Here, I can use the simple animation effect of moving from 1977 to 2015 to give a full historical story about the change in share of denominations. Figuring out the right animation speed takes a bit of trial and error. Too slow and I will lose attention, but too fast and I will lose the message. And to ensure people can replay it again, I have added a ‘Replay Animation’ link on the top. I also add a title, description and source to make it stand on its own.

Always be learning

“Learning how to see is essential to learn how do design” - Giorgio Lupi

Everything I have created so far is possible to explore with any datasets. And none of these ideas about interactive data visualisation are inherently mine. I have looked around at examples and inspirations from the work of others, read and learned from many practitioners, learned the tools to craft them and tried to apply them to as many questions as I am interested in. I believe anyone with the dedication to learn the basics, practice to hone the skills over time, and perseverance to develop a seeing eye can learn this craft of interactive data visualisation.