“Ace of Charts” Webinar: FileMaker-Native Graphs

Lee Lukehart SavvyData Inc.

Facts about Lee

  Certified Developer, FileMaker 11/10/9/8/7

  Authorized Trainer, FileMaker 11/10/9/8/7

  FBA member since 2002 (FSA)

  Practicing consultant

  Datavis enthusiast

Assumptions about You

  Experienced FileMaker Pro developer

  Not a graphic designer

  Want to produce effective graphs

  for management vs. marketing and for business vs. science

This web seminar…

will offer:

A bit of theory

A bit of how-to

Alerts to “gotchas”

Cool techniques

will not present:

Dogma

Charting basics

Schema design

Detailed calcs

Visual is our dominant modality

  We evolved biologically to rely primarily on sight

  >50% of the brain is used for visual processing

  We use visual metaphors to understand our world

  Visualization is everywhere we look! (pun intended)

Visualization Classifications

http://www.visual-literacy.org/periodic_table/periodic_table.html

Visualization Classifications

http://www.visual-literacy.org/periodic_table/periodic_table.html

Native Charts Types in FileMaker Pro

  Bar

  Horizontal Bar

  Line

  Area

  Pie

Composite Charts in FileMaker Pro

  Bullet

  Sparkline

  Horizon

  Gauge

download demo files of these techniques from savvydata.com/resources/

Purpose of Charting

  Discern relationships between data points or series

  Identify patterns, trends and exceptions

  Evoke a story about the data

  Engage » Inform » Induce Decision/Action

Problems with Charts

  Can be Confusing

  Can be Boring

  Can be Inaccurate and Misleading

  Can be Ineffective and Worthless (or worse)

To be compelling, efficiently display meaningful and unambiguous data.

Example

A

Identify a pattern, trend or exception:

Example

B

Identify a pattern, trend or exception:

Example

C

Identify a pattern, trend or exception:

Example

Example

D

Identify a pattern, trend or exception:

Example

D Evokes a Story

Identify a pattern, trend or exception:

Example

E

Identify a pattern, trend or exception:

Example

Truly Tells the Story

To be compelling, efficiently display meaningful and unambiguous data.

E

Identify a pattern, trend or exception:

Example

Truly Tells the Story

To be compelling, efficiently display meaningful and unambiguous data.

E

Identify a pattern, trend or exception: Stacking is now respectable*…

*overlaying elements is a beneficial charting technique

How to Produce an Effective Chart

1.  Know when not to chart (a table or list may be preferable)

2.  Know your data (source, scope… clean & complete?)

3.  Consider your audience (their needs & familiarity)

4.  Determine chart’s message or focus

5.  Select an effective chart type (to best convey message)

6.  Construct data transforms (aggregate/augment, as needed)

7.  Conduct pre-flight checklist (for QA & K.I.S.S. testing)

Know when not to chart

53%* of 2010 class is female

*dataset 98% complete

the chart in this example is a waste of space

Know your data

Example

Four sets of data that produce identical statistics can look quite different when graphed...

(Anscombe’s Quartet)

  Ranking comparison (ordered by size or quantity)

  Categorical/Nominal comparison (no inherent natural order)

  Time series, Ordered intervals (contiguous X-axis values)

  Proportion of the Whole (contribution/composition)

  Variance/Deviation (to goal, history or other reference value)

  Distribution (frequency, range, concentration)

  Correlation (causation, dependent variable, pattern echo)

Common uses for business charts:

Select the best chart type for the message

  Bar, Vertical

  Bar, Horizontal

  Line

  Area

  Pie

To rank items, show counts, magnitudes, discrete frequency distributions; to compare different categories or one category under varied conditions; Horizontal especially suited for displaying many categories or when category labels are lengthy

To show contiguous change and other functional relationships over time; good for multiple data series; slope of line between points conveys “shape”; Area charts additionally suggest cumulative values

To represent ratios and relative proportions; inherently conveys composition and contribution

Composite Charts in FileMaker Pro

  Bullet

  Sparkline

  Horizon

  Gauge

Composite Charts in FileMaker Pro

  Bullet graphs

stac

king

ord

er —

>

invented by Stephen Few “horizontal bar charts on steroids”

conveys several data points qualitatively

Composite Charts in FileMaker Pro

  Sparklines invented by Edward Tufte “data-intense, design-simple, word-sized graphics”

+10%

0

–10%

+5%

0

–5%

compact but informative with high data density

Conveys the “shape” of data over time

Can present as area chart; colorize for further +/– clarity:

Composite Charts in FileMaker Pro

  Horizon charts

stac

king

ord

er —

>

an atypical chart type (inverted negative scale); requires viewer familiarity

“extremely dense information packing”

Construct data transforms as needed

  Aggregate: summarized total, count, average, running average

  Segment: derive subset attributes (e.g. month name, price tier)

  Factor: inflation-adjusted, year-to-year change, time-shifting

  Augment: extend data with truly new data (via web services, etc.)

  Find: full year, by category, include/omit “others”

  Organize/Sort: for display, e.g. multiple years by month

Derive new data to tell the real story

Chart Palettes

Normal vision Simulated red-green blind

First 20 colors of each FMP 11 palette First 20 colors of each FMP 11 palette

Color Blindness

Normal vision Simulated red-green blind

Usability resources: Photoshop CS4+ Vischeck.com Colorschemedesigner.com Etre.com

Cognitive Tendencies We have difficulty discerning volumes and angles

How easily can you rank the following slices by size?

How about the bars?

Cognitive Tendencies We are often fooled by “obvious” attributes

What is the difference between these two charts?

Cognitive Tendencies

non-zero Y-axis scale minimum

Misleading Accurate and Truthful

What is the difference between these two charts?

We are often fooled by implied attributes

Chart Scaling in FileMaker Pro

notice the scale range when the spread (low-to-high range of values) is ≥20%

Chart Scaling in FileMaker Pro

charts dynamically scale when the value spread is <20%

(assuming y-axis scale min-max is not set)

Chart Scaling in FileMaker Pro

notice the largest value is 90% of the scale max

Chart Scaling in FileMaker Pro

auto-scale expands when a value is >90% (or <14%) of scale range

Charting Pre-flight Checklist   No chart/multiple charts considered

  Human factors accounted for

  Chart has clear message or focus

  Chart type matches message

  Data integrity confirmed

  Min-max scale covers plotted data

  Y-Axis label: units matches data

  Y-Axis starts at zero (or has reason not to)

  Pie charts have 7 or fewer slices

  Data sorted correctly Pie chart slices in decreasing size Bar charts by rank or name order Time series complete and in sequence

  Audience attributes considered

  Sources footnoted for credibility

  Data selection criteria documented

  Last update & author info optionally noted

  Chart title lists data source & data range

  Descriptors (titles, legend, labels) complete

  Legible font face, size and color

  Color consistently applied

  Info “chunked”: overview first, then detail

  Each element serves a clear purpose

  High data/ink ratio — chartjunk removed

  Other design principles applied as needed

Q & A

  Additional resources: – demo files at savvydata.com/resources/