Of Dashcards and Drill-Down Maps

For a few months now, we’ve all been exposed to constant updates on the terrible tally that the Coronavirus pandemic has left, and continues to do, around the world. Number of cases rising, fatalities, rates of infection, some curves peaking, others flattening. The picture is pretty grim, no matter how you slice it, or how you present it. However, in building our understanding of the impact the novel coronavirus has had in all corners of the world, it is important to remember that, in the world of Data Visualization, Context is King.

I first read the phrase “Context is King” in a blog post by Dalton Ruer, a.k.a QlikDork. Then found other sources that elaborated on the idea. In any case, It has always been an important part of Dashboard design, but today I intend to present an example of how adding context to a visual helps paint a more accurate representation of the performance being measured. Understanding what’s behind that number we look at everyday, whether in social issues or in the business realm, what is driving a certain performance metric, and how it has been trending over time, will lead to better decisions.

The types of context we can provide around a performance metric would typically be one or more of the following:

• Temporal context. How it compares to previous, comparable, periods (i.e. week over week, month over month, weekday vs same day previous week, etc). Sometimes it is also important to see how a result has been trending in order to make sense of the current number. This trend can be based on the absolute number, or based on the rate of change over time. Or both.
• Performance drivers and/or derived metrics that may be related to the main KPI by either a causal relationship or by correlation. Often, a metric we are monitoring may be the result of multiple events taking place. For instance, sales may increase at a store location due to higher foot traffic, or website traffic may increase as a result of an ad campaign with high click-through rate, which in turn leads to higher online sales. Or, confirmed coronavirus cases increased as a result of more aggressive testing, but at the same time a higher positivity rate.
• Location context. Sometimes, performance may also be correlated to geographic location, so giving the user the ability to explore the data in the context of geography may help build a better understanding of the results. This is achieved with the use of map visualizations.
• Proportionality context. In many cases, having a clear view of a metric in terms of its proportion to another metric may make it easier to digest and provide a way to perform comparisons across categorical dimensions that may not be directly comparable without proportionality. A clear example of this is GDP per capita, which allows the comparison of GDP across different countries which may otherwise provide a misleading view of the data.

It may seem like a daunting task to add all the above into a dashboard, but it doesn’t have to be. And we don’t have to add all types of contextual hints to all metrics we’re monitoring, just the most relevant for what we’re trying to communicate and that would help the user build understanding of the data without cluttering the dashboard and distracting from its main purpose. When used effectively, context will help the user avoid having to do mental calculations to make sense of the numbers on the screen, and prevent them from drawing incorrect conclusions about the data being presented.

A contextual Dashboard example

Over the past few weeks I have been working on building a Dashcard visualization object to make it easy to visualize the context around a certain KPI, and in a condensed view that’s easy to digest. To build a proof of concept, I decided to use data related to the coronavirus pandemic, provided by Mexico’s Ministry of Health, which resulted in the interactive dashboard displayed below.

The dashboard below shows two Dashcards, one with the number of Confirmed Cases, and one with the number of Observed Fatalities. Besides showing the main metric (total number), each dashcard provides the following contextual hints:

• How the metric has been trending over the past 14 days, including highest and lowest point in said time period
• The record high for a single day, and the date on which the record occurred
• The percentage of change vs the previous day
• The historic view of the rate of change from one day to the next over the last 14 days (red/green bars)
• The number of incidences that occurred the previous day
• The total number of incidences accumulated up to the previous day
• A derived metric (Positivity rate and Fatality rate, respectively)

The dashboard also has a drill-down choropleth map, to show location context and to visually display how the various regions compare to each other. When clicking on a state, the map would provide more granular context that’s specific to that state, showing the breakdown by municipality, also with their geographic context.

The buttons at the top of the map allow the user to interact with the dashboard by changing the measure being used to compare the regions on the map (button group on the left), and also by toggling the view to switch the metric between an absolute number and one shown in terms of population (incidences per 100,000 people), the proportionality context, controlled by the button labeled “Ver por Tasa”. You can see how toggling this context on and off paints a very different picture that yields a better understanding of the data. This toggle also affects the main KPI displayed on the two Dashcard objects.

Finally, there’s a trend view at the bottom that allows the user to view the overall trend for the selected measure, while also allowing them to zoom into specific time periods.

I’ve embedded the dashboard below in interactive mode, so feel free to play around with it and explore the data. If you prefer, you can also open the main view of this demo here.

Please note the text is in Spanish because it was originally built with data from Mexico’s Health Ministry and the original intended audience were residents of Mexico.

Additional Contextual Hints

The proof of concept above may still benefit from additional features that I didn’t get a chance to implement, at least for now. For instance, we may need to add a legend on the map to show the scale on which the regions’ color is calculated. Additionally, the tooltips on the map may also benefit from a redesign, and those sparklines in the Dashcards could also benefit from having some tooltips. These features will be added soon.

About the Dashcard

The Dashcard object is a custom design I created, and is pre-rendered server-side with the D3.js library, and updated on the client-side as the user navigates the dashboard. It is configurable with the use of a declarative language for describing the elements of the visualization, similar to Vega-Lite, and the elements are automatically aligned based on this configuration to create a pixel-perfect view of the data.

It has the advantage of adapting to any screen size to keep the geometric precision of the elements’ position and size, as well as re-adjusting them on the fly to accommodate the new values that are to be displayed as the user interacts with the data.

If you’re interested in using it in your own dashboard (whether Qlik-based or in mashups) reach out!