In this post, we will cover interactive data visualization and its benefits mostly. To give you the outline, the definition of interactivity and its effects on visualization, tips to create samples, and the points that you can take advantage of this technique will be described below.
Table of Contents
What is Interactive Data Visualization?
According to Wikipedia, interactive data visualization is enabling direct actions on a graphical plot to change elements. This definition fails to notice the importance and ability of this technique.
Lately, we think interactivity features as user experience(UX) tricks, however; with the power of current visualization tools, you can design the entire visualization around interactive features of your tools.
So, we can say that interactive data visualization is a technique that you can give more insights to the audience by changing the formatting, ordering, or filtering the data. All these make a good recipe for better visualization because data visualization needs to be clear and efficient.
How to create interactive data visualizations?
As web developers, we use this interactivity in our daily implementations without thinking about its details. Think about dropdown menus, accordion items, etc. All these items are samples of interactivity. In terms of data visualization, charts and data tables are great components that can contain these interactivity elements for the beginning. Below, we will see easy tricks that help you to create interactive visuals.
-
Use Tooltips with Mouse Over
Tooltips are the most well-known UI elements to show extra information to your audience. They are interactive and may contain very important information in case of user action.
So the first question is that if they carry such valuable data, why don’t we show this information in the first place? Well, there are two main reasons for this usage and we will cover them in the following example.
This chart, which is another interactive data visualization tool, draws a line graph and focuses on the exchange rate between USD and EUR. As you see, the tooltip contains valuable information with respect to the day of selection. So, if we try to show this kind of information in the first draw, there will be two side effects.
The first one is the visual complexity. There are 2841 data points on the line and if you try to put each date with its detail, it would be chaotic as the below visual.
The second problem is the low performance. Your process will require much more resources which is not a good idea for web pages.
So, you have to keep this data hidden and show it to the audience if necessary. In this way, you will have a clear data visualization and a faster website.
2. Use Filtering, Sorting, and Pagination
If you are working with admin dashboards, usually you need to provide lots of reports on a single page. In addition, admins or analysts will ask for more and more all the time. So, this means you have limited space to show rich insights to the user.
Remember the above example, we have exchange rates and you need to show the “Last 10 Changes“. The first option may be a single table that shows the rate and timestamp columns. Actually, it would be a clean and simple solution. But, you can add value to this presentation by simple interactivity actions.
Let’s say we add filtering, sorting, and paging features to this table with an interactive UI component. Now you have a data table that can provide much more insights to the user. So you may need to change even its title. For example, now you can see when was the highest/lowest changes, how many changes occurred in a single day, etc. Notice that, pagination option here provides you with all the data which makes other options usable here.
3. Use Aggregations
Similar to the previous scenario, providing aggregation options to the user would be another solution to create interactive data visualizations. To show aggregated data we mostly use charts. The most common ones are pie chart, bar chart, and bubble chart.
Think you have a company and you just completed a YES/NO questionnaire about your new office location within your employees. You know the age, salary, and gender of each employee. Now it is time to see the relationship between their answers and characteristics.
Let’s say we pick the pie chart for this visualization. You just need to add a selection UI component that contains the employee data fields. In this way, you can change the aggregation field and interactively analyze their answers with respect to age, salary, and gender.
4. Use Clustering
As we discussed before, when you have a large data set and limited space to show them, you need to use some extra tricks. Clustering is one of them and it is highly effective in case you combine it with aggeration.
To clarify this option, maps are one of the most common tools as we use them in our daily lives. Sometimes, considering data amount within a small area may cause complexity problems on maps. In this case, you should use clustering visuals instead of drawing all the pins in a specific zone. Aggregation is is your friend here. Simply, you can group and count items in a specific distance and show their count with a single pin. Do not forget to add interactivity to those pins, so that users can click them and zoom in to that area. Once you zoom in to that location, you can show real pins because you have a bigger viewport as a result of zooming action. See the below image as a clustering sample where blue circles are cluster pins.
5. Use Interactive Charts (drill down, zoom, filter)
Any type of data visualization is always connected to charts or graphs. In terms of interactivity, they provide all the features we need for visualization and interactivity. Some chart libraries provide more than render the visual. For example, if you are using Highcharts, you will have extra features such as drill-down and zoom.
The drill-down is useful if you need to show extra insights. Basically, it renders a new chart with respect to the trigger point. For example, this Highcharts sample is a column chart that lists browser shares in the market, and once you click one of the columns, you can see the distribution regarding the version of the selected browser.
The zoom feature is mostly available for line charts. If you have a line chart with a number of points, the line seems smoother for small intervals. However, if you can take a closer look, changes in that interval can tell you a different story. Check this sample and use the zoom feature to see changes.
Benefits of Interactive Data Visualization
Actually, up to this point, we have already covered how helpful is interactivity. To sum up, we can list the benefits of interactive data visualization as below;
- Clear visuals provide more insights
- Improves performance
- Provides Enhanced Data Analysis