How do you effectively control interactivity in a dashboard?

In most cases interactive dashboards are a progression of static, image-based charts. You have written research papers or reports with static charts added to them, e.g. using Excel, PowerPoint or a graphics program like Illustrator or Photoshop. This is all good if your data does not change. Static charts become cumbersome and time consuming when data changes frequently because you need to create the same chart over and over again. This is where interactive, web-based charts and dashboards come in – when connected to a data source that is held separately charts automatically change when the underlaying data changes and users have more freedom which data to access. Problem solved - or not really?

Out-of-the box data visualisation tools like Qlik or Tableau offer an easy way to build interactive dashboards and can deal with different data sources, however the charts often end up not looking exactly like the display you would expect in a static chart. The chart ranges and units might look odd at times as the underlaying data updates and multiple controls are available to manipulate a chart, particularly this becomes tricky to control when the data gets more complex. To achieve results that look more like charts in printed publications, extra configuration or programming effort is required. Some out-of-the-box tools provide configuration options to further control this, however we tend to use “scripted” dashboards when it gets more complicated (using programming languages like R Shiny, Python, JavaScript) as they provide more flexibility.

Let’s go through what this is about, with examples of recent dashboards we have developed:

Axis scale and grid

The scale of an axis is divided up into units with a minimum and maximum value (the boundaries), which are determined by the data you have available. You typically have an overall axis label (“Number of cases”), unit labels (0, 10, 20, 30, …, 80) and there are grid lines or ticks associated to them. Whenever possible, you should start the axis with a zero and label it accordingly.

Here is an example of this from the NZ COVID-19 Dashboard:

When you add interactivity to your chart, e.g. a date range filter, the maximum value is likely to change and your chart then needs to display 100, 200, 1000 or more cases for a day. This means the axis automatically needs to adjust depending on the filter so that users can still see the bars and explore the respective values.

What you don’t want to do is simply program the chart to look at the max value and then divide it by the number of gridlines as there’s a high probability you’ll get odd numbers. The y-axis might then show for example a sequence of 176, 352, 527 and so on when you have a maximum of 879 cases and five grid lines, which is not very user friendly. It is better to pre-define ranges of e.g. 0-10, 0-20, 0-50, 0-100, 0-200, 0-500 and 0-1000 and then check programmatically where your max value best fits in. As for these ranges all max values can be divided by 5 the axis shows simpler unit labels (e.g. tens or hundreds) which are easier to read.

A similar scheme is also relevant for dates, it is preferable to go for date intervals that humans can relate to, e.g. days, weeks, fortnights, or months as opposed to intervals of 5 or 10 days. We often programmatically define this for our date ranges and assign intervals depending on the filters and the data we have available.

Multiple charts on a page – sync them!

Having tidy axis ranges and unit labels is one thing, another thing to look out for is unifying axis ranges across multiple charts across a dashboard page.

Example: Kupe data explorer

In the example above you see two bar charts in a dashboard and the charts change based on the health indicator chosen. The charts show the distribution across “Age and sex” and “Ethnicity”. For this particular dataset we defined ranges from 0-10, 0-30, 0-60 and 0-100 and following this scheme the Ethnicity chart should actually show a range from 0-30, however having charts with different axis ranges next to each other makes it harder for users to compare the values across the charts. Here it is advisable to sync the charts across the page so that unified y-axis ranges are presented. So you work out the max value across ALL charts and then assign the same range to all charts to sync them up. This is not possible in all cases; however you should sync charts where possible as a rule of thumb.

Hover boxes and other chart features

Chart hover boxes offer a great way to layer information – the chart shows on an overview level the most relevant data and users get a sense of a trend or how different values compare to each other. Once you get the “big picture” you want to offer options to further drill into the data presented, like exact values or supplementary values. Most chart tools or libraries put by default the y and x-axis values of the data point in a hover box, however it often pays to put extra effort into formatting the hover box and adding more specific information to it, as the example below shows.

Example: NZ COVID-19 Dashboard

More chart features!

Interactive charts often come with in-build functionality, e.g. zoom, select, pan or image export. These are great features but often don’t add much value, so it’s worth checking if a specific feature is likely to be used. If not – remove it and just include the ones that are useful! We often use the Plotly charts library which allows you to choose the features you want so you can achieve a clean look. The message is don’t leave it to chance what features are shown and remove anything that adds clutter.

An interactive chart feature we use frequently and recommend for charts which have relatively low values for some data points, is the chart zoom. Users can click and drag to enlarge an area. In this case don’t forget to tell the user the feature is there and how to use it!

Example: NZ COVID-19 Dashboard:

Shock: What do I do with “No data”?

When you design a dashboard and look at the data to be included, the goal should be that meaningful data is displayed with any combinations of filters you are using. In most cases empty charts can be avoided by choosing the right data and filters, however there still might be cases where no data available, e.g. when sample sizes get too low. In this case don’t just feed no data to the chart and display an empty chart – the user might wonder if there are some very small data points that are just not visible. A better way to handle this is to replace the chart with a message box and spell out that no data is available!

epi-interactive.com | connecting data, science & people

Like this post? When you’re ready, here is how we can help you further:

• Contact us on info@epi-interactive.com if you would like to discuss your next data visualisation project with us.
• Want to learn more about building interactive data dashboards? Our next Advanced R Shiny Masterclass online workshop starts 19 October 2020, or register your interest for future workshops here.