Data Visualization for Designers and Developers : Planning and Approach to Effective Data Visualization

DATA VISUALIZATION FOR DESIGNERS & DEVELOPERS:
PLANNING & APPROACH TO EFFECTIVE DATA VISUALIZATIONS
October 15, 2015
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver

VALUE
WHO AM I?
My name is Anthony Chavez, I am acting
Executive Interactive Producer at Dfuzr. I
love Javascript, FE development and all
things design. I’m also fond of skiing, ﬂy-
ﬁshing, music, tattoos, cats, good lagers
and many other things. Connect with me
to discuss… just about anything, I’d be
happy to hear from you!
!
Email: anthony@dfuzr.com
Twitter: @artisgarbage
LinkedIn: https://www.linkedin.com/in/anthonychavez

DFUZR
DFUZR
!
Dfuzr: n. /d-fūz-er/
Dfuzr is a full-service digital agency.
Our small, high-performance teams of
expert creative and technology
consultants transform ideas into
positive brand interactions through
media and technology.

DFUZR
DFUZR
!
Dfuzr: we love data-vis!
We’re happy to assist with any of your digital needs, but we
really do love bringing the stories buried in data to life.

OUTLINE
• PRINCIPLES FOR VISUALIZATION
• APPROACH & PLANNING
• BRIEF CASE STUDY
• TOOLS FOR NON-DEVELOPERS
• TOOLS FOR DEVELOPERS
• SHOWCASE & INSPIRATION
• Q&A
!
!
GOALS
• Take a step back from implementation and re-examine core data visualization principles.!
• Contemplate effective approach and planning strategies for data visualization.!
• Examine current data-visualization tools for designers and developers.

CREATE A COMPELLING DATA NARRATIVE
• TELL A STORY WITH YOUR VISUALIZATION.
• DESIGN PRINCIPLES ALWAYS MATTER.
• SUPPORTING CONTENT CAN ENHANCE THE NARRATIVE.

PRINCIPLES OF DATA VISUALIZATION
• INFORMATION ARCHITECTURE IS KEY.
• What are the visual priorities required to quickly draw conclusions from the visualization?!
• DESIGN OBJECTIVELY.
• Determine exactly which points you are trying to illustrate.!
• MAXIMIZE SIGNALS, MINIMIZE NOISE.
• Use only the minimum amount of data required to represent what you are trying to convey in the
visualization.!
• THINK EXPERIENCE, DEVICES, PROPORTIONS.
• Consider the essential pieces of information for smallest target visualization.

DIMENSIONALITY
• Effective data visualization planning begins with dimensionality analysis.!
• Which dimensions are accessible?!
• Which dimensions actually matter?!
• How can you adapt dimensions to the needs of users and/or viewers.
Data
Dimensions
Noise

DIMENSIONALITY : DISCRETE
DFUZR CLIENTS : SUSE (LEFT), BRITE CONTENT (RIGHT)

DIMENSIONALITY : CONTINUOUS
D3 VISUALIZATIONS FOR DFUZR CLIENT, BRITE CONTENT

DIMENSIONALITY : CONTINUOUS
F*CK GRAPEFRUIT
https://xkcd.com/388/

DIMENSIONALITY : MIXED
DFUZR CLIENTS : BRITE CONTENT (TOP), WOLTER’S KLUWER (BOTTOM)

VISUALIZATION TYPES
• CONVENTIONAL VISUALIZATIONS. Line and bar graphs.
• HISTOGRAMS. One dimensional data showing continuous distributions.!
• PIES / GAUGES. Emphasizes that discrete categories sum to a constant.!
• VENN DIAGRAMS.
• Shows the similarity or overlap between discrete groups. !
• Difﬁcult to implement with mathematical accuracy. http://www.cs.uic.edu/~wilkinson/Publications/
venneuler.pdf !
• SCATTER PLOTS.
• Effective for illustrating relationships between two continuous dimensions.!
• Can also be used with many discrete items using identity as an identiﬁer.!
• MAPS.
• Effective for displaying multiple discrete groups. Should be used sparingly, only when value is gained
from a geographic depiction of datasets.

CONVENTIONAL VISUALIZATIONS
• BAR GRAPHS. Great for grouping
discrete factors and can leverage the
innate semantics of grouping to provide
additional dimensionality.
• LINE GRAPHS. Effective for showing continuous
dimensions while comparing discrete groups.!

