Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DATA VISUALIZATION FOR DESIGNERS & DEVELOPERS:
PLANNING & APPROACH TO EFFECTIVE DATA VISUALIZATIONS
October 15, 2015
Twitt...
VALUE
WHO AM I?
My name is Anthony Chavez, I am acting
Executive Interactive Producer at Dfuzr. I
love Javascript, FE deve...
DFUZR
DFUZR
!
Dfuzr: n. /d-fūz-er/
Dfuzr is a full-service digital agency.
Our small, high-performance teams of
expert cre...
DFUZR
DFUZR
!
Dfuzr: we love data-vis!
We’re happy to assist with any of your digital needs, but we
really do love bringin...
OUTLINE
• PRINCIPLES FOR VISUALIZATION
• APPROACH & PLANNING
• BRIEF CASE STUDY
• TOOLS FOR NON-DEVELOPERS
• TOOLS FOR DEV...
CREATE A COMPELLING DATA NARRATIVE
• TELL A STORY WITH YOUR VISUALIZATION.
• DESIGN PRINCIPLES ALWAYS MATTER.
• SUPPORTING...
PRINCIPLES OF DATA VISUALIZATION
• INFORMATION ARCHITECTURE IS KEY.
• What are the visual priorities required to quickly d...
DIMENSIONALITY
• Effective data visualization planning begins with dimensionality analysis.!
• Which dimensions are access...
DIMENSIONALITY : DISCRETE
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
D...
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
DIMENSIONALITY : CONTINUOUS...
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
DIMENSIONALITY : CONTINUOUS...
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
DIMENSIONALITY : MIXED
DFUZ...
VISUALIZATION TYPES
• CONVENTIONAL VISUALIZATIONS. Line and bar graphs.
• HISTOGRAMS. One dimensional data showing continu...
CONVENTIONAL VISUALIZATIONS
• BAR GRAPHS. Great for grouping
discrete factors and can leverage the
innate semantics of gro...
UNCONVENTIONAL VISUALIZATIONS
• Flow Charts!
• Heat Maps
• Box Plots!
• Strip Charts
• Bubble Plots!
• Trellis Plots
Twitt...
UNCONVENTIONAL VISUALIZATIONS
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenv...
APPROACH : MODELING
• Try to understand the driving factors behind data, not just the changes in data.!
• Clearly identify...
APPROACH : CONSIDERATIONS
• What is the most efficient way of seeing
what the data is showing?!
• How much data actually ne...
APPROACH : USABILITY DESIGN
• Understand your audience, personas and how their needs differ.!
• Seriously consider your ou...
USABILITY DESIGN : INTERFACE TOOLS
• Conditional dimensions based on an interface state.!
• Meaningful micro-interactions!...
USABILITY DESIGN : AESTHETIC TOOLS
• Color / Palette / Harmonization!
• Line-Weight!
• Opacity!
• Z-Index!
• Diminution !
...
APPROACH : SUMMARY
• What is the most efficient way of seeing what the data is showing?!
• What is the most appropriate pic...
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
A BRIEF CASE STUDY: PINPOIN...
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
MAPPING THE EXPERIENCE
D3 V...
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
D3 VISUALIZATIONS FOR DFUZR...
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
CONCEPTUALIZING THE EXPERIE...
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
CONCEPTUALIZING THE EXPERIE...
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
DEFINING THE STACK
TOOLS FOR DEVELOPERS
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
!
• Ja...
TOOLS FOR NON-DEVELOPERS
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
• ...
CONCLUSION
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
!
• CREATE A COM...
INSPIRATION
Out of Sight, Out of Mind.!
http://drones.pitchinteractive.com/ !
by Pitch Interactive!
!
The Refugee Project!...
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: D...
Upcoming SlideShare
Loading in …5
×

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

867 views

Published on

Presented October 15 for #RefreshDenver at Galvanize Denver. An overview of data visualization themes and approaches for both designers and developers.

