data visualization for designers and developers : planning and approach to effective data...

DATA VISUALIZATION FOR DESIGNERS & DEVELOPERS: PLANNING & APPROACH TO EFFECTIVE DATA VISUALIZATIONS

October 15, 2015

Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver

VALUEWHO 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, fly-fishing, 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: [email protected] Twitter: @artisgarbage LinkedIn: https://www.linkedin.com/in/anthonychavez


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/

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. !

• Difficult 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 identifier.!

• MAPS.

• Effective for displaying multiple discrete groups. Should be used sparingly, only when value is gained from a geographic depiction of datasets.


http://www.cs.uic.edu/~wilkinson/Publications/venneuler.pdf

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/

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 efficient 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 significance.!

• 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 efficient 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 identification of “at-risk” groups w.r.t accreditation.

Safari File View History Bookmarks Window Help

Googlehttp://pinpoint.wolterskluwer.com

3LQ3RLQW�E\�:ROWHU·V�.OXZHU

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 YoungbloodClass of 2015200 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 LogoutHomePinPointby

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

View Options Table Graph Table + Graph! Save Print Export

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 QuestionsAnswered

12

33

22

3

51

133

4

100

200

12

1098

1000

2000

120

10980

ClassMastery

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

Saved Reports Help/FAQ LogoutHomeReporting Tool

Comparison of Nursing, Capstone 2013 by Class

View Options Table Graph Table + Graph! Save Print Export

Modify Filters"



Maternity 3084


NCLEX RN PassPoint

NCLEX RN PassPoint

Senior Class 2014

Lorem ipsume dolor

LLW,


Ricci

# Students Enrolled

40


12

33

22

3

51

133

4

100

200

12

1098

1000

2000

120

10980

ClassMastery

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

Saved Reports Help/FAQ LogoutHomeReporting 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”

AuthenticationHandshake

2.1 CompareCohorts

to AllUsers

2.2 CompareInstructorsby Course

2.4 CompareClasses

by CourseOver Time

2.5 CompareAll ClassesOver Time

1.1 UserDashboard

A

3.3 Print

3.4 Exportto

File

PDF

b

XLS

a

2.3 CompareClasses

by Course

Report

BA

BCD

E

Report

BA

BCD

E5.1 Choose

One or ManyClasses 5.2 Choose

a CourseChoose

a Date Range

3.5 ChangeView

3.1 Report

BA

BCD

E

3.2 Saved Reports

B

3.6 Choose a Report Title

6.1 ChooseOne or ManyInstructors Choose

CourseChoose

a Date Range

4.1 Choosea Date Range

Report

BA

BCD

E

Choosea Date Range

3.2.b Edit Report

3.2.b.i Save Report

3.2.c DeleteReport

3.2.c.i &RQȴUPDeletion

3.2.a SavedReport

BA

BCD

E






Welcome, Jane Doe!What would you like to do today?

5Get Started

Start by choosing one or several products to compare in your reports.








5 Compare performanceaccross these products :

NCLEX RN PassPoint

LWW, Maternity-Pediatric-Ricci

LWW, Nursing-Medsurg

LWW, Nursing-Craven

LWW, Nursing-Pharmacology-...

Add Product

Saved Reports Help/FAQ LogoutHome

More

PinPointby



# of Selected ProductsDisplays 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 NavigationMain navigation to key features.

Create ReportsFriendly options / entry-points for creating key reports.

Chosen ProductsDisplays 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 NavigationsDisplays a list of the user’s saved reports.

CONCEPTUALIZING THE EXPERIENCE








5




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


12

33

22

3

51

133

4

100

200

12

1098

1000

2000

120

10980

ClassMastery

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




Beth YoungbloodClass of 201547 Students Enrolled

NCLEX RN PassPoint

Conditional Filters / OptionsProvide the necessary options for

generating key reports.

Graph Data HighlightHighlights the column of data being

displayed.

Graph Hover HighlightHighlights the row of data if a user

hovers over a corresponding ele-

ment in the graph.

Graph FunctionsA user is able to save, print or

export a report.

View OptionsProvides utilities for switching views,

changing grouping and sorting

settings, etc.

TooltipInformational tooltip for when

a user hovers over a bar. The

corresponding row of data.

Modify Filters([SRVHV�FRQWUROV�WR�PRGLI\�ȴOWHUV�




Course Product Instructor


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


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

Filters6KRZV�ȴOWHUV�WKDW�DUH�DFWLYH�RQ�WKH�GDWDVHW�GLVSOD\HG�EHORZ�

Report Type Navigation&\FOHV�WKURXJK�DYDLODEOH�YLHZV�IRU�WKH�GLVSOD\HG�GDWDVHW�

Table Data$W�WKH�PRELOH�UHVROXWLRQ��WH[W�EDVHG�FKDUWV�ZLOO�EH�WUHDWHG�IRU�OHJLELOLW\��7R�DGGUHVV�KRUL]RQWDO�RYHUȵRZ��WKH�OHIWPRVW�FROXPQ�ZLOO�EH�ORFNHG�LQ�SODFH�ZKLOH�WKH�UHPDLQLQJ�FROXPQV�PD\�EH�VFUROOHG�WKURXJK�

Add Filters Button6OLGHV�GRZQ�WKH�ȴOWHU�FRQWUROV�DOORZLQJ�XVHUV�WR�PRGLI\�ȴOWHUV�RQ�WKH�GLVSOD\HG�UHSRUW�

Graph Data&KDQJHV�WKH�YLVXDOL]HG�GDWD��RSWLRQV�FRUUHVSRQG�WR�WKH�FROXPQV�LQ�WKH�GDWDVHW�

Save Report Button / Indicator6DYHV�WKH�UHSRUW��RU�GHOHWHV�D�VDYHG�UHSRUW�XSRQ�FRQȴUPDWLRQ�


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!

http://d3js.org/

http://c3js.org/

https://developers.google.com/chart/

http://canvasjs.com/

https://github.com/core-plot

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/!

http://plot.ly

http://raw.densitydesign.org/

http://www.chartblocks.com/en

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

http://drones.pitchinteractive.com/

http://www.therefugeeproject.org/

http://armsglobe.chromeexperiments.com/

http://bost.ocks.org/mike/algorithms/

http://mbtaviz.github.io/

THANKTHANK YOUWE LOOK FORWARD TO

HEARING FROM YOU

YOU

1971 8th St. Boulder, CO 80302

303.579.9648

www.dfuzr.comTwitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder

http://www.dfuzr.com

data visualization for designers and developers : planning and approach to effective data...

Data & Analytics