Five Design-Sheet Methodology Approach to Data Visualisation
By: Kieran Tan Kah Wang
Tags: Data Analysis, Five Design Sheet, Data Visualisation, Data Science, D3js

Image by author — D3.js visualisation

Let’s say we are supposed to visualise our findings and communicate them clearly to our stakeholders, how do we decide on the type of data visualisations to deliver these insights effectively? Do we just explore beginner-friendly data visualisation tools like Tableau or Microsoft Power BI to do the charts? Or should we spend more time using complicated tools like D3.js or R shiny library to design more creative visualisation? In the first place, should we decide on the tools first or should we decide on the design first? There’s definitely a possibility whereby our ideas in mind are hard to implement in those tools we are familiar with, and often ending up with simple and non-effective visualisation designs.

The Five Design-Sheet (FDS) Methodology was introduced as a way of formalising sketching and lo-fidelity prototyping to allow visualisation designers explore their ideas without worrying on the technical aspects. As the name suggests, there are 5 sheets in this methodology and this article will touch on what each sheet is about and how were they being used to develop the visualisation in the screenshot above (done in D3.js).

Problem Statement

Photo by Arthur Edelman on Unsplash

This portion is not entirely important but I thought it will be nice to give a complete picture of what we are trying to achieve through the FDS methodology. We are trying to study the possible correlation between rainfall and aircraft movements in 8 major Australian airports, namely Adelaide, Brisbane, Canberra, Gold Coast, Melbourne, Perth, Sydney and Tasmania from the data period of January 2011 to December 2016.

The key message that I hope to convey to the target audience is that there was a noticeable pattern between rainfall and aircraft movements in the month of February consistently across the years from 2011 to 2016. A drop in rainfall coincidentally saw a drop in aircraft movements in the month of February.

The intended target audience for communicating this key message will be Australian Government Department of Infrastructure, Regional Development and Cities. Main roles of this government body includes supporting economic growth through transport and increasing transport access. By communicating the key message to them, it may potentially lead to more flights and routes planned out in the month of February when it was evident that there was clearly a drop in aircraft movements in the month of February across 2011 to 2016, with a coincident drop in rainfall as well. This is in line with the responsibilities of the government data as it will lead to greater flight access to the general public and in turn, boost the economic growth with increased revenues. Furthermore, the dataset containing the amount of aircraft movements originated from the same government body and by presenting analysis of their own dataset, it may lead to greater credibility of the data resulting in stronger communication of the key message.

Sheet 1 — The ideas sheet

This is the initial brainstorming sheet, whereby you just sketch all your ideas on a piece of paper regardless of whether they are realistic or implementable. Come up with at least 10–20 ideas and then filter the ideas based on whether there’s duplicates or irrelevant concepts. Categorise the ideas together and think if there are any missing concepts. Combine & refine the categories into more complete solutions and see which idea complement each other or whether a combination of designs can lead to better designs. Question whether the designs can solve the original problem (i.e. able to convey the message effectively) and choose 3 ideas which can be explored in the next 3 sheets.

Image by author — FDS Sheet 1

A total of 12 different graphs/sketches were generated in the “IDEAS” portion and with the key message in mind, irrelevant graphs/sketches were removed in the “FILTER” section. Heat Map was deemed irrelevant as the dataset for this project did not cover the whole of Australia and only 8 airport locations were selected. Pie chart was also crossed out as it was inappropriate to represent two data factors (Rainfall and Aircraft Movements) in one pie chart. Tree Map was removed as well as the key message was not to compare the highest/lowest rainfall/aircraft movements. The remaining ideas were then categorized into five main categories as shown in the “CATEGORIZE” section and they were then combined into three possible designs namely a combined bar and line chart, a symbol map and a bubble chart that will be discussed in the next 3 sheets.

While coming out with possible ideas for the narrative visualisation to be able to communicate the key message to the target audience, some questions were asked and noted down:

➢ Is showing location geographically necessary to deliver the key message?

➢ Does showing the data period by year/month/quarter be more effective in

delivering the key message?

➢ Can users filter according to data period, location of airport?

➢ Can users view overall graph after filtering have been applied?

Sheet 2 — Alternative design sheet

Sheet 2, 3 and 4 are designed for the purpose of exploring the 3 designs chosen from Sheet 1 to a greater depth and usually contains the following parts:

1. Information: meta-information such as title, author and dataset

2. Layout: a sketch of the design visualisation

3. Operations: list down the functions available in the visualisation and what the user is able to do with it

4. Focus: identify the core portion of the visualisation design

5. Discussion: discuss the advantages, disadvantages, feasibility of the design

Image by author — FDS Sheet 2

The first design being considered was a bubble chart. Using this visualisation, the key message will be communicated when the user drags the data period filter horizontally which will make the bubble chart change over time. In this way, when the user drags from January to February, the position of the circles will be lower as there were both a lower rainfall and aircraft movements in February compared to January. This will allow the user to have a general idea of how rainfall affect aircraft movements and with the different colours representation of the bubbles based on the location, users can easily identify possible trends in different locations with the help of the location filter as well. Finally, a tooltip will be displayed when users hover over the bubbles showing the location, rainfall amount and total aircraft movements.

