of 37
https://doi.org/10.7907/721sq
-hvm82
Copy of slides
Data Visualization
Kristin Briney
BBE Librarian
https://xkcd.com/1798/
[Comment Annotation]
Learning Outcomes
1.
Participants will be able to make good design decisions to
highlighting what’s important and eliminating excess information
2.
Participants will be able to write alt text for a scientific image
3.
Participants will be able to list
criteria
for
more accessible
images
Chart Design
[Comment Annotation]
Reduce Cognitive Load
People
can only hold about
a few
things in our working memory at
one
time
Making a Cognitive Friendly Chart
Readable charts:
Highlight key information
Suppress (or delete) other information
Are visually easy to scan
Easy to scan doesn’t necessarily mean simple
English
-speaking people read charts in a Z pattern starting at the top
left
4 Strategies to Reduce Cognitive Load
1.
Identify what is important
2.
Remove chart junk
3.
Draw the viewer’s eye
4.
Be consistent
[Comment Annotation]
Activity 1: Critique This Example Figure
Gowen
, E. and Meier, J.J., 2020. Research Data Management Services and Strategic Planning in Libraries Today: A Longitudinal Study
.
Journal of Librarianship and
Scholarly Communication
, 8(1), p.eP2336. DOI:
http://
doi.org/10.7710/2162-
3309.2336.
Used under a CC BY 4.0 license.
[Comment Annotation]
What is Important?
University library data support
increased from 2014 to 2019
[Comment Annotation]
Change Chart Type
[Comment Annotation]
1. Identify What is Important
Decide which data to highlight
Give
your figure a
helpful title
[Comment Annotation]
2. Remove Chart Junk
Remove extraneous lines and
numbers
Label the data directly
[Comment Annotation]
3. Draw the Viewer's Eye
Use color sparingly to highlight
Use grey for less important
content
Avoid:
Pairing red and green (colorblind)
Pink for women and blue for men
Check: print in black and white
Reorder your data, where
possible
[Comment Annotation]
Example: Reordering the Data
Johnston, L. R., Carlson, J., Hudson
-Vitale, C.,
Imker
, H., Kozlowski, W.,
Olendorf
, R., & Stewart, C. (2018). How Important is Data Curation? Gaps and Opportunities for
Academic Libraries.
Journal of Librarianship and Scholarly Communication,
6(1), eP2198. DOI:
http://
doi.org/10.7710/2162-
3309.2198. Used under a CC BY license.
[Comment Annotation]
4. Be Consistent
Align content left or right
Limit
font types and sizes
Limit color palette
Make color assignment
consistent across figures
[Comment Annotation]
One More Thing
It’s okay to annotate the
data on the graph
[Comment Annotation]
Final Image
[Comment Annotation]
Test Your Figures
Take a break; see how you process the chart when you come back
Show your figure to a friend and ask them to talk through what they
see and understand
Accessibility: Alt Text
Why Alt Text?
Alt text is short for “
alternative text
Provides a textual description for an image
Needed by blind, low vision, and others to understand visual images
For example, screen readers only read alt text but can’t describe the image
Also helps:
When webpage images don’t load
For search engine optimization
Where Do I Use Alt Text?
Use alt text when you post your figures to a lab website
Use alt text when you post figures to social media
Use alt text for images when you share slides
Yo u r
journal may or may not
accept
alt text for your figures. Ask
!
Alt Text
Formula for a Data Visualization
This is not the only way to write alt text for visualization but I like this
formula:
*Chart type* of *type of data* where *reason for including chart*
https://medium.com/nightingale/writing
-alt
-text
-for
-data
-visualization
-2a218ef43f81
Alt Text Example 1
Colored stripes
of
chronologically
ordered
temperatures
where
they
increase in red to
show the warming global
temperature
https://medium.com/nightingale/writing
-alt
-text
-for
-data
-visualization
-2a218ef43f81
[Comment Annotation]
Alt Text Example 2
Bar chart of gun murders per 100,000 people
where America’s murder rate is 6 times worse
than Canada, and 30 times Australia
https://medium.com/nightingale/writing
-alt
-text
-for
-data
-visualization
-2a218ef43f81
[Comment Annotation]
Activity 2: Pick an Image, Write Alt Text
Creutzfeldt–
Jakob
disease is a rare brain
disorder caused by misfolded proteins, which
can be suppressed by a new editing system.
https://doi.org/10.1038/d41586-
024-
02115-
z
Two black holes orbiting around each other
generate gravitational waves of increasing
frequency.
https://doi.org/10.1038/d41586-
024-
02003-
6
[Comment Annotation]
Activity 2: Share Your Alt Text
https://doi.org/10.1038/d41586-
024-
02115-
z
https://doi.org/10.1038/d41586-
024-
02003-
6
[Comment Annotation]
Activity 2: Nature’s Actual Alt Text
“Composite
image of FLAIR and
diffusion MRI scans of the brain of
a 47
-old patient, showing
hyperintensities
around the area
of the cortex and basal ganglia,
suggestive of”
https://doi.org/10.1038/d41586-
024-
02115-
z
“A simplified
colour
illustration of
two black holes orbit around each
other and generating gravitational
waves”
https://doi.org/10.1038/d41586-
024-
02003-
6
Accessibility: Design
Why Accessibility?
Maximize the ability for all people to understand your visualizations
There are disabled scientists that might want to understand your chart
Many design strategies for accessibility also benefit nondisabled
people
This is principle of universal design
Example: large text helps both people with low vision and people who use
bifocal/reading glasses
Accessibility versus Design
Accessibility and design principles often conflict!
I will likely say things now that conflict with what I just told you
Accessibility can conflict with itself because different disabilities can have
conflicting needs
Accessibility for visualization entails a spectrum of activities
Only covering the most basic today
Accessibility: Text
Fonts
No smaller than 9pt font
Use easy-
to-read fonts, blocky instead of scripted
Text descriptions
At the very least add a caption
Aim for 9
th
grade reading level or below
Use labels
Label axes
Don’t overlap labels with other visual content
Accessibility: Colors
Colors must contrast
Text contrast of at least 4.5:1
Shape contrast of at least 3:1
Tool
: Contrast Checker
https://webaim.org/resources/contrastchecker
/
Check for colorblind friendliness
Tool:
Viz
Palette
https://
projects.susielu.com/viz
-palette
Don’t encode information only in color
This is very hard with limited options: texture, shape, size, dash patterns,
labels
Accessibility: Alternative Formats
The image shouldn’t be the only way to access the information
Write alt text
Share the underlying data
Where possible, link from the image to the underlying data table
Example: For a recent article, I shared the entire dataset plus separate
spreadsheets corresponding to the data in each figure
Accessibility: Complexity
Don’t overwhelm your audience
Balance white space
You need some white space but not too much!
More rules for interactive/animated visualizations
Tool:
Chartability
https://chartability.fizz.studio
/