UNCONVENTIONAL VISUALIZATIONS
• Flow Charts!
• Heat Maps
• Box Plots!
• Strip Charts
• Bubble Plots!
• Trellis Plots
D3 VISUALIZATIONS FOR DFUZR CLIENT, TWITTER / GNIP
/

UNCONVENTIONAL VISUALIZATIONS
http://globe.cid.harvard.edu/
http://universodeemociones.com/portfolio_page/alegria/

APPROACH : MODELING
• Try to understand the driving factors behind data, not just the changes in data.!
• Clearly identify main effects in your data.!
• Place emphasis on the magnitudes of effects.!
• Consider each row/record to be a single observation.!
• Use appropriate computational tools.!
• Goal, a clean meaningful model of data for implementation!
!
A note on experimental design
• Consider the experimental design behind your data and the questions that were being tested… !
this can have various implications on your data and ultimate visualization.!
• Does error analysis matter to your overall data narrative, to your model?
A description of the process by which datasets are generated

APPROACH : CONSIDERATIONS
• What is the most efﬁcient way of seeing
what the data is showing?!
• How much data actually needs to be
shown?!
• What is the most appropriate picture of
the dataset?!
• How is the data best iteratively
examined?!
• What is the best way to frame the
visualization?
D3 VISUALIZATIONS FOR DFUZR CLIENT, BRITE CONTENT

APPROACH : USABILITY DESIGN
• Understand your audience, personas and how their needs differ.!
• Seriously consider your output dimensions / devices.!
• Strive towards interfaces that illustrate effects and emphasize their size, not their signiﬁcance.!
• Encourage precise behaviors, not simple approximations.!
• Use interface, messaging and aesthetic tools as is appropriate.!
• Try not to neglect your data tables.

USABILITY DESIGN : INTERFACE TOOLS
• Conditional dimensions based on an interface state.!
• Meaningful micro-interactions!
• Drill-Down / Drill-In!
• Animation and Media Files

USABILITY DESIGN : AESTHETIC TOOLS
• Color / Palette / Harmonization!
• Line-Weight!
• Opacity!
• Z-Index!
• Diminution !
• Conditional changes based on interactions

APPROACH : SUMMARY
• What is the most efﬁcient way of seeing what the data is showing?!
• What is the most appropriate picture of the dataset?!
• How is the data best iteratively examined?!
• How can you do more with less?!
• Can you ‘hybridize’ with multiple axis, scales, or collections of visualizations?!
!
THINGS TO AVOID
• Messy graphs!
• Too much data on a single plot!
• Comparison friction!
• Poor semantics!
• Unnecessary or redundant content/data
PRELIMINARY RESEARCH IS KEY
• Know your users!
• Produce usability hypotheses!
• Test hypotheses and iterate

A BRIEF CASE STUDY: PINPOINT
D3 VISUALIZATIONS FOR DFUZR CLIENT, WOLTERS KLUWER
• Adaptive analytics tool for deans
and administrators of nursing
schools
• Business requirements
necessitated comparison of many
mixed dimensions and broad
scales.
• Used for identiﬁcation of “at-risk”
groups w.r.t accreditation.
Safari File View History Bookmarks Window Help
Googlehttp://pinpoint.wolterskluwer.com
Comparison of Nursing, Capstone 2013 by Class
View Options Table Graph Table + Graph Save Print Export
Modify Filters
80
70
60
50
40
30
20
10
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
# of Quizzes Completed
Beth Youngblood
Class of 2015
200 Quizes Completed
NCLEX RN PassPoint
Class Product Instructor
Nursing, Capstone 2013
Maternity 3084
Youngblood, Beth
Bechard, Holly
Doe, Jane
Bechard, Holly
NCLEX RN PassPointClass of 2015
NCLEX RN PassPoint
NCLEX RN PassPoint
Senior Class 2014
Lorem ipsume dolor
LLW,
Maternity-Pediatric-
Ricci
Bechard, HollyNCLEX RN PassPointLorem ipsume dolor
Feb
100
200
12
1098
1098
Mar
100
200
12
1098
1098
Apr
100
200
12
1098
1098
May
100
200
12
1098
1098
June
100
200
12
1098
1098
July
100
200
12
1098
1098
Aug
100
200
12
1098
1098
Sep
100
200
12
1098
1098
Saved Reports Help/FAQ LogoutHome
PinPoint
by
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt fringilla dolor, at commodo massa pellentesque eu. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Integer euismod non nunc commodo varius. Curabitur quis elementum nisi.
Add Filters
90
80
70
60
50
40
30
20
10
Line Graph & Table View
Fall 2013 Classes
Comparison of Capstone, Nursing 2013 by Class
Modify Filters
Lipscomb University,
Maternity 3084
NCLEX RN PassPoint
NCLEX RN PassPoint
Senior Class 2014
Lorem ipsume dolor
LLW,
Ricci
# Students
Enrolled
40
Log Ins Quizes
Questions
Answered
12
33
22
3
51
133
4
100
200
12
1098
1000
2000
120
10980
Class
Mastery
5.8
3.4
2.3
6.5
Youngblood, Beth
Youngblood, Beth
Youngblood, Beth
Bechard, Holly
80
70
60
50
40
30
20
10
# of Quizzes Completed # of Quizzes Completed
Reporting Tool
Comparison of Nursing, Capstone 2013 by Class
Modify Filters
Maternity 3084
NCLEX RN PassPoint
NCLEX RN PassPoint
Senior Class 2014
Lorem ipsume dolor
LLW,
Ricci
# Students
Enrolled
40
Log Ins Quizes
Questions
Answered
12
33
22
3
51
133
4
100
200
12
1098
1000
2000
120
10980
Class
Mastery
5.8
3.4
2.3
6.5
NCLEX RN PassPointLorem ipsume dolor 22 4 1098 10980 6.5
Youngblood, Beth
Youngblood, Beth
Youngblood, Beth
Bechard, Holly
Bechard, Holly
Bechard, Holly
Bechard, Holly
Bechard, Holly
Pillow, Roletha
Pillow, Roletha
Pillow, Roletha
Pillow, Roletha
80
70
60
50
40
30
20
10
# of Quizzes Completed # of Quizzes Completed
Reporting Tool

