Responsible
data visualization
Visualization by Arthur Buxton
Responsible
data visualization
Visualization by Arthur Buxton
(for the web)
Matisse’s Icarus
Its creation = encoding
Its use = decoding
Ben Fry’s 7 steps
of visualizing data
Author of Visualizing Data / Co-developer of Processing software
Our scope:
Design:
Visual encoding
Development:
Web implementation
What does it mean to be responsible?
Accurate
Effective
Accessible
Integrity
Efficiency
Performance
Access(ibility)
Maintainability
Form
___
Tools
Form
Integrity
Efficiency
Performance
Access(ibility)
Maintainability
___
70%
+ 63%
+ 60%
= 193%!
Accurate bubble sizes
Years competed
Truncated axes
Production Budget
Form
Integrity
Efficiency
Performance
Access(ibility)
Maintainability
___
Legend alternatives
Form
Integrity
Efficiency
Performance
Access(ibility)
Maintainability
___
Speed to load
Not specific to
charts and graphs, but...
Performant user interactions
Click, hover, scroll, etc.
Designers are in a unique position to impact overall page load time and perceived performance. The decisions that are made during the design process have an enormous impact on the end result of a site.’’
- Lara Hogan
Form
Integrity
Efficiency
Performance
Access(ibility)
Maintainability
___
Visual
Motor
Auditory
Cognitive
Visual
<meta name="viewport" content="width=device-width, initial scale=1">
Semantic HTML
Test with screen readers!
Motor
Game Boy
Smart TVs / game consoles
Sharing
Responsiveness
Form
Integrity
Efficiency
Performance
Access(ibility)
Maintainability
___
Can we add more gems?
Can it have longer gem names?
Is it flexible in width?
:)
:/
:)
Easy for scripting?
:)
Responsive?
:)
Can we add more sections?
:/
Easy for scripting?
:/
Can change to pie chart!
:)
Scatter plot
Responsive?
:)
Can we add more points of data?
:)
Can we add another dimension?
:)
Easy for scripting?
:)
Form
Integrity
Efficiency
Performance
Accessibility
Maintainability
___
The End
Thank you!
(=^◡^=)