Practical Considerations for Displaying Quantitative Data

Cory LownNCSU Libraries

Maryland SLA21 October 2010

Outline

• History and context• Things to consider• Good questions• What is data?• What kind of chart?• Visual perception

• Data visualization tools• Where to learn more

History and context

16,500 BCE

6,200 BCE

950

1637

1786

1991 – in Maryland

2005

Data visualization isn't new

What is new

1. Amount of data

1. Computer processing ubiquity

2. Desktop and Web applications

Computers are useless. They can only give you answers.

— Pablo Picasso

Good questions

Untitled Image Layout

• Image of something built

Untitled Image Layout

• Image of a tool

What is

data?

*See Stephen Few's Show Me the Numbers

155,741

155,741Searches

Quantitative information always expresses

relationships

Quantitative relationships are:

1. An association between quantitative values and categories

1. Associations among multiple sets of quantitative values

Relationships among quantities

• Nominal comparison• Time series• Ranking• Part to whole (%)• Deviation• Distribution• Correlation

What kind

of chart?

*See Stephen Few's Show Me the Numbers

Charts

• Tables

• Graphs

Tables

• Look up individual values

• Compare individual values

• Precision is important

• Multiple units of measure

A table with mixed units

Graphs

• Meaning is revealed by the shape of the values

• Show relationships among many values

1 of 13,000 pages of data

Same data in a graph

Visual

perception

*See Stephen Few's Show Me the Numbers and Christopher G. Healey's Perception in Visualization

http://www.csc.ncsu.edu/faculty/healey/PP/index.html

Sti

mulus

Sti

mulation

Perception

Preattentive processing

Extremely fast, pre-conscious visual processing

Example

9128732198432789543287

6784905043267812837698

7843928364382398731092

3478957438298374209123

0980934591283754845645

8934678238328009748349

Example

9128732198432789543287

6784905043267812837698

7843928364382398731092

3478957438298374209123

0980934591283754845645

8934678238328009748349

Some preattentive attributes

Form:• Orientation• Line length• Line width• Size• Shape• Curvature• Added marks• Enclosure

Color:• Hue• Intensity

Spatial Position:• 2D

Some preattentive attributes

Form:• Orientation• Line length• Line width• Size• Shape• Curvature• Added marks• Enclosure

Color:• Hue• Intensity

Spatial Position:• 2D

Some preattentive attributes

Form:• Orientation• Line length• Line width• Size• Shape• Curvature• Added marks• Enclosure

Color:• Hue• Intensity

Spatial Position:• 2D

Scatterplot

• Correlation• Nominal comparisons

Line chart

• Time series• Deviation• Distribution

Bar chart

• Nominal comparison• Ranking• Part to whole• Deviation• Distribution

Stacked bar chart

• Part to whole

The humble pie chart

Is B or C larger?

3D effects distort 2D proportions

Advice from Edward Tufte

• Show the data• Make large datasets coherent• Emphasize substance over method• Don't distort• Reveal several levels of detail• Serve a clear purpose

Data visualization tools

Google

Docs

Untitled Image Layout

Untitled Image Layout

Untitled Image Layout

Many

Eyes

Many

Eyes

Many

Eyes

Many

Eyes

Many

Eyes

Google

Visualization

API

Untitled Image Layout

Untitled Image LayoutSome JavaScript – not so bad, right?

Untitled Image Layout

Web tools (no coding)

• Google Docs/Gadgets* http://docs.google.com/

• Many Eyes http://manyeyes.alphaworks.ibm.com/manyeyes/

Web tools (coding)

• Google Visualization API* http://code.google.com/apis/visualization/documentation/gallery.html

• Protovis* http://vis.stanford.edu/protovis/• Flotr

http://www.solutoire.com/experiments/flotr/examples/

• Flot http://people.iola.dk/olau/flot/examples/

Web tools (coding)

• MIT Simile widgets http://www.simile-widgets.org/

• Rgraph http://www.rgraph.net/• jQuery Visualize

http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with

Desktop apps (easier to use)

• OpenOffice Spreadsheet / MS Excel• Adobe Illustrator• OmniGraffle (diagramming - Mac)• Visio (diagramming – PC)

Desktop apps (harder to use)

• GraphViz (network graphs)• JMP (stats)• R (stats)• Processing* http://processing.org/

Where to learn

more

Books

• Show Me the Numbers* (Few, 2004)• Now You See It (Few, 2009)• The Visual Display of Quantitative

Information (Tufte, 1983)• Beautiful Data (Segaran

& Hammerbacher, 2009) • Visualizing Data (Fry, 2008)

Websites

• http://flowingdata.com• http://infosthetics.com/• http://www.visualcomplexity.com/vc/• http://www.gapminder.org/• http://www.visualizing.org/• http://understandinggraphics.com/

Thanks!

Cory LownDigital Technologies Development Librarian

NCSU Libraries

cory_lown@ncsu.edu