MAPPING THE EXPERIENCE
• Usability research
necessitated simplicity, bars
& lines.
• Grouping exposed as an
additional dimension with
color scale
• Dimension switch interface
components
“The Point”
Authentication
Handshake
2.1 Compare
Cohorts
to All
Users
2.2 Compare
Instructors
by Course
2.4 Compare
Classes
by Course
Over Time
2.5 Compare
All Classes
Over Time
1.1 User
Dashboard
A
3.3 Print
3.4 Export
to
File
PDF
b
XLS
a
2.3 Compare
Classes
by Course
Report
B
A
B
C
D
E
Report
B
A
B
C
D
E
5.1 Choose
One or Many
Classes 5.2 Choose
a Course
Choose
a Date Range
3.5 Change
View
3.1 Report
B
A
B
C
D
E
3.2 Saved Reports
B
3.6 Choose
a Report Title
6.1 Choose
One or Many
Instructors Choose
Course
Choose
a Date Range
4.1 Choose
a Date Range
Report
B
A
B
C
D
E
Choose
a Date Range
3.2.b Edit
Report
3.2.b.i Save
Report
3.2.c Delete
Report
3.2.c.i
Deletion
3.2.a Saved
Report
B
A
B
C
D
E

Welcome, Jane Doe!
What would you like to do today?
5
Get Started
Start by choosing one or several
products to compare in your reports.
PinPoint
by
Welcome, Jane Doe!
5 Compare performance
accross these products :
NCLEX RN PassPoint
LWW, Maternity-Pediatric-Ricci
LWW, Nursing-Medsurg
LWW, Nursing-Craven
LWW, Nursing-Pharmacology-...
Add Product
More
PinPoint
by
# of Selected Products
Displays to the user the number of
products that they selected. Each
product selected will have it’s data
displayed in a generated report. By
default, all products will be selected.
Main Navigation
Main navigation to key features.
Create Reports
Friendly options / entry-points for
creating key reports.
Chosen Products
Displays to the user the products
that they selected. Each product
will have it’s data displayed in a
generated report. By default, all
products will be selected.
Saved Reports Navigations
Displays a list of the user’s saved
reports.
CONCEPTUALIZING THE EXPERIENCE

