Please go through a Chapters 7,8 and 9 in the attached text book and create a reflection. Each Chapter Reading Reflection should address the following prompts:
1
2
Chapter 1: Defining Data Visualization
Summary
In Chapter 1, the author Mr. Kirk describes about the concept of Data Visualization. Data
visualization was defined as the visual analysis and communication of data. The chapter also
included the historical background survey definition of data visualization by various other
authors.
Also, in the book was a set of fascinating recipes that of the components in that involve in the
definition. The type of data that is required to be visually analyzed is important before it is being
subjected to further processing before visualization.
Mr. Kirk also emphasized the significance of the art and science of making data analysis a fun
filled technical and an analytical reading that encourages the use of human perception to make
decisions in assistance of visual treats that come in the form of graphs, pie charts among others.
The science of data visualization is defined with the implication of truth, evidence and rules that
govern the process of visualizing a set of data that can be quintessential in determining the path
of an enterprise or an organization.
Highlights:
Upon reading the chapter 1 in this book that was in depth into data visualization, I was able to
grasp essential technical and analytical definitions and can say they are quiet telling in terms of
the importance on the concept and visual representation of the definitions. The use of some of
the citations was a key indicator that data visualization can be defined in various ways and can
assist in technical improvements if used in way that is beneficial to all parties.
3
Ideas and thoughts:
The chapter was a thorough analysis of the concept. However, I was also keen on looking for
live examples of visual tools or results of analysis inculcated in this defining place of the book.
The big positive is the use of the concept of science and art that can be implemented in the day to
day activities to introduce data visualization in any area and can help in making decisions that
can set a trend for the growth of an organization. In terms of the course, it was a great read to
write this review journal and can hopefully add a firm base to the things to come.
Application:
The concept of data visualization can be implemented in my current work environment. As an IT
personnel, I deal with the network infrastructure and constantly come across large chunk of data
that will need to be analyzed for its usage stats, bandwidth, performance and benefits of choosing
the hardware or software accordingly. To best impact this, the monitoring tools such a s NetFlow
helps us in verifying bandwidth over utilization or underutilization to perform a set of tasks
before troubleshooting any related issues. Now, the concept of data visualization can be
implemented here to introduce business analysis visualization tools such as Tableau to measure
the weekly, bi-weekly, monthly statistics to make decisions. The visual analysis shows the
decision maker to stick to the current bandwidth, hardware etc. or upgrade as necessary.
4
Chapter 2: Visualization Workflow
Summary
In chapter, Mr. Kirk explains about the workflow and path of visually analyzing data, the
visualization workflow is a key concept in implementing a data visualization tool in an enterprise
and the chapter benefits the reader with typical representations of the concept in mutual
combination of theoretical definitions. The conceptual workflow involves around the decision
forensics, assessment of the current workflow and a final analysis of potential problems.
The decision forensics speaks about sample visualization and forensically decipher the designs
and pattern of data and deconstruct a puzzle to get to the root of the theme under consideration.
The tactics involved is explained and the need to find hidden contexts and behind the scenes data
is important. The stage of current workflow talks of the existing setup. Advantages,
disadvantages, need to improve and the benefits of improved visualization analysis.
Highlights:
the author emphasizes an activity involving brainstorming the reader to perform data gathering,
ideas to implement a project plan with the manager at an enterprise and to learn the underlying
concept of data visualization. This provided a learning opportunity to the reader to engage in the
book and analyze their situation based on this concept.
Ideas and thoughts:
The author presents us a unique way of representing data visualization through workflow models
that can highly impact the decision maker to choose a path that can be totally different to the
existing setup.
5
Upon reading the chapter 2, I was able to gather info about the use of data gathering and
arrangement before processing. A quick thought on this provided the possibility of segregating
data beforehand in order make the process smooth and to eliminate unusable data. This can save
a lot of time and money when the size of data is large. A further benefit was to improvise the
existing setup by going through the existing setup and acquire hidden data. However, this needs
to be done without unintended downtime and loss to an organization.
Application:
The workflow can be implemented in my current personal space while assessing the amount of
data stored in my emails coming from credit card transactions. Upon logging into my credit card
activity statement, I can filter thrones that are needed. This can help benefit me to keep track of
the required ones and delete the rest of junk. Nowadays, since this is visually available through
graphs, it makes life easier to organize the data before acting.
Meanwhile, in an enterprise, the importance of workflow cannot be emphasized enough. The
need to gather historical data is quintessential in terms of auditing and cost analysis. The most
important part is the effect this has in future decision-making processes.
The next application is to perform thorough research on the hidden data that can go missing but
can have a significant impact on the outcome of a project. For example, if the data usage over a
weekend is not captured as it was a long weekend, it affects the next part of the report and can
mislead a user to perform wrong analysis.
6
Chapter 3: Formulaing Your Brief
Summary
In Chapter 3, the author brings a fascinating idea of Formulation of your thoughts in brief and to
analyze the context that revolves around the curiosity ad the purpose and eventually concluding
with ideas and maps that define the purpose of doing the activity.
The author begins with his fascination of movies – what makes a big movie, the cast involved,
technical aspects, background score, set and the need to entertain the audience in a visually
pleasing way. Key decisions are to be made for each of these to make it a blockbuster.
Highlights:
The key highlights on the chapter in terms of the activity was the representation of circumstances
involved around a big movie – stakeholders and audience; the constraints; consumables –
frequency and setting to inculcate the rest; delivery – importance of time and format and the
major part was the required resources. All these required skilled labors to assess the data and
provide suitable suggestions to bring a visual spectacle to the screens.
Ideas and thoughts:
The key ideas and thoughts while reading the chapter was the unique way of analysis of the
author to bring about his point of view.
In conjunction to the above points, the vision was clear through the purpose maps and ideas. The
purpose was to present in a way that is appealing through caption, overlays, dialogues and
balancing it with values and logic. The lollipop maps provide a key mental visualization analysis.
I find that if this can be used elsewhere, it can benefit organizations to make quarterly decisions.
7
Application:
The concept can be applied and understood when we read the influence and inspiration of
visualization explained in the chapter. The author of such vast knowledge gets inspiration and
writes books, and we as readers can make use of the quantitative and qualitative variables and
can implement it in our daily activities.
The overall concept of delving deep into a plan and to research the key factors and to analyses
situations that stimulate the process can be crucial in determining the type of decisions that can
be undertaken.
In our workplace, a lot of work goes through tiers and hierarchical models and requires analysis
at each stage. The concept of formulating a brief can make sure the owners can keep track Nd
govern the activities in suitable fashion that can steer the growth of the organization.
Reference:
Kirk, A. (2016). Data Visualization: A Handbook for Data Driven Design. Thousand Oaks, CA:
Sage Publications, Ltd. ISBN: 978-1-4739-1214-4
2 Interactivity
The advancement of technology has entirely altered the nature of how we consume information. Whereas only
a generation ago most visualisations would have been created exclusively for printed consumption,
developments in device capability, Internet access and bandwidth performance have created an incredibly rich
environment for digital visualisation to become the dominant output. The potential now exists for creative
and capable developers to produce powerful interactive and engaging multimedia experiences for crossplatform consumption.
Unquestionably there is still an fundamental role for static (i.e. not interactive) and print-only work: the scope
offered by digital simply enables you to extend your reach and broaden the possibilities. In the right
circumstances, incorporating features of interactivity into your visualisation work offers many advantages:
It expands the physical limits of what you can show in a given space.
It increases the quantity and broadens the variety of angles of analysis to serve different curiosities.
It facilitates manipulations of the data displayed to handle varied interrogations.
It increases the overall control and potential customisation of the experience.
It amplifies your creative licence and the scope for exploring different techniques for engaging users.
The careful judgements that distinguish this visualisation design process must be especially discerning when
handling this layer of the anatomy. Well-considered interactivity supports, in particular, the principle of
‘accessible’ design, ensuring that you are adding value to the experience, not obstructing the facilitation of
understanding. Your main concern in considering potential interactivity is to ensure the features you deploy are
useful. This is an easy thing to say about any context but just because you can does not mean to say you
should. For some who possess a natural technical flair, there is often too great a temptation to create
interactivity where it is neither required nor helpful.
Having said that, beyond the functional aspects of interactive design thinking, depending on the nature of the
project there can be value attached to the sheer pleasure created by thoughtfully conceived interactive features.
Even if these contribute only ornamental benefit there can be merit in creating a sense of fun and playability so
long as such features do not obstruct access to understanding.
There is a lot on your menu when it comes to considering potential interaction design features. As before,
ahead of your decision making about what you should do, you will first consider what you could do. To help
organise your thinking, your options are divided into two main groups of features:
Data adjustments: Affecting what data is displayed.
Presentation adjustments: Affecting how the data is displayed.
There is an ever-increasing range of interfaces to enable interaction events beyond the mouse/touch through
gesture interfaces like the Kinect device, oculus rift, wands, control pads. These are beyond the scope of this
book but it is worth watching out for developments in the future, especially with respect to the growing
interest in exploring the immersive potential of virtual reality (VR).
When considering potential interactive features you first need to recognise the difference between an event, the
control and the function. The event is the input interaction (such as a click), applied to a control (maybe a
button) or element on your display, with the function being the resulting operation that is performed (filter
the data).
Where once we were limited to the mouse or the trackpad as the common peripheral, over the past few years
the emergence of touch-screens in the shape of smartphones and tablets has introduced a whole new event
vocabulary. For the purposes of this chapter we focus on the language of the mouse or trackpad, but here is a
quick translation of the equivalent touch events. Note that arguably the biggest difference in assigning events
to interactive data visualisations exists in the inability to register a mouseover (or ‘hover’) action with touchscreens.
2.1 Features of Interactivity: Data Adjustments
This first group of interactive features covers the various ways in which you can enable your users to adjust and
manipulate your data. Specifically, they influence what data is displayed at a given moment.
I will temporarily switch nomenclature to ‘user’ in this chapter because a more active role is needed than
‘viewer’.
F ram ing: There is only so much one can show in a single visualisation display and thus giving users
the ability to modify criteria to customise what data is visible at any given point is a strong advantage.
Going back to the discussion on editorial thinking, in Chapter 5, this set of adjustments would
specifically concern the ‘framing’ of what data to isolate, include or exclude from view.
For those of you familiar with databases, think of this group of features as similar in scope to modifying the
criteria when querying data in a database.
In ‘Gun Deaths’ (Figure 7.1), you can use the filters in the pop-up check-box lists at the bottom to
adjust the display of selected categorical data parameters. The filtered data is then shown in isolation
above the line from all non-selected groups, which are shown below the line. The ‘Remove filters’ link
can be used to reset the display to the original settings.
F igure 7.1 US Gun Deaths
In the bubble map view of the ‘FinViz’ stock market analysis site, you can change the values of the
handles along the axes to modify the maximum and minimum axis range, which allows you effectively
to zoom in on the records that match this criterion. You can also select the dropdown menus to change
the variables plotted on each axis.
Notice the subtle transparency of the filter menu (in Figure 7.1) so that it doesn’t entirely occlude the data
displayed beneath.
F igure 7.2 FinViz: Standard and Poor’s 500 Index
N av igating: There are dynamic features that enable users to expand or explore greater levels of detail
in the displayed data. This includes lateral movement and vertical drill-down capabilities.
You will see that many of these interactive projects include links to share the project (or view of the project)
with others via social media or through offering code to embed work into other websites. This helps to
mobilise distribution and open up wider access to your work.
F igure 7.3 The Racial Dot Map
280
The dot map in Figure 7.3, showing the 2010 Census data, displays population density across the USA.
As a user you can use a scrollable zoom or scaled zoom to zoom in and out of different map view levels.
The map can also be navigated laterally to explore different regions at the same resolution.
This act of zooming to increase the magnification of the view is known as a geometric zoom. This is
considered a data adjustment because through zooming you are effectively re-framing the window of the
included and excluded data at each level of view.
In the ‘Obesity Around the World’ visualisation (Figure 7.4), selecting a continent connector expands
the sub-category display to show the marks for all constituent countries. Clicking on the same connector
collapses the countries to revert back to the main continent-level view.
The ‘Social Progress Imperative’ project (Figure 7.5) provides an example of features that enable users to
view the tabulated form of the data – the highest level of detail – by selecting the ‘Data Table’ tab. The
data adjustment taking place here is through providing access to the data in a non-visual form. Users can
also export the data by clicking on the relevant button to conduct further local analysis.
F igure 7.4 Obesity Around the World
281
Anim ating: Data with a temporal component often lends itself to being portrayed via animated
sequences. The data adjustment taking place here involves the shifting nature of the timeframe in view
at any given point. Operations used to create these sequences may be automatic and/or manual in
nature.
F igure 7.5 Excerpt from ‘Social Progress Index 2015’
282
This next project (Figure 7.6) plots NFL players’ height and weight over time using an animated heat
map. When you land on the web page the animation automatically triggers. Once completed, you can
also select the play button to recommence the animation as well as moving the handle along the slider to
manually control the sequence. The gradual growth in the physical characteristics of players is clearly
apparent through the resulting effect.
S eq uencing: In contrast to animated sequences of the same phenomena changing over time, there are
other ways in which a more discrete sequenced experience can suit your needs. This commonly exists by
letting users navigate through predetermined, different angles of analysis about a subject. As you navigate
through the sequence a narrative is constructed. This is a quintessential example of storytelling with data
exploring the metaphor of the anecdote: ‘this happened’ and then ‘this happened’…
F igure 7.6 NFL Players: Height & Weight Over Time
283
The project ‘How Americans Die’ (Figure 7.7) offers a journey through many different angles of
analysis. Clicking on the series of ‘pagination’ dots and/or the navigation buttons will take you through
a pre-prepared sequence of displays to build a narrative about this subject.
F igure 7.7 Excerpt from ‘How Americans Die’
284
Sometimes data exists in only two states: a before and after view. Using normal animated sequences
would be ineffective – too sudden and too jumpy – so one popular technique, usually involving two
images, employs the altering of the position of a handle along a slider to reveal/fade the respective views.
This offers a more graduated sequence between the two states and facilitates comparisons far more
effectively as exhibited by the project shown in Figure 7.8.
A different example of sequencing – and an increasingly popular trend – is the vertical sequence. This
article from the Washington Post (Figure 7.9) profiles the beauty of baseball player Bryce Harper’s
swing and uses a very slick series of illustrations to break down four key stages of his swing action. As
you scroll down the page it acts like a lenticular print or flip-book animation. Notice also how well
judged the styles of the illustrations are.
F igure 7.8 Model Projections of Maximum Air Temperatures Near the Ocean and Land Surface
285
F igure 7.9 Excerpt from ‘A Swing of Beauty’
C o ntrib uting: So far the features covered modify the criteria of what data is included/excluded, that
then help you dive deeper into the data, and move through sequenced views of that data. The final
component of ‘data adjustment’ concerns contributing data. Sometimes there are projects that require
user input, either for collecting further records to append and save to an original dataset or just for
286
temporary (i.e. not held beyond the moment of usage) participation. Additionally, there may be scope
to invite users to modify certain data in order to inform calculations or customise a display. In each case,
the events and controls associated with this kind of interaction are designed to achieve one function:
input data.
The first example ‘How well do you know your area?’ (Figure 7.10) by ONS Digital, employs simple
game/quiz dynamics to challenge your knowledge of your local area in the UK. Using the handle to
modify the position along the slider you input a quantitative response to the questions posed. Based on
your response it then provides feedback revealing the level of accuracy of your estimation.
F igure 7.10 How Well Do You Know Your Area?
In the next project (Figure 7.11), by entering personal details such as your birth date, country and
gender into the respective input boxes you learn about your place in the world’s population with some
rather sobering details about your past, present and future on this planet.
287
F igure 7.11 Excerpt from ‘Who Old Are You?’
Figure 7.12 shows an excerpt from ‘512 Paths to the White House’. In this project the toggle buttons
are used to switch between three categorical data states (unselected, Democratic and Republican) to build
up a simulated election outcome based on the user’s predictions for the winners in each of the key swing
states. As each winner is selected, only the remaining possible pathways to victory for either candidate are
shown.
Inevitably data privacy and intended usage are key issues of concern for any project that involves personal
details being contributed, so be careful to handle this with integrity and transparency.
Adjusting the position of the handle along the slider in the Better Life Index project (Figure 7.13)
modifies the quantitative data value representing the weighting of importance you would attach to each
quality of life topic. In turn, this modifies the vertical positioning of the country flowers based on the
recalculated average quality of life.
F igure 7.12 512 Paths to the White House
F igure 7.13 OECD Better Life Index
288
2.2 Features of Interactivity: Presentation Adjustments
In contrast to the features of ‘data adjustment’, this second group of interactive features does not manipulate
the data but rather lets you configure the presentation of your data in ways that facilitate assistance and enhance
the overall experience.
F o cus ing: Whereas the ‘framing’ features outlined previously modified what data would be included
and excluded, ‘focus’ features control what data is visually emphasised and, sometimes, how it is
emphasised. Applying such filters helps users select the values they wish to bring to the forefront of their
attention. This may be through modifying the effect of depth through colour (foreground, mid-ground
and background) or a sorting arrangement. The main difference with the framing features is that no data
is eliminated from the display but simply relegated in its contrasting prominence or position.
F igure 7.14 Nobel Laureates
289
The example in Figure 7.14 provides a snapshot of a project which demonstrates the use of a focus
filter. It enables users to select a radio button from the list of options to emphasise different cohorts of
all Nobel Laureates (as of 2015). As you can see the selections include filters for women, shared winners
and those who were still living at the time. The selected Laureates are not coloured differently, rather the
unselected values are significantly lightened to create the contrast.
F igure 7.15 Geography of a Recession
290
The project shown in Figure 7.15 titled ‘Geography of a Recession’ allows users to select a link from the
list of filters provided on the left to emphasise different cohorts of counties across the USA. Once again,
the selected counties are not coloured differently here, the unselected regions are de-emphasised by
washing-out their original shades.
F igure 7.16 How Big Will the UK Population be in 25 Years’ Time?
‘Brushing’ data is another technique used to apply focus filters. In this next example (Figure 7.16),
291
looking at the UK Census estimates for 2011, you use the cursor to select a range of marks from within
the ‘violin plot’ display in order to view calculated statistics of those chosen values below the chart.
The next example (Figure 7.17), portraying the increase or cuts in Workers’ Compensation benefits by
US state, demonstrates a technique known as ‘linking’, whereby hovering over a mark in one chart
display will then highlight an associated mark in another chart to draw attention to the relationship. In
this case, hovering over a state circle in any of the presented ‘grid maps’ highlights the same state in the
other two maps to draw your eye to their respective statuses. You might also see this technique
combined with a brushing event to choose multiple data marks and then highlight all associations
between charts, as also demonstrated in the population ‘violin plot’ in Figure 7.16.
F igure 7.17 Excerpt from ‘Workers’ Compensation Reforms by State’
Sorting is another way of emphasising the presentation of data. In Figure 7.18, featuring work by the
Thomson Reuters graphics team, ‘ECB bank test results’, you see a tabular display with sorting features
that allow you to reorder columns of data by clicking on the column headers. For categorical data this
will sort values alphabetically; for quantitative data, by value order. You can also hand-pick individual
records from the table to promote them to the top of the display to facilitate easier comparisons
through closer proximity.
Linking and brushing are particularly popular approaches used for exploratory data analysis where you might
have several chart panels and wish to see how a single record shows up within each display.
Anno tating: As you saw in the previous chapter on data representation, certain combinations of
marks and attributes may only provide viewers with a sense of the order of magnitude of the values
presented. This might be entirely consistent with the intended tone of the project. However, with
interactivity, you can at least enable viewers to interact with marks to view more details momentarily.
This temporary display is especially useful because most data representations are already so busy that
292
permanently including certain annotated apparatus (like value labels, gridlines, map layers) would overly
clutter the display.
F igure 7.18 Excerpt from ‘ECB Bank Test Results’
The example in Figure 7.19, profiles the use of language throughout the history of US Presidents’ State
of the Union addresses, using circle sizes to encode the frequency of different word mentions, giving a
gist of the overall quantities and how patterns have formed over time. By hovering over each circle you
get access to a tooltip dialogue box which reveals annotations such as the exact word-use quantities and
extra contextual commentary.
One issue to be aware of when creating pop-up tooltips is to ensure the place they appear does not risk
obstructing the view of important data in the chart beneath. This can be especially intricate to handle
when you have a lot of annotated detail to share. One tactic is to utilise otherwise-empty space on your
page display, occupying it with temporary annotated captions only when triggered by a select or hover
event from within a chart.
O rientating: A different type of interactive annotation comes in the form of orientation devices,
helping you to make better sense of your location within a display – where you are or what values you
are looking at. Some of these functions naturally supplement features listed in the previous section
about ‘data adjustment’ specifically for navigation support.
293
F igure 7.19 Excerpt from ‘History Through the President’s Words’
This snapshot, again from the ‘How Americans Die’ project (Figure 7.20), dynamically reveals the
values of every mark (both x and y values) in this line chart depending on the hover position of the
cursor. This effect is reinforced by visual guides extending out to the axes from the current position.
F igure 7.20 Excerpt from ‘How Americans Die’
294
F igure 7.21 Twitter NYC: A Multilingual Social City
Figure 7.21 displays the language of tweets posted over a period of time from the New York City area.
Given the density and number of data points, displaying the details of the mapping layer would be quite
cluttered, yet this detail would provide useful assistance for judging the location of the data patterns.
The effective solution employed lets you access both views by providing an adjustable slider that allows
you to modify the transparency of the network of roads to reveal the apparatus of the mapping layer.
F igure 7.22 Killing the Colorado: Explore the Robot River
295
Finally, as mentioned in the previous section, navigating through digital visualisation projects
increasingly uses a vertical landscape to unfold a story (some term this ‘scrollytelling’). Navigation is
often seamlessly achieved by using the scroll wheel to move up and down through the display. To assist
with orientation, especially when you have a limited field of view of a spatial display, a thumbnail image
might be used to show your current location within the overall journey to give a sense of progress. The
project featured in Figure 7.22 is a great example of the value of this kind of interface, providing a deep
exploration of some of the issues impacting on the Colorado River.
2.3 Influencing Factors and Considerations
You now have a good sense of the possibilities for incorporating interactive features into your work, so let’s
turn to consider the factors that will have most influence on which of these techniques you might need to or
choose to apply.
Formulating Your Brief
S k ills and res o urces : Interactivity is unquestionably something that many people aspire to create in
their visualisation work, but it is something greatly influenced by the skills possessed, the technology
you have access to and what they offer. These will be the factors that ultimately shape your ambitions.
Remember, even in common desktop tools like Excel and Powerpoint, which may appear more limited
on this front, there are ways to incorporate interactive controls (e.g. using VBA in Excel) to offer various
adjustment features (e.g. links within Powerpoint slides to create sequences and navigate to other parts
of a document).
T im es cales : It goes without saying that if you have a limited timeframe in which to complete your
work, even with extensive technical skills you are going to be rather pushed in undertaking any
particularly ambitious interactive solutions. Just because you want to does not mean that you will be
296
able to.
S etting: Does the setting in which the visualisation solution will be consumed lend itself to the
inclusion of an interactive element to the experience? Will your audience have the time and know-how
to take full advantage of multi-interactive features or is it better to look to provide a relatively simpler,
singular and more immediate static solution?
F o rm at: What will be the intended output format that this project needs to be created for? What
device specifications will it need to work across? How adaptable will it need to be?
The range and varied characteristics of modern devices present visualisers (or perhaps more appropriately,
at this stage, developers) with real challenges. Getting a visualisation to work consistently, flexibly and
portably across device types, browsers and screen dimensions (smartphone, tablet, desktop) can be
something of a nightmare. Responsive design is concerned with integrating automatic or manually
triggered modifications to the arrangement of contents within the display and also the type and extent
of interactive features that are on offer. Your aim is to preserve as much continuity in the core experience
as possible but also ensure that the same process and outcome of understanding can be offered to your
viewers.
While the general trend across web design practice is heading towards a mobile-first approach, for webbased data visualisation developments there is still a strong focus on maximising the capabilities of the
desktop experience and then maybe compromising, in some way, the richness of the mobile experience.
For ProPublica’s work on ‘Losing Ground’ (Figure 7.23), the approach to cross-platform compatibility
was based around the rule of thumb ‘smallify or simplify’. Features that worked on ProPublica’s
primary platform of the desktop would have to be either simplified to function practically on the
smartphone or simply reduced in size. You will see in the pair of contrasting images how the map
display is both shrunk and cropped, and the introductory text is stripped back to only include the most
essential information.
F igure 7.23 Losing Ground
Other format considerations include whether your solution will be primarily intended for the Web, but
will it also need to work in print? The proverb ‘horses for courses’ comes to mind here: solutions need
to be created as fit for the format it will be consumed in. The design features that make up an effective
interactive project will unlikely translate directly as a static, print version. You might need to pursue two
parallel solutions to suit the respective characteristics of each output format.
Another illustration of good practice from the ‘History through the Presidents’ words’ (Figure 7.24)
297
includes a novel ‘Download graphic’ function which, when selected, opens up an entirely different static
graphic designed to suit a printable, pdf format.
F igure 7.24 Excerpt from ‘History Through the President’s Words’
298
P urpo s e m ap: Interactivity does not only come into your thinking when you are seeking to create
‘Exploratory’ experiences. You may also employ interactive features for creating ‘Explanatory’
visualisations, such as portraying analysis across discrete sequenced views or interactively enabling focus
299
filters to emphasise certain characteristics of the data. The general position defined on the purpose map
will not singularly define the need for interactivity, rather it will inform the type of interactivity you
may seek to incorporate to create the experience you desire.
There will also often be scope for an integrated approach whereby you might lead with an explanatory
experience based around showing headline insights and then transitions into a more exploratory
experience through offering a set of functions to let users interrogate data in more detail.
Working With Data
D ata ex am inatio n: As profiled with the functions to facilitate drill-down navigation, one of the
keen benefits of interactivity is when you have data that is too big and too broad to show in one view.
To repeat, you can only show so much in a single-screen display. Often you will need to slice up views
across and within the various hierarchies of your data.
One particular way the physical properties of the data will inform your interaction design choices is with
animation. To justify an animated display over time, you will need to consider the nature of the change
that exists in your data. If your data is not changing much, an animated sequence may simply not prove
to be of value. Conversely, if values are rapidly changing in all dimensions, an animated experience will
prove chaotic and a form of change blindness will occur. It may be that the intention is indeed to
exhibit this chaos, but the value of animated sequences is primarily to help reveal progressive or
systematic change rather than random variation.
The speed of an animation is also a delicate matter to judge as you seek to avoid the phenomenon of
change blindness. Rapid sequences will cause the stimulus of change to be missed; a tedious pace will
dampen the stimulus of change and key observations may be lost. The overall duration will, of course,
be informed by the range of values in your temporal data variable. There is no right or wrong here, it is
something that you will get the best sense of by prototyping and trialling different speeds.
Establishing Your Editorial Thinking
Angle, fram ing and fo cus : If you have multiple different angles of analysis you wish to portray
then these will have to be accommodated within the space allocated. Alternatively, using interactivity,
you could provide access to them via sequenced views or menus enabling their selection. The value of
incorporating the potential features to achieve this – and the specific range of different options you do
wish to facilitate – will be informed by the scope of the decisions you made in the editorial thinking
stages.
Thinking again about animations, you must consider whether an animated sequence will ultimately
convey the clearest answer to an angle of interest about how something has changed over time. This
really depends on what it is you want to show: the dynamics of a ‘system’ that changes over time or a
comparison between different states over time?
The animated project in Figure 7.25 shows the progressive clearing of snow across the streets of New
York City during the blizzard of February 2014. The steady and connected fluidity of progress of the
snow-clearing is ideally illustrated through the intervals of change across the 24 hours shown.
F igure 7.25 Plow: Streets Cleared of Snow in New York City
300
Sometimes, you might wish to compare one moment directly against another. With animated
sequences, there is a reliance on memory to conduct this comparison of change. However, our ability to
recall is fleeting at best and weakens the further apart (in time) the basis of the comparison has occurred.
Therefore, to facilitate such a comparison you ideally need to juxtapose individual frames within the
same view. The most common technique used to achieve this is through small multiples, where you
repeat the same representation for each moment in time of interest and present them collectively in the
same view, often through a grid layout. This enables far more incisive comparisons, as you can see
through ‘The Horse in Motion’ work by Eadward Muyrbidge, which was used to learn about the
galloping form of a horse by seeing each stage of the motion through individually framed moments.
‘Generations of masterpieces portray the legs of galloping horses incorrectly. Before stop-gap photography, the
complex interaction of horses’ legs simply happened too fast to be accurately apprehended … but in
order to see the complex interaction of moving parts, you need the motion.’ [Paraphrasing] Barbara
Tversky and Ju lie Bau er M orrison, taken from Anima tion: C a n it Fa cilita te?
F igure 7.26 The Horse in Motion
301
Data Representation
C hart ty pe cho ice: Some charts are inherently visually complex and ideally need interactivity to
make them more accessible and readable for the viewer. The bump chart, chord diagram, and Sankey
diagram are just a few of the charts that are far more readable and, by extension, usable if they can offer
users the means to filter or focus on certain selected components of the display through interactivity.
Trustworthy Design
F unctio nal perfo rm ance: Faith in the reliability, consistency and general performance of a
visualisation is something that impacts on the perception of a project as ‘trustworthy’. Does it do what
it promises and can I trust the functions that it performs? Projects that involve the collection of userinputted data will carry extra risk around trust: how will the data be used and stored? You need to
alleviate any such concerns upfront.
‘Confusing widgets, complex dialog boxes, hidden operations, incomprehensible displays, or slow response
times … may curtail thorough deliberation and introduce errors.’ Jeff Heer and Ben Schneid erman,
taken from Intera ctive Dyna mics for Visua l Ana lysis
Accessible Design
U s eful: Does it add value? Resort to interactivity only when you have exhausted the possibility of an
appropriate and effective static solution. Do not underestimate how effective a well-conceived and
executed static presentation of data can be. This is not about holding a draconian view about any greater
merits offered by static or print work, but instead recognising that the brilliance of interactivity is when
302
it introduces new means of engaging with data that simply could not be achieved in any other way.
U no b trus iv e: As with all decisions, an interactive project needs to strive for the optimum ease of
usability: minimise the friction between the act of engaging with interactive features and the
understanding they facilitate. Do not create unnecessary obstacles that stifle sparks of curiosity and the
scent of intrigue that stirs within the user. The main watchword here is affordance, making interactive
features seamless and either intuitive or at least efficiently understandable.
V is ual acces s ib ility : To heighten the accessibility levels of your work you may offer different
presentations of it. For people with visual impairments you might offer options to magnify the view of
your data and all accompanying text. For those with colour deficiencies, as you will learn about shortly,
you could offer options to apply alternative, colour-blind friendly palettes. A further example of this is
seen with satellite navigation devices whereby the displayed colour combinations change to better suit
the surrounding lightness or darkness at a given time of day.
Elegant Design
F eature creep: The discipline required to avoid feature creep is indisputable. The gratuitous
interactive operation of today is the equivalent of the flashy, overbearing web design trends of the late
1990s and early 2000s. People were so quick and so keen to show how competent and expressive they
could be through this (relatively) new technology that they forgot to judge if it added value.
If your audience is quite broad you may be (appropriately) inclined to cover more combinations of
features than are necessary in the hope of responding to as many of the anticipated enquiries as well as
possible and serving the different types of viewer. Judging the degree of flexibility is something of a
balancing act within a single project: you do not want to overwhelm the user with more adjustments
than they need, nor do you want to narrow the scope of their likely interrogations. For a one-off project
you have to form your own best judgement; for repeatedly used projects you might have scope to
accommodate feedback and iteration.
M inim is e the click s : With visualisation you are aiming to make the invisible (insights) visible.
Conversely, to achieve elegance in design you should be seeking to make visible design features as
seamlessly inconspicuous as possible. As Edward Tufte stated, ‘the best design is invisible; the viewer
should not see your design. They should only see your content’.
F un: A final alternative influence is to allow yourself room for at least a little bit of fun. So long as the
choices do not gratuitously interrupt the primary objective of facilitating understanding, one should not
downplay the heightened pleasure that can be generated by interactive features that might incorporate an
essence of playability.
Summary: Interactivity
D ata adjus tm ents affect what data is displayed and may include the following features:
Framing: isolate, include or exclude data.
Navigating: expand or explore greater levels of detail in the displayed data.
Animating: portray temporal data via animated sequences.
Sequencing: navigate through discrete sequences of different angles of analysis.
Contributing: customising experiences through user-inputted data.
P res entatio n adjus tm ents affect how the data is displayed and may include the following features:
303
Focusing: control what data is visually emphasised.
Annotating: interact with marks to bring up more detail.
Orientating: make better sense of your location within a display.
Influencing Factors and Considerations
Formulating the brief: skills and resources, timescales, setting, and format will all influence the scope of
interactivity. What experience are you facilitating and how might interactive options help achieve this?
Working with data: what range of data do you wish to include? Large datasets with diverse values may
need interactive features to help users filter views and interrogate the contents.
Establishing your editorial thinking: choices made about your chosen angle, as well as definitions for
framing and focus will all influence interactive choices, especially if users must navigate to view multiple
angles of analysis or representations portrayed through animated sequences.
Data representation: certain chart choices may require interactivity to enable readability.
Trustworthy design: functional performance and reliability will substantiate the perception of trust from
your users.
Accessible design: any interactive feature should prove to be useful and unobtrusive. Interactivity can also
assist with challenges around visual accessibility.
Elegant design: beware of feature creep, minimise the clicks, but embrace the pleasure of playability.
Tips and Tactics
Initial sketching of concepts will be worth doing first before investing too much time jumping into
prototype mode.
Project management is critical when considering the impact of development of an interactive solution.
Backups, contingencies, version control.
Do not be precious about – nor overly impressed with – ‘cool’-sounding interaction features that will
disproportionately divert precious resources (time, effort, people).
Beware of feature creep: keep focusing on what is important and relevant. A technical achievement is
great for you, but is it great for the project?
Version control and file management will be important here.
304
3 Annotation
Annotation is the third layer of the visualisation design anatomy and is concerned with the simple need to
explain things: what is the right amount and type of help your viewers will need when consuming the
visualisation?
Annotation is unquestionably the most often neglected layer of the visualisation anatomy. Maybe this is
because it involves the least amount of pure design thinking relative to the other matters requiring attention,
like interactivity and colour. More likely, it is because effective annotation requires visualisers truly to
understand their intended audience. This can be a hard frame of mind to adopt, especially when your potential
viewers are likely to have a diverse knowledge, range of interests and capability.
In contrast to the greater theoretical and technical concerns around data representation, colour and interactivity,
I find thinking about annotation relatively refreshing. It is not only uncomplicated and based on a huge dose
of common sense, but also hugely influential, especially in directly facilitating understanding.
Annotation choices often conform to the Goldilocks principle: too much and the display becomes cluttered,
overwhelming, and potentially unnecessarily patronising; too little and the viewers may be inappropriately
faced with the prospect of having to find their own way around a visualisation and form their own
understanding about what it is showing.
Later in this chapter we will look at the factors that will influence your decision making but to begin with here
is a profile of some of the key features of annotated design that exist across two main groups:
Project annotations: helping viewers understand what the project is about and how to use it.
Chart annotations: helping viewers perceive the charts and optimise their potential interpretations.
3.1 Features of Annotation: Project Annotation
This collection of annotation options is related to decisions about how much and what type of help you might
need to offer your audiences in their understanding of the background, function and purpose of your project.
H eadings : The titles and subtitles occupy such prime real estate within your project’s layout, yet
more often than not visualisers fail to exploit these to best effect. There are no universal practices for
what a heading should do or say; this will vary considerably between subject areas and industries, but
should prove fundamentally useful.
F igure 8.1 A Sample of Project Titles
305
The primary aim of a title (and often subtitle combination) is to inform viewers about the immediate
topic or display, giving them a fair idea about what they are about to see. You might choose to articulate
the essence of the curiosity that has driven the project by framing it around a question or maybe a key
finding you unearthed following the work.
Subheadings, section headings and chart titles will tend to be more functional in their role, making
clear to the viewer the contents or focus of attention associated with each component of the display.
Your judgement surrounds the level of detail and the type of language you use in each case to fit
cohesively with the overall tone of the work.
Intro ductio ns : Essentially working in conjunction with titles, introductions typically exist as short
paragraphs that explain, more explicitly than a title can, what the project is about. The content of this
introduction might usefully explain in clear language terms some of the components you considered
during the editorial thinking activity, such as:
details of the reason for the project (source curiosity);
an explanation of the relevance of this analysis;
a description of the analysis (angle, framing) that is presented;
expression of the main message or finding that the work is about to reveal (possibly focus).
Some introductions will extend beyond a basic description of the project to include thorough details of where
the data comes from and how it has been prepared and treated in advance of its analysis (including any
assumptions, modifications or potential shortcomings). There may also be further links to ‘read more’ detail
or related articles about the subject.
F igure 8.2 Excerpt from ‘The Color of Debt’
306
Introductions may be presented as fixed text located near the top (or start) of a project (usually
underneath a title) as in Figure 8.2 or, through interactivity, may be hidden from view and brought up
in a separate window or pop-up to provide the details upon request.
U s er guides : As you have seen, some projects can incorporate many different features of interactivity.
While they may not necessarily be overly technical – and therefore not that hard to learn how to use
them – the full repertoire of features may be worth walking through, as in Figure 8.3. This is important
to consider so that, as a visualiser, you can be sure your users are acquainted with the entire array of
options they have to explore, interrogate and control their experience. You should want people to fully
utilise all the different features you have carefully curated and created, so it is in everyone’s interest to
think about including these types of user guides.
F igure 8.3 Excerpt from ‘Kindred Britain’
307
308
M ultim edia: There is increasing potential and usage of broader media assets in visualisation design
work beyond charts, such as video and imagery. In visualisation this is perhaps a relatively contemporary
trend (infographics have incorporated such media but visualisations generally have done so far less) and,
in some ways, reflects the ongoing blurring of boundaries between this and other related fields.
Incorporating good-quality and sympathetically styled assets like illustrations or photo-imagery can be a
valuable complementary device alongside your data representation elements.
In the ‘Color of Debt’ (Figure 8.4) project, different neighbourhoods of Chicago that have been hardest
hit by debt are profiled using accompanying imagery to show more graphic context of the communities
affected, including a detailed reference map of the area and an animated panel displaying a sequence of
street view images.
Imagery, in particular, will be an interesting option to consider when it adds value to help exhibit the
subject matter in tangible form, offering an appealing visual hook to draw people in or simply to aid
immediate recognition of the topic. In Bloomberg’s billionaires project (Figure 8.5), each billionaire is
represented by a pen-and-ink caricature. This is elegant in choice and also dodges the likely flaws of
having to compose the work around individual headshot photographs that would have been hard to
frame and colour consistently.
F igure 8.4 Excerpt from ‘The Color of Debt’
It was worth Bloomberg investing in the time/cost involved in commissioning these illustrations, given
that the project was not a one-off but something that would be an ongoing, updated daily resource.
Problems with the integration of such media within a visualisation project will occur when unsuitable
attempts are made to combine imagery within the framework of a chart. Often the lack of cohesion
creates a significant hindrance whereby the data representations are obscured or generally made harder to
read, as the inherent form and colour clashes undermine the functional harmony.
Researching, curating, capturing or creating assets of imagery requires skill and a professional approach,
otherwise the resulting effect will look amateurish. Incorporating these media into a data visualisation is
not about quickly conducting some Google Image fishing exercise. Determining what imagery you will
be able to use involves careful considerations around image suitability, quality and, critically, usage
rights. Beware the client or colleague who thinks otherwise.
‘Although all our projects are very much data driven, visualisation is only part of the products and solutions
309
we create. This day and age provides us with amazing opportunities to combine video, animation,
visualisation, sound and interactivity. Why not make full use of this? … Judging whether to include
something or not is all about editing: asking “is it really necessary?”. There is always an aspect of “gut feel”
or “instinct” mixed with continuous doubt that drives me in these cases.’ Thomas C lever, C o-fou nd er
C LEVER °FR ANKE, a d ata d riven exp eriences stu d io
A frequent simple example of incorporated imagery is when you have to include logos according to the needs
of the organisation for whom your work is being created. Remember to consider this early so you at least
know in advance that you will have to assign some space to accommodate this component elegantly.
F o o tno tes : Often the final visible feature of your display, footnotes provide a convenient place to
share important details that further substantiate the explanation of your work. Sometimes this
information might be stored within the introduction component (especially if that is interactively
hidden/revealed to allow it more room to accommodate detail):
Data sources should be provided, ideally in close proximity to the relevant charts.
Credits will list the authors and main contributors of the work, often including the provision of
contact details.
F igure 8.5 Excerpt from ‘Bloomberg Billionaires’
Attribution is also important if you wish to recognise the influence of other people’s work in
shaping your ideas or to acknowledge the benefits of using an open source application or free
typeface, for example.
Usage information might explain the circumstances in which the work can be viewed or reused,
whether there are any confidentialities or copyrights involved.
Time/date stamps are often forgotten but they will give an indication to viewers of the moment
of production and from that they might be able to ascertain the work’s current accuracy and
contextualise their interpretations accordingly.
F igure 8.6 Excerpt from ‘Gender Pay Gap US’
310
3.2 Features of Annotation: Chart Annotation
This second group of annotated features concerns the ways you provide viewers with specific assistance for
perceiving and interpreting the charts. Think of these as being the features that refer directly to your charts or
exist directly within or in immediate proximity to each chart.
R eading guides : These are written or visual instructions that provide viewers with a guide for how
to read the chart or graphic and offer greater detailed assistance than a legend (see later). The idea of
learnability in visualisation is an important consideration. It is a two-way commitment requiring will
and effort from the viewer and sufficient assistance from the visualiser. This is something to be discussed
in Chapter 11 under ‘Visualisation literacy’.
Recognising that their readership may not necessarily understand connected scatter plots, Bloomberg’s
visual data team offer a ‘How to Read this Graphic’ guide immediately as you land on the project
shown in Figure 8.7. This can be closed but a permanent ‘How to’ button remains for those who may
need to refer to it again. The connected scatter plot was the right choice for this angle of analysis, so
rather than use a different ‘safer’ representation approach (and therefore alter what analysis was shown) it
is to their credit that they respected the capacity of their viewers to be willing to learn how to read this
unfamiliar graphical form.
F igure 8.7 Excerpt from ‘Holdouts Find Cheapest Super Bowl Tickets Late in the Game’
311
F igure 8.8 Excerpt from ‘The Life Cycle of Ideas’
The second example shown (Figure 8.8) is from the ‘How to Read’ guide taken from the ‘Life Cycle of
Ideas’ graphic created by Accurate, a studio renowned for innovative and expressive visualisation work.
Given the relative complexity of the encodings used in this piece, it is necessary to equip the viewer with
as much guidance as possible to ensure its potential is fully realised.
C hart apparatus : Options for chart apparatus relate to the structural components found in
different chart types. Every visualisation displayed in this book has different elements of chart apparatus
(Figure 8.9), specifically visible axis lines, tick marks or gridlines to help viewers orient their judgements
of size and position. There is no right or wrong for including or excluding these features, it tends to be
informed by your tonal definitions based on how much precision in the perceiving of values you wish to
facilitate. I will discuss the range of different structures underlying each chart type (such as Cartesian,
Radial or Spatial) in Chapter 10 on composition, as these have more to do with issues of shape and
dimension.
‘Labelling is the black magic of data visualization.’ Greg or Aisch, Grap hics Ed itor, The New York
T imes
L ab els : There are three main labelling devices you will need to think about using within your chart:
axis titles, axis labels and value labels:
Axis titles describe what values are being referenced by each axis. This might be a single word or a
312
short sentence depending on what best fits the needs of your viewers. Often the role of an axis is
already explained (or implied) by project annotations elsewhere, such as titles or sub-headings,
but do not always assume this will be instantly clear to your viewers.
Axis labels provide value references along each axis to help identify the categorical value or the
date/quantitative value associated with that scale position. For categorical axes (as seen in bar
charts and heat maps, for example) one of the main judgments relates to the orientation of the
label: you will need to find sufficient room to fit the label but also preserve its readability. For
non-categorical data the main judgement will be what scale intervals to use. This has to be a
combination of what is most useful for referencing values by your viewer, what is the most
relevant interval based on the nature of the data (e.g. maybe a year-level label is more relevant than
marking each month), and also what feels like it achieves the best-looking visual rhythm along
the chart’s edge. This will be another matter that is discussed more in the composition chapter.
F igure 8.9 Mizzou’s Racial Gap Is Typical On College Campuses
313
Value labels will appear in proximity to specific mark encodings inside the chart. Typically, these
labels will be used to reveal a quantity, such as showing the percentage sizes of the sectors in a pie
chart or the height of bars. Judging whether to include such annotations will refer back to your
definition of the appropriate tone: will viewers need to read off exact values or will their perceived
estimates of size and/or relationship be sufficient? The need to include categorical labels will be a
concern for maps (whether to label locations?) or charts like the scatter plot seen in Figure 8.9,
where you may wish to draw focus to a select sample of the categories plotted across the display.
As you have seen, one way of providing detailed value labels is through interaction, maybe
offering a pop-up/tooltip annotation that is triggered by a hover or click event on different mark
encodings. Having the option for interactivity here is especially useful as it enables you to reduce
clutter from your display that can develop as more annotated detail is added.
Redundancy in labelling occurs when you include value labelling of quantities for all marks whilst also
314
including axis-scale labelling. You are effectively unnecessarily doubling the assistance being offered and so,
ideally, you should choose to include one or the other.
L egend: A legend is an annotated feature within or alongside your chart that presents one or several
keys to help viewers understand the categorical or quantitative meaning of different attributes.
F igure 8.10 Excerpt from ‘The Infographic History of the World’
For quantitative data the main role for a legend will be if the attribute of area size has been used to
encode values, as found on the bubble plot chart type. The keys displayed there will provide a reference
for the different size scales. Which selection of sizes to show needs careful thought: what is the most
useful guide to help your viewers make their perceptual judgements from a chart? This might not entail
showing only even interval sizes (50, 100, 150 etc.); rather, you might offer viewers a indicative spread
of sizes to best represent the distribution of your data values. The example in Figure 8.10 shows logical
interval sizes to reflect the range of values in the data and also helpfully includes reference to the
maximum value size to explain that no shape will be any larger than this. For categorical data you also
see a key showing the meaning of different colours and shapes and their associated values.
F igure 8.11 Twitter NYC: A Multilingual Social City
315
A nice approach to getting more out of your legends is shown in Figure 8.11. Here you will see a key
explaining the colour associations combined with a bar chart to display the distribution of quantities for
each language grouping from this analysis of tweets posted around New York City.
C aptio ns : These exist typically as small passages of written analysis that bring to the surface some of
the main insights and conclusions from the work. These might be presented close to related values
inside the chart or in separate panels to provide commentary outside the chart.
In ‘Gun Deaths’ (Figure 8.12), there is a nice solution that combines annotated captions with interactive
data adjustments. Below the main chart there is a ‘What This Data Reveals’ section which some of the
main findings from the analysis of the gun death data. The captions double up as clickable shortcuts so
that you can quickly apply the relevant framing filters and update the main display to see what the
captions are referring to.
F igure 8.12 Excerpt from ‘US Gun Deaths’
As creative tools become more ubiquitous the possibility for incorporating non-visual data in you work
increases. As an alternative to the written caption there is greater scope to consider using audio as a
means of verbally narrating a subject and explaining key messages. Over the past few years one of the
standout projects using this feature was the video profiling ‘Wealth Inequality in America’ (Figure 8.13),
316
as introduced in Chapter 3, where the voiceover provides a very compelling and cohesive narrative
against the backdrop of the animated visuals that present the data being described.
F igure 8.13 Image taken from ‘Wealth Inequality in America’
3.3 Typography
As you have seen, many features of annotation utilise text. This means your choices will be concerned not just
with what text to include, but also with how it will look. This naturally merits a brief discussion about how
typography will have a significant role in the presentation of your work.
Firstly, some clarity about language. A typeface is a designed collection of glyphs representing individual
letters, numbers and other symbols of language based on a cohesive style. A font is the variation across several
physical dimensions of the typeface, such as weight, size, condensation and italicisation. A typeface can have
one or many different fonts in its family. Type effectively represents the collective appearance formed by the
choice of typeface and the font.
Tahoma and Century Gothic are different typefaces. This font and this fo nt both belong to the Georgia
typeface family but display variations in size, weight and italicisation.
I discussed earlier the distinction between definitions of data visualisation and other related fields. I
mentioned how the person creating their design is not necessarily conscious or concerned about what label is
attached to their work, they are simply doing their work regardless. The same could be applied to people’s
interchangeable use of and meaning of the terms typeface and font, the clarity of which has been irreparably
confused by Microsoft’s desktop tools in particular.
317
Serif typefaces add an extra little flourish in the form of a small line at the end of the stroke in a letter or
symbol. Garamond is an example of a serif font. Serif typefaces are generally considered to be easier to read for
long sequences of text (such as the full body text) and are especially used in print displays.
Sans-serif typefaces have no extra line extending the stroke for each character. Verdana is an example of a sansserif typeface. These typefaces are commonly used for shorter sections of text, such as axis or value labels or
titles, and for screen displays.
In making choices about which type to use, there are echoes with the thinking you are about to face on using
colour. As you will see, colour decisions concern legibility and meaning first, decoration last. With typeface
choices you are not dressing up your text, you are optimising its readability and meaning across your display.
The desired style of typeface only comes into your thinking after legibility and meaning.
In terms of legibility, you need to choose a typeface and font combination that will be suitable for the role of
each element of text you are using. Viewers need to be able to read the words and numbers on display without
difficulty. Quite obvious, really. Some typefaces (and specifically fonts) are more easily read than others. Some
work better to make numbers as clearly readable as possible, others work better for words. There are plenty of
typefaces that might look cool and contemporary but if they make text indecipherable then that is plain
wrong.
Typeface decisions will often be taken out of your hands by the visual identity guidelines of organisations
and publications, as well as by technical reasons relating to browser type, software compatibility and
availability.
Just as variation in colour implies meaning, so does variation in typeface and font. If you make some text
capitalised, large and bold-weight this will suggest it carries greater significance and portrays a higher
prominence across the object hierarchy than any text presented in lower case, with a smaller size and thinner
weight. So you should seek to limit the variation in font where possible.
Text-based annotations should be considered part of the supporting cast and the way you consider typeface and
font choices should reflect this role. Typography in visualisation should be seen but really not heard. Deciding
on the most suitable type is something that can ultimately come down to experience and influence through
exposure to other work. Every individual has their own relied-upon preferences. In practice, I find there is a
good chunk of trial and error as well as viewer testing that goes into resolving the final selection. Across the
spectrum of data visualisation work being produced there are no significant trends to be informed by largely
because judging the most suitable typography choices will be unique to the circumstances influencing each
project.
Typography is just another of the many individual ingredients relevant to data visualisation that exists as a
significant subject in its own right. It is somewhat inadequate to allocate barely two pages of this book to
discussing its role in visualisation, but these will at least offer you a bite-sized window into the topic.
‘Never choose Times New Roman or Arial, as those fonts are favored only by the apathetic and sloppy. Not
by typographers. Not by you.’ M atthew Bu tterick, Typ og rap her, Lawyer and W riter
3.4 Influencing Factors and Considerations
318
Having become familiar with the principal options for annotating, you now have to decide which features to
incorporate into your work and how you might deploy these.
Formulating Your Brief
‘Think of the reader – a specific reader, like a friend who’s curious but a novice to the subject and to dataviz – when designing the graphic. That helps. And I rely pretty heavily on that introductory text that runs
with each graphic – about 100 words, usually, that should give the new-to-the-subject reader enough
background to understand why this graphic is worth engaging with, and sets them up to understand and
contextualize the takeaway. And annotate the graphic itself. If there’s a particular point you want the reader
to understand, make it! Explicitly! I often run a few captions typeset right on the viz, with lines that connect
them to key elements in the design.’ Katie Peek, Data Visu alisation Desig ner and Science
Jou rnalist, on making comp lex and /or comp licated su bject matter accessible and
interesting to her au d ience
Audience: Given that most annotations serve the purpose of viewer assistance, your approach will
inevitably be influenced by the characteristics of your intended audience. Having an appreciation of and
empathy towards the knowledge and capabilities of the different cohorts of viewers is especially
important with this layer of design. How much help will they need to understand the project and also
the data being portrayed? You will need to consider the following:
Subject: how well acquainted will they be with this subject matter? Will they understand the
terminology, acronyms, abbreviations? Will they recognise the relevance of this particular angle of
analysis about this subject?
Interactive functions: how sophisticated are they likely to be in terms of being able to
understand and utilise the different features of interactivity made possible through your design?
Perceiving: how well equipped are they to work with this visualisation? Is it likely that the chart
type(s) will be familiar or unfamiliar; if the latter, will they need support to guide them through
the process of perceiving?
Interpreting: will they have the knowledge required to form legitimate interpretations of this
work? Will they know how to understand what is good or bad, what big and small mean, what is
important, or not? Alternatively, will you need to provide some level of assistance to address this
potential gap?
P urpo s e m ap: The defined intentions for the tone and experience of your work will influence the
type and extent of annotation features required.
If you are working towards a solution that leans more towards the ‘reading’ tone you are placing an
emphasis on the perceptibility of the data values. It therefore makes sense that you should aim to
provide as much assistance as possible (especially through extensive chart annotations) to maximise the
efficiency and precision of thisprocess.
If it is more about a ‘feeling’ tone then you may be able to justify the absence of the same annotations.
Your intent may be to provide more of a general sense – a ‘gist’ – of the order of magnitude of values.
If you are seeking to provide an ‘explanatory’ experience it would be logical to employ as many devices
as possible that will help inform your viewers about how to read the charts (assisting with the
‘perceiving’ stage of understanding) and also bring some of the key insights to the surface, making clear
the meaning of the quantities and relationships displayed (thus assisting with the stage of ‘interpreting’).
The use of captions and visual overlays will be particularly helpful in achieving this, as will the potential
for audio accompaniments if you are seeking to push the explanatory experience a step further.
319
‘Exploratory’ experiences are less likely to include layers of insight assistance, instead the focus will be
more towards project-level annotation, ensuring that viewers (and particularly here, users) have as much
understanding as possible about how to use the project for their exploratory benefit. You might find,
however, that devices like ‘How to read this graphic’ are still relevant irrespective of the definition of
your intended experience.
Characteristically, ‘exhibitory’ work demonstrates far less annotated assistance because, by intention, it is
more about providing a visual display of the data rather than offering an explanatory presentation or the
means for exploratory interrogation. The assumptions here are that audiences will have sufficient
domain and project knowledge not to require extensive additional assistance. Common chart
annotations like value labels and legends, and project annotations like titles and introductions, are still
likely to be necessary, but these might reflect the extent required.
Establishing Your Editorial Thinking
F o cus : During your editorial thinking you considered focus and its particular role in supporting
explanatory thinking. Are there specific value labels that you wish to display over others? Rather than
labelling all values, for example, have you determined that only certain marks and attributes will merit
labelling? As you saw earlier in the example scatter plot about the under-representation of black students
in US colleges, only certain points were labelled, not all. These would have been judged to have been the
most relevant and interesting elements to emphasise through annotation.
Trustworthy Design
T rans parency : Annotation is one of the most important aids to ensure that you secure and sustain
trust from your viewers by demonstrating integrity and openness:
Explain what the project is and is not going to show.
Detail where the data came from and what framing criteria were used during the process of
acquisition, and also make what has been ultimately included in the chart(s).
Outline any data transformation treatments, assumptions and calculations. Are there any
limitations that viewers need to be aware of?
Highlight and contextualise any findings to ensure accuracy in interpretation.
With digital projects in particular, provide access to coding repositories to lay open all routines
and programmatic solutions.
Accessible Design
U nders tandab le: If you recall, in the section profiling circumstances you considered what the
characteristics were of the setting or situation in which your audience might consume your visualisation.
Well-judged project and chart annotations are entirely concerned with providing a sufficient level of
assistance to achieve understanding. The key word there is ‘sufficient’ because there is a balance: too
much assistance makes the annotations included feel overburdening; too little and there is far more
room for wrong assumptions and misconceptions to prosper. A setting that is consistent with the need
to deliver immediate insights will need suitable annotations to fulfil this. There will be no time or
patience for long introductions or explanations in that setting. Conversely, a visualisation about a subject
matter that is inherently complex may warrant such assistance.
320
Elegant Design
M inim is e the clutter: A key concern about annotations is judging the merits of including structural
or textual assistance against the potential disruption and obstruction caused by these to the view of the
data. Any annotation device added to your display has a spatial and visual consequence that needs to be
accommodated. Of course, as mentioned, with the benefit of interactivity it is possible to show and
hide layers of detail. Overall, you will have to find the most elegant solution for presenting your
annotationsto ensure you do not inadvertently undermine the help you are trying to provide.
Summary: Annotation
P ro ject anno tatio ns help viewers understand what the project is about and how to use it, and may include
the following features:
Headings: titles, sub-titles and section headings.
Introductions: providing background and aims of the project.
User guides: advice or instruction for how to use any interactive features.
Multimedia: the potential to enhance your project using appropriate imagery, videos or illustrations.
Footnotes: potentially includes data sources, credits, usage information, and time/date stamps.
C hart anno tatio ns help viewers perceive the charts and optimise their potential interpretations and may
include the following features:
Chart apparatus: axis lines, gridlines, tick marks.
Labels: axis titles, axis labels, value labels.
Legend: providing detailed keys for colour or size associations.
Reading guides: detailed instructions advising readers how to perceive and interpret the chart.
Captions: drawing out key findings and commentaries.
T y po graphy Most of the annotation features you include are based on text and so you will need to consider
carefully the legibility of the typeface you choose and the logic behind the font-size hierarchy you display.
Influencing Factors and Considerations
Formulating the brief: consider the characteristics and needs of the audience. Certain chart choices and
subjects may require more explanation. From the ‘purpose map’ what type of tone and experience are
you trying to create and what role might annotation play?
Establishing your editorial thinking: what things do you want to emphasise or direct the eye towards
(focus)?
Trustworthy design: maximise the information viewers have to ensure all your data work is transparent
and clearly explained.
Accessible design: what is the right amount and type of annotation suitable to the setting and
complexity of your subject?
Elegant design: minimise the clutter.
Tips and Tactics
321
Attention to detail is imperative: all instructions, project information, captions and value labels need to
be accurate. Always spell-check digitally and manually, and ask others to proofread if you are too ‘close’
to see.
Do not forget to check on permission to use any annotated asset, such as imagery, photos, videos,
quotations, etc.
322
4 Colour
Having established which charts you will use, the potential interactive functions that might be required and the
annotation features that will be especially useful, you have effectively determined all the visible elements that
will be included in your project. The final two layers of design concern not what elements will be included or
excluded, but how they will appear. After this chapter you will look at issues on composition, but before that
the rather weighty matter of colour.
As one of the most powerful sensory cues, colour is a highly influential visual property. It is arguably the
design decision that has the most immediate impact on the eye of the viewer. All the design features of your
visualisation display hold some attribute of colour, otherwise they are invisible:
Every mark and item of apparatus in your charts will be coloured; indeed colour in itself may be an
attribute that represents your data values.
Interactive features do not always have an associated visible property (some are indeed invisible and left
as intuitively discoverable). However, those features that involve buttons, menus, navigation tabs and
value sliders will always have a colour.
Annotation properties such as titles, captions and value labels will all be coloured.
Composition design mainly concerns the arrangement of all the above features, though you might use
colour to help achieve a certain design layout. As you will see, emptiness is a useful organising device –
leaving something blank is a colour choice.
Thankfully, there is a route through all of this potential complexity relying on just a little bit of science mixed
in with lots of common sense. By replacing any arbitrary judgements that might have been previously based on
taste, and through increasing the sensitivity of your choices, colour becomes one of the layers of visualisation
design that can be most quickly and significantly improved.
‘Colors are perhaps the visual property that people most often misuse in visualization without being aware of
it.’ R obert Kosara, Senior R esearch Scientist at Tableau Software
The key factor in thinking about colour is to ensure you establish meaning first and decoration last. That is
not to rule out the value of certain decorative benefits of colour, but to advise that these should be your last
concern. Besides, in dealing with meaningful applications of colour you will already have gone a long way
towards establishing the ‘decorative’ qualities of your project’s aesthetic appearance.
This chapter begins with a look at some of the key components of colour science, offering a foundation for
your understanding about this topic. After that you will learn about the ways and places in which colour could
be used. Finally, you will consider the main factors that influence colour decisions.
C O L O U R thinking begins from inside the chart(s), working outwards across the rest of the visualisation
anatomy:
Data legibility.
Editorial salience.
Functional harmony.
323
4.1 Overview of Colour Theory
C O L O U R in visualisation is something of a minefield. As with many of these design layer chapters, an
introduction to colour involves judging the right amount of science and the right amount of practical
application. What does justice to the essence of the subject and gives you the most relevant content to work
with is a delicate balance.
When you lift the lid on the science behind colour you open up a world of brain-ache. When this chapter is
finalised I will have spent a great deal of time agonising over how to explain this subject and what to leave in or
leave out because there is so much going on with colour. And it is tricky. Why? Because you almost come face
to face with philosophical questions like ‘what is white?’ and the sort of mathematical formulae that you really
rather hoped had been left behind at school. You learn how the colours you specify in your designs as X might
be perceived by some people as Y and others as Z. You discover that you are not just selecting colours from a
neat linear palette but rather from a multi-dimensioned colour space occupying a cubic, cylindrical or spherical
conceptual shape, depending on different definitions.
The basis of this topic is the science of optics – the branch of physics concerned with the behaviour and
properties of light – as well as colorimetry – the science and technology used to quantify and describe human
colour perception. Two sciences, lots of maths, loads of variables, endless potential for optical illusions and
impairment: that is why colour is tricky and why you need to begin this stage of thinking with an appreciation
of some colour theory.
The most relevant starting point is to recognise that when dealing with issues of colour in data visualisation
you will almost always be creating work on some kind of computer. Unless you are creating something by
hand using paints or colouring pencils, you will be using software viewed through an electronic display.
This is important because a discussion about colour theory needs to be framed around the RGB (Red, Blue,
Green) colour model. This is used to define the combination of light that forms the colours you see on a
screen, conceptually laid out in a cubic space based on variations across these three attributes.
The output format of your work will vary between screen display and print display. If you are creating
something for print you will have to shift your colour output settings to CMYK (Cyan, Magenta, Yellow and
Black). This is the model used to define the proportions of inks that make up a printed colour. This is known
as a subtractive model, which means that combining all four inks produces black, whereas RGB is additive as
the three screen colours combine to produce white.
When you are creating work to be consumed on the Web through screen displays, you will often program
using HEX (Hexadecimal) codes to specify the mix of red, green and blue light (in the form #RRGGBB using
codes 00 to FF).
While CMYK communicates from your software to a printer, telling it what colours to print as an output, it
does not really offer a logical model to think about the input decisions you will make about colour. Neither,
for that matter, does RGB: it just is not realistic to think in those terms when considering what choices are
needed in a visualisation design. There are different levers to adjust and different effects being sought that
require an alternative model of thinking.
F igure 9.1 HSL Colour Cylinder
324
F igure 9.2 Colour Hue Spectrum
I share the belief with many in the field that the most accessible colour model – in terms of considering the
application of colour in data visualisation – is HSL (Hue, Saturation, Lightness), devised by Albert Munsell in
the 1980s. These three dimensions combine to make up what is known as a cylindrical-coordinate colour
representation of the RGB colour model (I did warn you about the cylinders).
H ue is considered the true colour. With hue there are no shades (adding black), tints (adding whites)
or tones (adding grey) – a consideration of these attributes follows next. When you are describing or
labelling colours you are most commonly referring to their hue: think of the colours of the rainbow
ranging through various mixtures of red, orange, yellow, green, blue, indigo and violet. Hue is
considered a qualitative colour attribute because it is defined by difference and not by scale.
S aturatio n defines the purity or colourfulness of a hue. This does have a scale from intense pure
colour (high saturation) through increasing tones (adding grey) to the no-colour state of grey (low
saturation). In language terms think vivid through to muted.
F igure 9.3 Colour Saturation Spectrum
L ightnes s defines the contrast of a single hue from dark to light. It is not a measure of brightness –
there are other models that define that – rather a scale of light tints (adding white) through to dark
shades (adding black). In language terms I actually think of lightness more as degrees of darkness, but
325
that is just a personal mindset.
F igure 9.4 Colour Lightness Spectrum
Technically speaking, black, white and grey are not considered colours.
I have deliberately described these dimensions separately because, as you will see when looking at the
applications of colour in visualisation, your decisions will often be defined by how you might employ these
distinct dimensions of colour to form your visual display. The main choices tend to fall between employing
difference in hue and variation in lightness, with the different levels of saturation often being a by-product of
the definitions made for the other two dimensions.
Alternative models exist offering variations on a similar theme, such as HSV (Hue, Saturation, Value), HSI
(Hue, Saturation, Intensity), HSB (Hue, Saturation, Brightness) and HCL (Hue, Chroma, Luminance).
These are all primarily representations of the RGB model space but involve differences in the mathematical
translation into/from RGB and offer subtle differences in the meaning of the same terms (local definitions of
hue and saturation vary). The biggest difference relates to their emphasis as a means of specifying either a
colour quality (in an input, created sense) or a colour perception (in how a colour is ultimately experienced).
Pantone is another colour space that you might recognise. It offers a proprietary colour-matching,
identifying and communicating service for print, essentially giving ‘names’ to colours based on the CMYK
process.
The argument against using the HSL model for defining colour is that, while it is fine for colour setting (i.e.
an intuitive way to think about and specify the colours you want to set in your visualisation work), the
resulting colours will not be uniformly perceived the same, from one device to the next. This is because there
are many variables at play in the projection of light to display colour and the light conditions present in the
moment of perception. That means the same perceptual experience will not be guaranteed. It is argued that
more rigorous models (such as CIELAB) offer an absolute (as opposed to a relative) definition of colour for
both input and output. My view is that they are just a little bit too hard to easily translate into visualisation
design thinking. Furthermore, trying to control for all the subtleties of variation in consumption conditions is
an extra burden you should ideally avoid.
At this stage, it is important to be pragmatic about colour as much as possible. The vast majority of your
colour manipulating and perceptual needs should be nicely covered by the HSL model. As and when you
develop a deeper, purist interest in colour you should then seek to learn more about the nuances in the
differences between the definitions of these models and their application.
4.2 Features of Colour: Data Legibility
Data legibility concerns the use of the attribute of colour to encode data values in charts. The objective here is
to make the data being represented by differences in colour as clearly readable and as meaningful as possible.
326
While you have probably already decided by now the chart or charts you intend to use, you still need to take
think carefully – and separately – about how you will specifically employ colour. To do this we first need to
revisit the classification of data types and consider how best to use colour for representing each different type.
Nominal (Qualitative)
With nominal data colour is used to classify different categorical values. The primary motive for the choice of
colour is to create a visible distinction between each unique categorical association, helping the eye to discern
the different categories as efficiently and accurately as possible.
Creating contrast is the main aim of representing nominal data. What you are not seeking to show or even
imply is any sense of an order of magnitude. You want to help differentiate one category from the next – and
make it easily identifiable – but to do so in a way that preserves the sense of equity among the colours
deployed.
F igure 9.5 Excerpt from ‘Executive Pay by the Numbers’
Variation in hue is typically the colour dimension to consider using for differentiating categories. Additionally,
you might explore different tones (variations in saturation across the hues). You should not, though, consider
using variations in the lightness dimension. That is because the result is insufficiently discernible. As you can
see demonstrated in Figure 9.5, the lightness variation of a blue tone makes it quite hard to connect the colour
scale presented in the key at the top with the colours displayed in the stacked bars underneath. With the
shading in the column header and the 2011 grey bar also contributing similar tones to the overall aesthetic of
the table our visual processing system has to work much harder to determine the associations than it should
327
need to do.
Often the categories you will be differentiating with colour will be relatively few in number, maybe two or
three, such as in the separation between political parties or plotting different values for gender, as seen in Figure
9.6.
F igure 9.6 How Nations Fare in PhDs by Sex
F igure 9.7 How Long Will We Live – And How Well?
328
Beyond these small numbers, you still typically might only need to contend with assigning colours to around
four to six categories, perhaps in analysis that needs to visually distinguish values for different continents of the
world, as seen in the scatter plot in Figure 9.7.
As the range of different categories grows, the ability to preserve clear differentiation becomes harder. In
expanding your required palette, the colours used become decreasingly unique. The general rule of thumb is
that once you have more than 12 categories it will not be possible to find a sufficiently different colour to
assign to categories from 13 upwards. Additionally, you are really increasing the demands of learning and
recognition for viewers. This then becomes quite a cognitive burden and delays the process of understanding.
F igure 9.8 Charting the Beatles: Song Structure
329
Two approaches for dealing with this. Firstly, consider offering interactive filters to modify what categories are
displayed in a visualisation – thus potentially reducing the impact of so many being available. Secondly, think
about transforming your data by excluding or combining categories in to a reduced number of aggregate
groupings.
Depending on the subject of your data, sometimes you can look to supplement the use of colour with texture
or pattern to create further visible distinctions. In Figure 9.8 you can see two patterns being used occasionally
as additive properties to show the structure of tracks on The Beatles’ album.
Ordinal (Qualitative)
With ordinal data you are still dealing with categories but now they have a natural hierarchy or ordering that
can be exploited. The primary motive for using colour in this case is not only to create a visible distinction
between each unique category association but also to imply some sense of an order of magnitude through the
colour variation. The colour dimensions used to achieve this tend to employ variations of either the saturation
or the lightness (or a combination of both). You might also introduce different hues when dealing with
diverging (dual-direction) scales rather than simply converging (single-direction) ones.
Figure 9.9 displays a simple example of colour used to display a converging ordinal variable. This is the teacup
that I use in my office. On the inside you can see it has a colour guide to help ascertain how much milk you
might need to add: going through Milky, Classic British, Builder’s Brew, and finally Just Tea (zero milk).
F igure 9.9 Photograph of MyCuppa Mug
330
A typical example of a diverging ordinal scale might be seen in the stacked bar chart showing the results of a
survey question (Figure 9.10). The answers are based on the strength of feeling: strongly agree, agree, neutral,
disagree, strongly disagree. By colouring the agreement in red (‘hot’ sometimes used to represent ‘good’) and
the disagreement in blue (‘cold’ to mean ‘bad’) means a viewer can quickly perceive the general balance of
feelings being expressed.
F igure 9.10 Example of a Stacked Bar Chart Based on Ordinal Data
331
Another example of ordinal data might be to represent the notion of recency. In Figure 9.11 you see a display
plotting the 2013 Yosemite National Park fire. Colour is used to display the recorded day-by-day progress of
the fire’s spread. The colour scale is based on a recency scale with darker = recent, lighter = furthest away (think
faded memory).
F igure 9.11 The Extent of Fire in the Sierra Nevada Range and Yosemite National Park, 2013
332
Interval and Ratio (Quantitative)
With quantitative data (ratio and interval) your motive, as it is with ordinal data, is to demonstrate the
difference between and of a set of values. In the choropleth map in Figure 9.12, showing the variation in
electricity prices across Switzerland, the darker shades of blue indicate the higher values, the lighter tints the
lower prices. This approach makes the viewer’s perception of the map’s values immediate – it is quite intuitive
to recognise the implication of the general patterns of light and dark shades.
F igure 9.12 What are the Current Electricity Prices in Switzerland [Translated]
333
Typically, using colour to represent quantitative data will involve breaking up your data values into discrete
classifications or ‘bins’. This makes the task of reading value ranges from their associated colour shade or tone a
little easier than when using a continuous gradient scale. While our capacity to judge exact variations in colour
is relatively low (even with a colour key for reference), we are very capable of detecting local variations of
colour through differences in tint, shade or tone. Assessing the relative contrast between two colours is
generally how we construct a quantitative hierarchy.
Look at the fascinating local patterns that emerge in the next map (Figure 9.13), comparing increases in the
percentage of people gaining health insurance in the USA (during 2013–14). The data is broken down to
county level detail with a colour scale showing a darker red for the higher percentage increases.
Some of the most relevant colour practices for data visualisation come from the field of cartography (as do
many of the most passionate colour purists). Just consider the amount of quantitative and categorical detail
shown in a reference map that relies on colour to differentiate types of land, indicate the depth of water or
the altitude of high ground, present route features of road and rail networks, etc. The best maps pack an
incredible amount of detail into a single display and yet somehow they never feel disproportionately
overwhelming.
F igure 9.13 Excerpt from ‘Obama’s Health Law: Who Was Helped Most’
334
Aside from the big-picture observations of the darker shades in the west and the noticeably lighter tints to the
east and parts of the mid-west, take a closer look at some of the interesting differences at a more local level.
For example, notice the stark contrast across state lines between the dark regions of southern Kentucky (to the
left of the annotated caption) and the light regions in the neighbouring counties of northern Tennessee.
Despite their spatial proximity there are clearly strong differences in enrolment on the programme amongst
residents of these regions.
Both of these previous examples use a convergent colour scale, moving through discrete variations in colour
lightness to represent an increasing scale of quantitative values, from zero or small through to large. As
illustrated with the stacked bar chart example shown earlier, portraying the range of feelings from an ordinal
dataset, sometimes you may need to employ a divergent colour scale. This is when you want to show how
values are changing in two directions either side of a set breakpoint.
F igure 9.14 Daily Indego Bike Share Station Usage
335
Figure 9.14 shows a cropped view of a larger graphic compa…