Published in: Data & Analytics
  • You can try to use this service ⇒ www.HelpWriting.net ⇐ I have used it several times in college and was absolutely satisfied with the result.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. DATA VISUALIZATION FOR DESIGNERS & DEVELOPERS: PLANNING & APPROACH TO EFFECTIVE DATA VISUALIZATIONS October 15, 2015 Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
  2. 2. 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, 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: anthony@dfuzr.com Twitter: @artisgarbage LinkedIn: https://www.linkedin.com/in/anthonychavez Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
  3. 3. 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. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
  4. 4. 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. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
  5. 5. 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. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
  6. 6. CREATE A COMPELLING DATA NARRATIVE • TELL A STORY WITH YOUR VISUALIZATION. • DESIGN PRINCIPLES ALWAYS MATTER. • SUPPORTING CONTENT CAN ENHANCE THE NARRATIVE. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
  7. 7. 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. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
  8. 8. 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. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver Data Dimensions Noise
  9. 9. DIMENSIONALITY : DISCRETE Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver DFUZR CLIENTS : SUSE (LEFT), BRITE CONTENT (RIGHT)
  10. 10. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver DIMENSIONALITY : CONTINUOUS D3 VISUALIZATIONS FOR DFUZR CLIENT, BRITE CONTENT
  11. 11. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver DIMENSIONALITY : CONTINUOUS F*CK GRAPEFRUIT https://xkcd.com/388/
  12. 12. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver DIMENSIONALITY : MIXED DFUZR CLIENTS : BRITE CONTENT (TOP), WOLTER’S KLUWER (BOTTOM)
  13. 13. 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. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
  14. 14. CONVENTIONAL VISUALIZATIONS • BAR GRAPHS. Great for grouping discrete factors and can leverage the innate semantics of grouping to provide additional dimensionality. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver • LINE GRAPHS. Effective for showing continuous dimensions while comparing discrete groups.!
  15. 15. UNCONVENTIONAL VISUALIZATIONS • Flow Charts! • Heat Maps • Box Plots! • Strip Charts • Bubble Plots! • Trellis Plots Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver D3 VISUALIZATIONS FOR DFUZR CLIENT, TWITTER / GNIP /
  16. 16. UNCONVENTIONAL VISUALIZATIONS Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver http://globe.cid.harvard.edu/ http://universodeemociones.com/portfolio_page/alegria/
  17. 17. 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 Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
  18. 18. 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? Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver D3 VISUALIZATIONS FOR DFUZR CLIENT, BRITE CONTENT
  19. 19. 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. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
  20. 20. USABILITY DESIGN : INTERFACE TOOLS • Conditional dimensions based on an interface state.! • Meaningful micro-interactions! • Drill-Down / Drill-In! • Animation and Media Files Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
  21. 21. USABILITY DESIGN : AESTHETIC TOOLS • Color / Palette / Harmonization! • Line-Weight! • Opacity! • Z-Index! • Diminution ! • Conditional changes based on interactions Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver
  22. 22. 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 Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver PRELIMINARY RESEARCH IS KEY • Know your users! • Produce usability hypotheses! • Test hypotheses and iterate
  23. 23. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver 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 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 # of Quizzes Completed 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. Class Product Instructor Add Filters # of Quizzes Completed 90 80 70 60 50 40 30 20 10 Line Graph & Table View Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Fall 2013 Classes Comparison of Capstone, Nursing 2013 by Class View Options Table Graph Table + Graph Save Print Export Modify Filters Class Product Instructor Lipscomb University, Maternity 3084 NCLEX RN PassPointClass of 2015 NCLEX RN PassPoint NCLEX RN PassPoint Senior Class 2014 Lorem ipsume dolor LLW, Maternity-Pediatric- 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 Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec # of Quizzes Completed # of Quizzes Completed Saved Reports Help/FAQ LogoutHome Reporting Tool Comparison of Nursing, Capstone 2013 by Class View Options Table Graph Table + Graph Save Print Export Modify Filters Class Product Instructor Lipscomb University, Maternity 3084 NCLEX RN PassPointClass of 2015 NCLEX RN PassPoint NCLEX RN PassPoint Senior Class 2014 Lorem ipsume dolor LLW, Maternity-Pediatric- 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 NCLEX RN PassPointLorem ipsume dolor 22 4 1098 10980 6.5 NCLEX RN PassPointLorem ipsume dolor 22 4 1098 10980 6.5 NCLEX RN PassPointLorem ipsume dolor 22 4 1098 10980 6.5 NCLEX RN PassPointLorem ipsume dolor 22 4 1098 10980 6.5 NCLEX RN PassPointLorem ipsume dolor 22 4 1098 10980 6.5 NCLEX RN PassPointLorem ipsume dolor 22 4 1098 10980 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 Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec # of Quizzes Completed # of Quizzes Completed Saved Reports Help/FAQ LogoutHome Reporting Tool 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.
  24. 24. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver MAPPING THE EXPERIENCE D3 VISUALIZATIONS FOR DFUZR CLIENT, WOLTERS KLUWER • 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
  25. 25. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver D3 VISUALIZATIONS FOR DFUZR CLIENT, WOLTERS KLUWER Safari File View History Bookmarks Window Help Googlehttp://pinpoint.wolterskluwer.com 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. 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. Safari File View History Bookmarks Window Help Googlehttp://pinpoint.wolterskluwer.com Welcome, Jane Doe! What would you like to do today? 5 Compare performance accross 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 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. # 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
  26. 26. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver CONCEPTUALIZING THE EXPERIENCE D3 VISUALIZATIONS FOR DFUZR CLIENT, WOLTERS KLUWER Safari File View History Bookmarks Window Help Googlehttp://pinpoint.wolterskluwer.com Welcome, Jane Doe! What would you like to do today? 5 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. Compare Add Instructor Go Youngblood, Beth Bechard, Holly Safari File View History Bookmarks Window Help Googlehttp://pinpoint.wolterskluwer.com Compare Instructors View Options Table Graph Table + Graph Save Print Class Product Instructor Lipscomb University, Maternity 3084 Youngblood, Beth Youngblood, Beth Youngblood, Beth Bechard, Holly NCLEX RN PassPointClass of 2015 NCLEX RN PassPoint NCLEX RN PassPoint Senior Class 2014 Lorem ipsume dolor LLW, Maternity-Pediatric- 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 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. 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
  27. 27. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver CONCEPTUALIZING THE EXPERIENCE D3 VISUALIZATIONS FOR DFUZR CLIENT, WOLTERS KLUWER 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 Class Product Instructor Add Filters # of Quizzes Completed 90 80 70 60 50 40 30 20 10 Line Graph & Table View Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Fall 2013 Classes Filters Report Type Navigation Table Data Add Filters Button Graph Data Save Report Button / Indicator
  28. 28. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver DEFINING THE STACK
  29. 29. TOOLS FOR DEVELOPERS Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver ! • 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!
  30. 30. TOOLS FOR NON-DEVELOPERS Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver • 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/!
  31. 31. CONCLUSION Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver ! • CREATE A COMPELLING DATA NARRATIVE • EXAMINE DIMENSIONALITY PRIOR TO CONCEPTUALIZATION • KNOW YOUR AUDIENCE • PRODUCE INTERFACES THAT ENCOURAGE ANALYTICAL BEHAVIORS
  32. 32. 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 Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #RefreshDenver 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
  33. 33. THANK THANK YOU WE LOOK FORWARD TO HEARING FROM YOU YOU
  34. 34. 1971 8th St. Boulder, CO 80302 303.579.9648 www.dfuzr.com Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder

×