Responsible
data visualization

Visualization by Arthur Buxton

Hi, I’m Amanda

Lead UX Developer at DockYard

@acacheung

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

___

 – Flexible dimensions

– Dynamic data

– DRY (Don’t repeat yourself)

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!

(=^◡^=)