That Conference 2017 – From Dull to Dazzling: How Visualization Enhances Data Comprehension

That Conference 2017, Kalahari Resort, Lake Delton, WI
From Dull to Dazzling: How Visualization Enhances Data Comprehension – Walt Ritscher

Day 3, 9 Aug 2017

Disclaimer: This post contains my own thoughts and notes based on attending That Conference 2017 presentations. Some content maps directly to what was originally presented. Other content is paraphrased or represents my own thoughts and opinions and should not be construed as reflecting the opinion of the speakers.

Walt Ritscher

  • LinkedIn Learning – online video training (formerly
  • Content available on both sites
  • 7100 courses
  • @WaltRitscher

Executive Summary

  • Showing data visually can make patterns and trends suddenly very obvious
  • Varying graphical data items’ size, color, position, contrast or shape can make a big difference in how a user views the data
  • Review of various data visualization tools and some examples of graphs

Your Data

  • We all have various data sources and lots of data
  • Big Data – lots of data
    • Gathering at unprecedented rate
    • Many sources–sensors, online transactions, medical, tweet streams
  • If you don’t use/analyze data, you’re a hoarder
    • Stored data is inert
    • Need to make it Actionable
  • Raw data can be hard to understand
    • E.g. Big spreadsheet
    • “Wall of text”


  • Bring human optical system into picture
  • Visual recognition is 60,000x faster than text recognition

Example – Anscombe’s Data

  • 4 sets of XY data, with averages and std deviation
  • Visually view same data
  • We see patterns
  • And pattern anomalies

Demo – Differences – Test

  • Changes to hue, saturation, size of object
  • Change shape–quickly recognize
  • Can’t find difference if original shapes very different


  • Size
  • Color
  • Position
  • Contrast
  • Shape

Highlight Differences with 5D

  • Use one of the differentiators to highlight a difference
  • If original set is uniform in shape, but different colors, you’d differentiate by shape to make it stand out
  • Counting # instances of “8” shape
  • Could colorize rectangles around digits
    • Heat map
    • Easy to spot area with higher numbers
  • Or could change size of shape by value
    • Bubble chart
    • Easy to see high growth
    • But harder to see actual numeric data

A Word about Colors

  • Chart–happy customers green, angry red
  • Don’t use green/red
  • Problem–green/red color-blindness about 10% can’t differentiate
  • Could do Blue / Red–easier to differentiate (99.5% population)
  • Example–colorizing heatmap
    • Which colors seem to be “higher” value color
    • Brain doesn’t do this
  • Rule: don’t differentiate by Hue
    • Differentiate by Saturation or Lightness

Motion and Animation

  • Demo – slightly changing something, moving something slightly on screen
  • Your brain sees the motion
    • Can see something moving even 1-2 pixels
  • Can animate data, showing stuff in sequence
  • If you have time-stamped data, consider animating that

Warning–eyes can be deceived

  • With a lot of lines, you can’t see more than a couple black dots
  • Pie chart – 30% slice looks smaller if it’s in the back
    • Never use 3D pie chart
  • Displaying change in one variable using area or volume
    • Showing relative sizes using area–doesn’t work

Terminology – The Buzzwords

  • Categories of visualization
    • Data Visualization – show data via graphical
    • Infographic – design friendly approach to visualization
    • Motion Graphics or Animated – use motion to accentuate

Data Viz Categories

  • Business tools – Excel
    • Excel continues analysis engine
    • Can launch in background and generate results or chart
    • Could take screenshot in the background
  • Drawing tools – Illustrator
  • Code tools – Visual Studio

Data Viz Tools

  • Processing – programming language
  • ProcessingJS
  • Tableau
  • D3.js
  • R – language to manipulate data (no viz)

Data Viz Browser Tools

  • SVG
  • 2D Canvas
  • WebGL


  • Sideways bar chart
  • Excellent
  • Web site allowing you to pull data out ( ?


  • Glasswire – exploring data
    • Timeline with sliders
    • Nice alternative to having two calendar dropdowns


  • Designer-friendly approach to data visualization
  • View uploads by category
    • Wedges in triangle
    • “Umbrella graph” ?
    • Callout coming out of wedge

Motion Graphics

  • NASA Perpetual Ocean
    • Latitude, Longitude
    • Flow direction & speed
    • Timestamp


  • Visualization Data
  • Tufte


  • Time-tested concept but still useful
  • Have done bar and line charts forever
  • But lots of new charts out there
  • New charts
    • Waffle chart–boxes
    • Hierarchical Edge Bundling–connecting nodes, bezier curves, trends pop out
    • Adjaceny matrix–e.g. Les Miserables Co-occurrence; awesome animation
  • D3.js
  • Bret Victor