Click here to learn more about Gilad David Maayan.

Everybody likes a good story. Data can be used to tell a story, call attention to a problem, or showcase a trend. Responsive design gives data visualization an edge, helping users interact with the data in any context and any device. This article provides an overview of data visualization and best practices for effective data visualization.

What is Data Visualization?

The term data visualization refers to the technique of presenting information in a visual way, such as in a map or graph. Visual aids help people better understand the underlying patterns in data.

In the age of Big Data, it is even more important to extract valuable information from large and heterogeneous datasets. The resulting message should be concise and easy to understand.

Data scientists manage more complex information, which requires elaborate visualizations. Bubble clouds, bullet graphs, heat maps, and radial trees are some examples of the types of visualizations available.

Why Data Visualization is Important

Machine learning technology helps companies collect and process massive amounts of data. To make the data accessible to a wide range of interested parties, data scientists use visualization methods.

For example, the image below shows a visualization of the global sea surface temperature from 2005 to 2015. The image clearly shows where the hottest and colder areas are. If you were to organize the data in a spreadsheet, it would take longer to present it. An image, on the other hand, can tell a complete story at a glance.

Data visualization is a crucial skill for any individual working with data, whether in education, health sciences, or computer science fields. In our data-driven business climate, your audience can gain value from information presented in a clear visual way.

What is Responsive Design?

The term responsive design refers to a flexible web design approach that makes pages display well regardless of the end device. For example, a responsive website will display its content on any device and adapt to different screen sizes. Since the number of people accessing the internet through their phones is rising, presenting data visualizations in a mobile-friendly way is becoming vital.

A key component of responsive design is responsive images. This method provides the browser with a number of image sources according to factors such as the device’s display density. You can adjust the images in your visualization using the srcset attribute and the <img>  element in CSS. You can learn more about how to code responsive images in this tutorial.

If you want to save time or your CSS skills are not up for the task, there are a number of image optimization tools you can use to automate the optimization. Image optimization tools also help you mark the breakpoints, automatically scaling the image to the different layout dimensions.

There are a number of considerations you should take into account when applying responsive design for data visualization. Some of them include:

• Understand the Difference Between Adaptive and Responsive Design

While sometimes the terms are confused there are key differences between them. Responsive design adapts to the screen regardless of the target device. This technique requires using CSS queries to configure the change of styles for different screens. Adaptive design layouts are static. They use breakpoints to detect the screen size and load the right layout for it.

• Test the Visualization in All Devices

Effective responsive design works for smartphones, tablets, and other mobile devices. You should test your visualization on all device types.

• Keep the Design Simple

Simple images adapt more easily to small screens. Keeping your layout simple, without extra elements, can help it load faster and improve the user experience.

Responsive Design for Mobile Data Visualization

Mobile content is becoming more relevant every year, with half of the web’s traffic coming from mobile phones. More than half of the users view data visualizations and infographics on their phones. Therefore, responsive images and content are critical to ensure a good user experience. Responsive visualization applies the principles of responsive design to data visualization.

Adapting web-based visualizations for mobile is not an easy task. It is especially complicated to achieve the interactivity required by touch devices. Ideally, visualizations should adapt to any condition, such as different ambient light.

Another constraint designers and developers face is the varied size and resolution of the screens among smartphone models. You can get around this by choosing a data visualization library. The elements of the visualization, such as charts or plots, should change according to the targeted screen resolution and size.

Data scientists typically use D3.js to program visualization sketches. D3.js is a JavaScript library used for creating interactive data visualizations. You can create visualizations in the browser using CSS, HTML, and SVG.

The image below shows an example of a responsive data visualization using D3.js:

The image shows a simple model with two bars for selecting the visualization size and the data size. You can also combine HTML and D3.js to make a chart responsive with a few lines of code, as shown in the tutorial.

Data Visualization Best Practices

Clear visualization presents a clear story. A cluttered image, on the other hand, confuses the reader. For example, the image below shows a data visualization of Facebook relationships.

Notice how the image is cluttered and the legends are not clear. The legends are the descriptive labels positioned next to the data points. This image doesn’t convey the message coherently.

Designers and data scientists should follow guidelines in data visualization to provide attractive, useful and relevant content.

Below, you’ll find a list of best practices for effective data visualization.

1. Define Your Goal

What is the purpose of your visualization? You can use data visualization to show customer behavior, measure the performance of an app, or call attention to a problem. Knowing what you want to showcase can help you set priorities. You can then focus on the visuals that are necessary.

2. Choose the Right Chart

You finished refining your dataset and you want to present the results. Sometimes your choices of charts are restricted by the data type. For example, when you are working with temporal data, you should choose timelines or scatter plots. This will help you show the performance of an indicator over a period of time.

3. Make Sure Your Data is Complete and Clean

If there are missing data in your dataset, it will show in your visualization. Usually, you can compensate for missing data by using common methods such as calculating the mean or substituting values. However, if your data is not completely clean, the visualization can be confusing. You should strive to ensure there is no mis-formatted data in your dataset. You can use tools such as OpenRefine to clean the data.

4. Consider the Audience

A data presentation for beginners will be completely different than one designed for an experienced audience. Your audience will determine whether you need a simple or more complex visualization.

Visualizations geared to the common user should be clear and simple. The graphics should be bold and neat, focusing on the key message you want the user to take away. Visualizations for experts should expand in detail, allowing for a deeper understanding. 

5. Keep the Visualization Clean

You should choose a visualization type, such as a graph or plot, that lets the data be the star. Too many details can distract the user from the story.

Configuring the order of display, the colors, and the size of elements can help users to quickly grasp the meaning of the data. Establishing a hierarchy of data can provide relevance and guide the viewer through the important points. In the graph below, the size of each bubble represents the level of employment.

6. Avoid #D or Blow-apart Displays

Some visual representations can be misleading. 3D charts usually reduce our ability to understand the data. While attractive, they distort the proportions of the image, making it harder to figure out the spatial relationships between elements.

7. Make the Visualization Inclusive

Include a contrast that helps visually impaired people understand the chart more clearly. There are plenty of image editors with color blindness proofing tools that can help you check your visualization color scheme. Fonts should be clear and sufficiently large to improve readability.

The Bottom Line

Effective data visualization should communicate the story behind the data in a coherent and clear way so that the audience understands the data at a glance. The ultimate goal is to make the data easy to understand and convey the right message. Applying the tips mentioned in this article, you can ensure your visualization will let the data tell the story.