Welcome, Jane Doe!
5
PinPoint
by
Compare
Add Instructor Go
Youngblood, Beth
Bechard, Holly
Compare Instructors
View Options Table Graph Table + Graph Save Print
Maternity 3084
Youngblood, Beth
Youngblood, Beth
Youngblood, Beth
Bechard, Holly
NCLEX RN PassPoint
NCLEX RN PassPoint
Senior Class 2014
Lorem ipsume dolor
LLW,
Ricci
# Students
Enrolled
40
Log Ins Quizes
Questions
Answered
12
33
22
3
51
133
4
100
200
12
1098
1000
2000
120
10980
Class
Mastery
5.8
3.4
2.3
6.5
Bechard, HollyNCLEX RN PassPointLorem ipsume dolor 22 4 1098 10980 6.5
90
80
70
60
50
40
30
20
10
# of Students Enrolled
47
74
38
47
74
38
47
74
38
47
74
38
47
74
38
Export
Modify Filters
# Students Enrolled
PinPoint
by
Beth Youngblood
Class of 2015
47 Students Enrolled
NCLEX RN PassPoint
Conditional Filters / Options
Provide the necessary options for
generating key reports.
Graph Data Highlight
Highlights the column of data being
displayed.
Graph Hover Highlight
Highlights the row of data if a user
hovers over a corresponding ele-
ment in the graph.
Graph Functions
A user is able to save, print or
export a report.
View Options
Provides utilities for switching views,
changing grouping and sorting
settings, etc.
Tooltip
Informational tooltip for when
a user hovers over a bar. The
corresponding row of data.
Modify Filters

Course Product Instructor
Lipscomb
University,
Maternity 3084
LWW,
Maternity-Pediatric
-Ricci
Youngblood,
Beth
Class of 2015 NCLEX RN
PassPoint
Youngblood,
Beth
Senior Class 2014 NCLEX RN
PassPoint
Youngblood,
Beth
Table View
Lorem Ipsum NCLEX RN
PassPoint
Youngblood,
Beth
Add Filters
Youngblood, Beth
Hide Filters
Nursing
Fall 2013 Classes Fall 2013 Classes
Lipscomb
University,
Maternity 3084
LWW,
Maternity-Pediatric
-Ricci
Youngblood,
Beth
Course Product Instructor
Add Filters
# Students Enrolled
90
80
70
60
50
40
30
20
10
47
74
38
Graph & Table View
Add Filters
90
80
70
60
50
40
30
20
10
Line Graph & Table View
Fall 2013 Classes
Filters
Report Type Navigation
Table Data
Add Filters Button
Graph Data
Save Report Button / Indicator

DEFINING THE STACK

TOOLS FOR DEVELOPERS
!
• Javascript is your friend.!
• D3 / C3 http://d3js.org/ http://c3js.org/ !
• Google Charts https://developers.google.com/chart/ !
• CanvasJS http://canvasjs.com/!
!
• UI Webview can be used to wrap JS visualizations for native iOS development.!
• CorePlot/Cocoa https://github.com/core-plot !
• “Vanilla” OpenGL is still a great drawing tool for visualizations, JOGL for Java!

TOOLS FOR NON-DEVELOPERS
• plot.ly!
• RAW http://raw.densitydesign.org/!
• Infogram https://infogr.am/!
• Chartblocks http://www.chartblocks.com/en !
• Tableu http://www.tableau.com/!
!
!
http://www.informationisbeautifulawards.com/!

CONCLUSION
!
• CREATE A COMPELLING DATA NARRATIVE
• EXAMINE DIMENSIONALITY PRIOR TO CONCEPTUALIZATION
• KNOW YOUR AUDIENCE
• PRODUCE INTERFACES THAT ENCOURAGE ANALYTICAL BEHAVIORS

INSPIRATION
Out of Sight, Out of Mind.!
http://drones.pitchinteractive.com/ !
by Pitch Interactive!
!
The Refugee Project!
http://www.therefugeeproject.org/!
by Hyperakt and Ekene Ijeoma!
!
Small Arms & Ammunition - Imports &
Exports!
http://armsglobe.chromeexperiments.com/ !
by Pitch Interactive
Visualizing Algorithms!
http://bost.ocks.org/mike/algorithms/ !
by Mike Bostock!
!
Visualizing MBTA Data - an interactive
exploration of Boston’s subway system!
http://mbtaviz.github.io/ !
by Mike Marry and Brian Card

THANK
THANK YOU
WE LOOK FORWARD TO
HEARING FROM YOU
YOU

1971 8th St. Boulder, CO 80302
303.579.9648
www.dfuzr.com
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder

Data Visualization for Designers and Developers : Planning and Approach to Effective Data Visualization

Recommandé

Recommandé

Contenu connexe

Similaire à Data Visualization for Designers and Developers : Planning and Approach to Effective Data Visualization

Similaire à Data Visualization for Designers and Developers : Planning and Approach to Effective Data Visualization (20)

Dernier

Dernier (20)

Data Visualization for Designers and Developers : Planning and Approach to Effective Data Visualization