Data Visualization Best Practices
With Indigo.Design
As my first main task here at Infragistics, I had to redesign our charts and make them consistent across our platforms, mainly our Dev tools and the Indigo.Design UI Kit. This meant I had an awful lot to learn about Data Visualization and its best practices. In the following article, I would like to share some of the most important things I’ve learned and implemented in my work on this task.
What is Data Visualization and why we need it?
You’ve probably already heard this, but as a Visual Designer I must remind you that:
Our brains process information visually 60,000 times faster than text and it takes only 13 milliseconds to recognize an image.
So, in essence, the sentence “A picture is worth a thousand words.” is even more true, now that is backed by scientific data.
And speaking about data — Data Visualization is the craft of turning raw information into easier to understand and perceive visuals, most commonly known as charts. Those can be described as the graphical representation of data with symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart. Charts can either stand alone as single data visualization or they can be combined in a dashboard with other charts.
So why do we need Data Visualization? Charts are used to tell a story. By representing raw data with a chart, or charts combined in a dashboard, you can make it more easily consumable. You can also find trends and discover important information, which can have an impact on your business. Hopefully, both can be positive :)
The User
As with everything that is designed nowadays The User must always be at the centre of the product being developed. And you should always keep in mind how you communicate your data and visualizations to different kinds of users. The most important rule of communication is to know your audience. We all have a different way of communicating when we talk to a business person compared to a technical person for example. Knowing what is important to the user when looking at and analysing your visualizations is paramount. Every visualization is telling a data story. To help get the message across you should keep in mind that your visualizations simplify complex data, tell your data story, and drive decision making.
Keeping it simple
I want to tell you about some of the established “rules” to follow when designing any type of data visualizations.
And with any kind of design this quotation from Antoine de Saint-Exupery is also true about Data Visualization:
“Perfection is achieved not when there is nothing else to add, but when there is nothing left to remove.”
Since one of the main reasons to use Data Visualization is to simplify complex data and make it easy to understand, removing unnecessary elements from your charts is a must.
One of the things to remove is 3D effects. Apart from looking silly like some kind of a Word-ready-made chart, any 3D effect can distort the data and mislead the viewer. Unless your visualization is meant to be a 3D chart, always stir away from it. 3D obscures the data, creating room for assumptions instead of analysis.
3D visualizations are best used for doing surface analysis, volatility analysis or terrain research. This chart shows temperature variations in a volcano from top to bottom with multiple axes including X, Y and Z and it tells a more beneficial story in 3D space.
In general the more unnecessary visual clutter you remove from your charts the better. This is true for any corner-radius roundings of bars or columns. This can also be misleading since one can be unsure about where is the data point — at the high point of the column or at the beginning of the rounding?
This also goes for things like:
- Disruptive shading
- Heavy grid lines
- Boxing borders
- Playful fonts
- Distracting background images
Color
Color can make or break your charts. It helps highlight what’s important, but at the same time using similar colors or too bright ones can make your chart hard to understand or even unreadable. For example, when using a chart to compare different sets of data you should always use colors that are easy to distinguish otherwise, the viewer will have a hard time seeing the difference and reading the chart properly. Color should be used to communicate your data effectively, not beauty or “chart art.” You should also take into account people with hindered vision and color-blindness.
To help with that, we at Infragistics generated two new color palettes that we included in our Indigo.Design UI Kit’s colors. One is with easy to distinguish series of colors, that work extremely well together both on light and dark backgrounds, and the other is specifically for people with color blindness, where all the colors are tested so that people with different kinds of color blindness can distinguish between them without any problems. Both were tested on one great little tool by Susie Lu & Elijah Meeks — Viz Palette.
There are three main color scales for Data Visualization, which can cover almost every type of chart — Categorical, Sequential and Diverging.
Categorical color schemes are used to render discrete data, each representing a different category. They should be visually distinct from one another. As a rule of thumb, it’s best not to have more than 6–10 categories in a visualization.
Diverging color schemes are used when a central value is shared between both ends. They are often used to visualize negative and positive values.
Sequential colors are used with numeric or ordered values. Sequential color schemes are gradients that go from bright to dark or vise versa. The gradients can be classed or unclassed. Classed are stepped gradients, while the unclassed are a continuous gradient. They can be used best to visualize numbers that go from low to high like temperature or income, e.g., it is best to use darker colors to show the larger numbers.
Choosing the right chart for your data
Choosing the right chart comes in to help you best get your message or data story across. Make sure you are selecting one that makes the data clear for the user.
Consider these key questions to help guide you in your choice:
- What is the key point you want to communicate with your chart?
- Do you want to compare variables?
- Do you need to understand the distribution of the data?
- Are there possible trends you need to analyze for?
There are 4 basic chart types when it comes to presenting your data:
- Comparison
- Composition
- Distribution
- Relationship
There is a chart selection diagram created by Dr. Andrew Abela that can help you pick the right chart for your data.
Comparison charts
A comparison chart compares two or more variables. They are used to show differences between two or more sets of variables over time. So what types of charts do you use to compare data?
The best chart types to use for comparing data are:
- Bar charts
- Column Charts
- Line Charts
- Spline Charts
- Combo Charts
- Radial Graph
- Spline Area Chart
- OCHL Chart
- Candlestick
Composition charts
A composition chart is best for showing how individual variables make up a whole. They either show the relationship of certain variables over time or as a static aggregate.
The best charts for tracking changes of variables over time are:
- Stacked Column
- Stacked Area
The best charts for measuring static relationships of variables are:
- Pie Chart
- Doughnut Chart
- Treemaps
- Funnel
Distribution charts
Distribution charts show how a set of quantitative values are distributed over a range and helps you to identify key outliers and trends in your data.
The best charts for distribution data are:
- Scatter
- Bubble
- Combined Chart (for instance Column and Line chart in one)
- Line Chart
- Histogram
Relationship charts
Relationship charts display a correlation between two or more variables from a data source. This can be used to show either a positive or a negative effect that the given variables exert on each other.
The below charts are best when you have two or more variables:
- Scatter
- Bubble
Chart Titles and Descriptions
Now that you know which chart to use in which case and data you have, it is good to know how to designate it. Keeping your chart title and description simple and to the point is important, since your data and visualization should tell the core of your story. Primarily, your title should directly relate to and support the chart. For instance, if you have a chart that depicts the “Monthly Average Maximum Temperature in Central Park, New York City”, you can’t have a title that says only “Average Temperature in New York City”, because that would be misleading.
If your title is too long or it is unable to best describe the data, or the chart needs some additional explanation in general, you can always use a subtitle. Just one or two sentences should be enough. For instance “Annual Percentage Change in Energy Generation” and then have a subtitle that says: “Showing the change in generated energy for 2019 compared to 2018”.
Legends are also an important component of a chart. They help the viewer to orientate in the chart by combining colors and labels for the different data categories represented. If you only have one single-color category distributed over time e.g. you can skip adding a legend if the title describes well enough the data represented on the chart.
Using the Right Scale
We see charts in our day-to-day life very often. In the news, staff meetings, on social media. But if we don’t pay close attention sometimes these charts can be deceiving and we might find ourselves misled and our opinion on certain matters skewed the wrong way. Sometimes it’s unintentional, but other times it’s intentional.
To make sure you are not one of the culprits of the crime of misleading visualizations, you have to make sure you don’t change the scale of the Y-axis. Almost in every case, it should start with 0.
The following example shows how a chart can tell the wrong story. The charts are using the same data, but the right chart has the axis starting at 5% and makes it look like the US GDP is plummeting. But when you look at the left chart, there is only a small gradual decline.
Conclusion
I can say that Data Visualization is a whole another design field by itself. I love learning new stuff and diving into it was one interesting and enlightening experience. Combining mathematics, analysis and visual aesthetics is no easy job, but if you get all the ingredients right you end up with something both beautiful, and most of all useful. Because in the end the important thing is the user and if they can easily understand what they see and draw the right conclusions from it.
If you find this article useful and want to learn more about Indigo.Design feel free to give it a try and let us know what you think. Or you can try out our UI kit, where you can find some of our charts ready for use.
You can also visit Ignite UI for Angular and see all of our charts.
