Designing for D3.js: Planning & approach to effective data visualizations
-
Upload
anthony-chavez -
Category
Design
-
view
544 -
download
1
Transcript of Designing for D3.js: Planning & approach to effective data visualizations
DESIGNING FOR D3.JS: PLANNING & APPROACH TO EFFECTIVE DATA VISUALIZATIONS
September 15, 2015
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
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
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
DFUZR
DFUZRI 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
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
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
DIMENSIONALITY
• Effective data visualization planning begins with dimensionality analysis.!
• Which dimensions actually matter?
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
DIMENSIONALITY : DISCRETE
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
D3 VISUALIZATIONS FOR DFUZR CLIENT
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
DIMENSIONALITY : CONTINUOUS
D3 VISUALIZATIONS FOR PINPOINT BY WOLTERS KLUWER
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
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.!
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
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
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
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
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
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
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
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
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
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
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