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.
DESIGNING FOR D3.JS:
PLANNING & APPROACH TO EFFECTIVE DATA VISUALIZATIONS
September 15, 2015
Twitter: @dfuzrindustries Fac...
VALUE
WHO AM I?
My name is Anthony Chavez, I am acting Executive
Interactive Producer at Dfuzr. I love Javascript, FE
deve...
DFUZR
DFUZR
I work for
Dfuzr: n. /d-fūz-er/
Dfuzr is a full-service digital agency. Our small,
high-performance teams of e...
OUTLINE
• PRINCIPLES FOR VISUALIZATION
• DIMENSIONALITY
• VISUALIZATION TYPES
• SAMPLE CODE / BUBBLE PLOT
• APPROACH & PLA...
PRINCIPLES OF DATA VISUALIZATION
• TELL A STORY WITH YOUR VISUALIZATION, CREATE A COMPELLING DATA NARRATIVE.
• INFORMATION...
DIMENSIONALITY
• Effective data visualization planning begins with dimensionality analysis.!
• Which dimensions actually m...
DIMENSIONALITY : DISCRETE
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
D3 VI...
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
DIMENSIONALITY : CONTINUOUS
D3 ...
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
• Demo files available...
D3 MECHANISMS
• Linear Scaling
!
• Categorical Color Scaling
!
• Radius Based on Min/Max
!
Twitter: @dfuzrindustries Faceb...
APPROACH : CONSIDERATIONS
• What is the most efficient way of seeing what the data is showing?!
• What is the most appropri...
APPROACH : MODELING
• Try to understand the driving factors behind data, not just the changes in data.!
• Clearly identify...
APPROACH : USABILITY DESIGN
• Strive towards interfaces that illustrate effects and emphasize their size, not their signifi...
USABILITY DESIGN : INTERFACE TOOLS
• Conditional dimensions based on an interface state.!
• Drill-Down / Drill-In!
• Anima...
USABILITY DESIGN : AESTHETIC TOOLS
• Color / Palette / Harmony!
• Line-Weight!
• Opacity!
• Z-Index!
• Diminution !
• Cond...
PLANNING
• What is the most efficient way of seeing what the data is showing?!
• What is the most appropriate picture of th...
IMPROVE THE NARRATIVE
• Expose Additional Dimensions
• Snowfall vs. Elevation
• Snowfall vs. Latitude
• Sorting/Grouping c...
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
×

Designing for D3.js: Planning & approach to effective data visualizations

882 views

Published on

Planning & approach to effective data visualizations using D3.js and other Javascript visualization libraries.

Published in: Design
  • Be the first to comment

Designing for D3.js: Planning & approach to effective data visualizations

  1. 1. DESIGNING FOR D3.JS: PLANNING & APPROACH TO EFFECTIVE DATA VISUALIZATIONS September 15, 2015 Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
  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 #D3Boulder
  3. 3. DFUZR DFUZR I work for 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 #D3Boulder
  4. 4. OUTLINE • PRINCIPLES FOR VISUALIZATION • DIMENSIONALITY • VISUALIZATION TYPES • SAMPLE CODE / BUBBLE PLOT • APPROACH & PLANNING • SHOWCASE & INSPIRATION ! GOALS • Take a step back from code and re-examine core data visualization principles! • Have a look at a d3 bubble plot! • Have some fun Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder • Bubble Plot Example! http://bit.ly/1Y9o7dz • Demo files available on Github ! http://bit.ly/1QfwZbT
  5. 5. PRINCIPLES OF DATA VISUALIZATION • TELL A STORY WITH YOUR VISUALIZATION, CREATE A COMPELLING DATA NARRATIVE. • 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 INFORMATION, MINIMIZE VISUALIZATION. • Use only the minimum amount of data required to represent what you are trying to convey in the visualization. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
  6. 6. DIMENSIONALITY • Effective data visualization planning begins with dimensionality analysis.! • Which dimensions actually matter? Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
  7. 7. DIMENSIONALITY : DISCRETE Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder D3 VISUALIZATIONS FOR DFUZR CLIENT
  8. 8. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder DIMENSIONALITY : CONTINUOUS D3 VISUALIZATIONS FOR PINPOINT BY WOLTERS KLUWER
  9. 9. 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 mathematically. 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 sparing, only when value is gained from a geographic depiction of datasets. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
  10. 10. 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 #D3Boulder • LINE GRAPHS. Effective for showing continuous dimensions while comparing discrete groups.!
  11. 11. UNCONVENTIONAL VISUALIZATIONS • Flow Charts! • Heat Maps • Box Plots! • Strip Charts! • Bubble Plots • Demo files available! http://bit.ly/1QfwZbT ! • Trellis Plots Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
  12. 12. D3 MECHANISMS • Linear Scaling ! • Categorical Color Scaling ! • Radius Based on Min/Max ! Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder • Demo files available on Github ! http://bit.ly/1QfwZbT ! • Bubble Plot Example! http://bit.ly/1Y9o7dz
  13. 13. APPROACH : CONSIDERATIONS • 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? Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
  14. 14. 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.! ! 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. A description of the process by which datasets are generated Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
  15. 15. APPROACH : USABILITY DESIGN • 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. Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
  16. 16. USABILITY DESIGN : INTERFACE TOOLS • Conditional dimensions based on an interface state.! • Drill-Down / Drill-In! • Animation and Media Files Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
  17. 17. USABILITY DESIGN : AESTHETIC TOOLS • Color / Palette / Harmony! • Line-Weight! • Opacity! • Z-Index! • Diminution ! • Conditional changes based on interactions Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
  18. 18. PLANNING • 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 Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
  19. 19. IMPROVE THE NARRATIVE • Expose Additional Dimensions • Snowfall vs. Elevation • Snowfall vs. Latitude • Sorting/Grouping can expose additional dimensions ! • Summarize Data-Points • Best seasons, worst seasons • Call out anomalies - abnormally abundant/scarce snowfalls ! • Additional Visualizations • Heat map with ‘playhead’ • Bar & line to compare elevations against snowfalls ! Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder • Demo files available on Github ! http://bit.ly/1QfwZbT ! • Bubble Plot Example! http://bit.ly/1Y9o7dz
  20. 20. 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 #D3Boulder 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
  21. 21. THANK THANK YOU WE LOOK FORWARD TO HEARING FROM YOU YOU
  22. 22. 1971 8th St. Boulder, CO 80302 303.579.9648 www.dfuzr.com Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder

×