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!

(=^◡^=)

Responsible Data Visualization V2

By Amanda Cheung

Responsible Data Visualization V2

Front Porch 2015, CSS Dev Conf 2015, Future of Web Design NYC 2015, Refresh Boston November 2015, NYC D3.js November 2015 Meetup

  • 2,736
Loading comments...

More from Amanda Cheung