This design was not chosen as the final design as since there were only two value-based data factors namely aircraft movements and rainfall, there was no pre-existing third data factor that can be shown together with the width of the circle. Thus, a ratio between these two factors needed to be computed to represent the width of the bubbles which I thought was irrelevant and provide little context in communicating the key message. Furthermore, axes of a bubble chart are best represented by two value-based data and since our dataset and key message include a time data factor, it can only be included in this visualisation as a filter which makes it hard for users to identify the key message over the years in a single glance without dragging horizontally on the data period filter.

Sheet 3— Alternative design sheet

Image by author — FDS Sheet 3

The second design being considered was a combination of bar chart and a line chart. Through this visualisation, it will allow users to have an overall glimpse of how the two data factors (Rainfall and Aircraft Movements) differed over time. And with the additional users’ interaction of filtering the data to the desired year and quarter, it will be easier for users to focus on just quarter one of the data periods which will thus lead to more effective communication of the key message. Furthermore, tooltip will be displayed when users hover over the bar charts or the airplane symbol on the line chart. A third users’ interaction filter in the form of a map was included for users to filter between the 8 different locations, while at the same time, identify the key message geographically. Representing the bar charts with rainfall as background and the line chart with an aircraft symbol will generate another form of easy identification between the two data factors.

The first issue with this visualisation was users will not be allowed to choose multiple locations at the same time. The location filter will only allow one location to be chosen at the same time and this will prevent users from comparing between two locations. Furthermore, as the key message focus primarily on the data period of February, a single bar chart with 12 individual bars representing the 12 months of a year might not be appropriate to focus on month of February only. Representing the whole data period at once by months will lead to a total of 72 bars plotted in a single bar chart which might be hard for users to perceive the information and the key message.

Sheet 4— Alternative design sheet

Image by author — FDS Sheet 4

The third design being considered was a symbol map. Aircraft movements will be represented by size of the circles on the map and rainfall will be represented by the colour saturation of the circles. A filter is included whereby users can drag horizontally to filter between data period. The key message can be make prominent when users access the data period filter from January to February which will see a decrease in size of circle and lighter saturation of the circle as there were lower aircraft movements and rainfall in February compared to January. Hovering over each circle will also display the amount for rainfall and aircraft movements which allow users to grasp the real data values. This geographical visualisation allows users to easily identify any possible trends with respect to each location and the size and colour saturation of the circles allow users to further identify the highs and lows of the two data factors.

However, as the key message focus primarily on just the time factor (i.e. February), geographical representation should not be the focus as it might lead users away from the key message. Furthermore, it will be hard for users to view the whole data period plotted at once in the same map which might make the key message less prominent. Lastly, though the highs and lows of rainfall and aircraft movements of different locations can be easily identified with the colour saturation and size of the circles, this is not a component of the key message.

Sheet 5— Realisation sheet

This is the final chosen design detailing the concepts in the visualisation. It contains information about the design, functionality and interactions for it to be implemented. The following components can be discussed in this sheet:

1. Description of the main design patterns, algorithms or data structures and references

2. Underlying maths and calculations used in the design such as layout dimensions

3. Software requirements, dependencies, etc

4. Estimates of cost, time, etc

5. Any other requirements or resources needed

Image by author — FDS Sheet 5

The final chosen design was an improvement from Sheet 3 — combination of line and bar charts. Instead of plotting the whole dataset in a single chart, the dataset will be plotted on 6 different charts with each chart representing a year (i.e. 2011 to 2016). A quarter filter will aid the communication of the key message as the bars corresponding to the users’ selection of quarter will be highlighted across all the 6 charts which allow users to focus on just those bars. A location filter will be included to allow users to filter between locations. Finally, tooltip will be displayed when users hover over the bars represented by blue which corresponds to colour of the rainfall, and the airplane symbol representing the data factor of aircraft movements.

Main reason for choosing this design was it will be easier for users to view the whole dataset in a single glance for easy identification of the key message instead of filtering the data period year by year or having a single chart with 72 bars. The second reason was I felt this is the simplest and most effective representation of two data factors over the time factor. Bearing in mind the target audience is a government body, a visualisation that can deliver messages promptly should be implemented.

Users will first have an overall view of the whole dataset regardless of the locations and highlighting the bars to quarter 1 using the quarter filter will allow users to see a noticeable pattern of drop in aircraft movements when there was a drop-in rainfall in months of February across 2011 to 2016 shown in the 6 different charts. This will be effective for the communication of the key message which was to highlight the month of February. And if the users are interested to identify if this pattern is consistent across all 8 locations or more prominent at any location, the location filter can be used.

Summary

Image by author — D3.js visualisation

That’s the Five Design Sheet methodology which helped us to finally able to design and implement our final visualisation design in D3.js as shown in the screenshot above, and with all the functions as described in sheet 5. Though coming up with the 5 sheets for one visualisation problem seems daunting and might not be time efficient, I feel this is a good way for me to combine all my ideas and deep-dive into minute areas which I could have missed out if I were to design the visualisation design straight from the start. Hope this walkthrough can help you guys to become an effective data visualisation designer!