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


https://www.linkedin.com/in/anthonychavez

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.


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


• Bubble Plot Example!

http://bit.ly/1Y9o7dz • Demo files available on Github !

http://bit.ly/1QfwZbT

http://bit.ly/1Y9o7dz


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.


DIMENSIONALITY

• Effective data visualization planning begins with dimensionality analysis.!

• Which dimensions actually matter?


DIMENSIONALITY : DISCRETE


D3 VISUALIZATIONS FOR DFUZR CLIENT


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.


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

• Demo files available!

http://bit.ly/1QfwZbT !

• Trellis Plots



D3 MECHANISMS

• Linear Scaling

!• Categorical Color Scaling

!• Radius Based on Min/Max

!


• Demo files available on Github !






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?


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


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.


USABILITY DESIGN : INTERFACE TOOLS

• Conditional dimensions based on an interface state.!

• Drill-Down / Drill-In!

• Animation and Media Files


USABILITY DESIGN : AESTHETIC TOOLS

• Color / Palette / Harmony!

• Line-Weight!

• Opacity!

• Z-Index!

• Diminution !

• Conditional changes based on interactions


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


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

!


• Demo files available on Github !






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

designing for d3.js: planning & approach to effective data visualizations

Design