DATA VISUALIZATION TOOLS

November 17th, 2017

Teaching Assistant: Anum Masood

SEIEE

Data can help in telling a great story, but data alone will never tell the whole story.

Example of Visualizing Data

• Following graph shows various combinations of usage and CPU for each category

– acceptable – problematic – low value – unacceptable

Question #1

How do UNC-curated titles scatter across these categories across TRLN?

Question #2

How do all the titles in the collection scatter across these categories for TRLN?

Pies Question: • How do all the titles in the

collection scatter across these categories for TRLN?

Issues: • Everything is treated as a

proportion • Values only available via labels • Hard to compare areas/angles • Gets confusing past 4-5 categories

Stephen Few on Pie Charts: Save the Pies for Dessert

817, 66%

159, 13%

113, 9%

95, 8%

55, 4%

Value of All TRLN Titles to TRLN

Good

Acceptable

Problematic

Low

Unacceptable

The World’s Most Accurate Pie Chart

http://visual.ly/literal-pie-chart

Idea: Accuracy and Human Perception

• We can use these rankings to assess whether a given graphical form is more or less effective than another at communicating accurately perceived values to the reader.

• However, context and audience as judged by the designer, can overrule these rankings.

• Maximizing visual accuracy doesn’t have to be your primary goal.

Mackinlay, J. (1986) Automating the design of graphical presentations of relational information.ACM Trans. Graph. 5, 2 (April)

Pie Alternatives

Quality Titles Percentage

Good 817 65.9%

Acceptable 159 12.8%

Problematic 113 9.1%

Low 95 7.7% Unacceptable 55 4.4%

817

159 113 95

55

0

100

200

300

400

500

600

700

800

900Value of UNC-UNL curated titles to TRLN

Question #3

How did the titles scatter across these benchmarks in 2010 vs. 2014?

0

200

400

600

800

1000

1200

1400

1600

Good Acceptable Problematic Low Unacceptable

2010 vs. 2014 Benchmark Distribution

2010 # of titles 2014 # of titles

Stacked Charts Question: • How did the titles scatter across

these benchmarks in 2010 vs. 2014?

Issues: • What does the overall height

mean? • How many titles were

unacceptable in 2014? • Visual Math

Before:

0

200

400

600

800

1000

1200

1400

1600

Good Acceptable Problematic Low Unacceptable

2010 vs. 2014 Benchmark Distribution

2010 # of titles 2014 # of titles

Alternatives:

• Height always encodes single year

• Slope of each line emphasizes different rates of change

0

100

200

300

400

500

600

700

800

900

Good Acceptable Problematic Low Unacceptable

2010 vs. 2014 Benchmark Distribution

2010 # of titles 2014 # of titles

0

100

200

300

400

500

600

700

800

900

2010 # of titles 2014 # of titles

2010 vs. 2014 Benchmark Distribution

Good Acceptable Problematic

Low Unacceptable

Question #4

How many e-books were used year over year?

Question #5

How does the ratio of books used vs available change over time?

Backgrounds Question: • How does the ratio of books used

vs available change over time? Issues: • Hard to read values on dots • Data doesn’t contrast highly with

background

39%

22%

29%

38% 37%

2010 2011 2012 2013 2014

Ratio of Books Used/Available, 2010-2014

Data-Ink (Edward Tufte)

Maximize (within reason): 𝐼𝐼𝐼𝐼𝐼𝐼 𝑢𝑢𝑢𝑢𝑢𝑢𝑢𝑢 𝑡𝑡𝑡𝑡 𝑢𝑢𝐼𝐼𝑒𝑒𝑡𝑡𝑢𝑢𝑢𝑢 𝑢𝑢𝑑𝑑𝑡𝑡𝑑𝑑 𝑣𝑣𝑑𝑑𝑣𝑣𝑢𝑢𝑢𝑢𝑢𝑢

𝑇𝑇𝑡𝑡𝑡𝑡𝑑𝑑𝑣𝑣 𝑖𝑖𝐼𝐼𝐼𝐼 𝑖𝑖𝐼𝐼 𝑣𝑣𝑖𝑖𝑢𝑢𝑢𝑢𝑑𝑑𝑣𝑣𝑖𝑖𝑣𝑣𝑑𝑑𝑡𝑡𝑖𝑖𝑡𝑡𝐼𝐼

39%

22%

29%

38% 37%

0%

5%

10%

15%

20%

25%

30%

35%

40%

45%

2010 2011 2012 2013 2014

Ratio of Books Used/Available, 2010-2014

39%

22%

29%

38% 37%

0%

5%

10%

15%

20%

25%

30%

35%

40%

45%

2010 2011 2012 2013 2014

Ratio of Books Used/Available, 2010-2014

39%

22%

29%

38% 37%

2010 2011 2012 2013 2014

Ratio of Books Used/Available, 2010-2014

TOOL LANDSCAPE

• Spreadsheets • In-browser tools • Business Intelligence

Tools • Coding • Design

Spreadsheets e.g. Microsoft Excel, LibreOffice, Open Office • Pros:

• You probably already have it • Your data probably passes

through it already • Secure • Already integrated in workflows

• Cons: • Software not primarily designed

for visualization • Static and local

In-Browser General: Plot.ly, Datawrapper, Raw, Timeline.js Mapping: ArcGIS Online, CartoDB • Pros:

• Often easiest, most accessible, quickest

• Often free or cheap • Many tools available • Specialized tools like ArcGIS Online

• Cons: • Most subject to change (or

disappearance) • Inflexibility

• Specialized functionality • Strict data format needs • Dependence on other software

• Too many options • Full benefits require a more

advanced tool • ArcMap • QGIS

Plot.ly

ArcGIS Online

Business Intelligence e.g. Tableau, Qlik, SAS Visual Analytics • Pros:

• Flexible, but don’t require much if any coding

• Point and click interfaces • Good support/frequent updates • Some free public options

• Cons: • Most expensive

• IT support for large implementations

• Business-oriented user communities

https://public.tableau.com/s/gallery/fatal-drug-overdose-rates-united-states

Tableau

Coding e.g. JavaScript(D3.js), R(ggplot2), Python • Pros:

• Generally Free • If you have the time to learn it

• Most flexible and powerful

• Cons: • Multiple languages necessary • Need to hire developer(s) • Time-intensive

http://bl.ocks.org/mbostock/4060954

D3.js

Design e.g. Adobe Creative Suite, Inkscape • Pros:

• Most aesthetically oriented • Can be combined with other

tools

• Cons: • Expensive • Not data-oriented

• ‘Infographic effect’

• Static

http://icharts.net/blogs/2013/spotlight-interview-unique-approach-infographics-journalism-alberto-cairo

Adobe Illustrator

Learn more: Theory Practice

Edward Tufte: The Visual Display of

Quantitative Information (2001)

Visual Explanations (1997) Envisioning Information

(1990) Colin Ware: Information Visualization:

Perception for Design (2004)

Stephen Few: Show Me the Numbers (2004) Information Dashboard

Design (2006) Now You See It (2009) Alberto Cairo: The Functional Art (2012)

Learn more: Tools

• Tool lists: – http://dirtdirectory.org/ – http://selection.datavisualiz

ation.ch/ • Map Galleries

– CartoDB: https://cartodb.com/gallery/ – ArcGIS Online: http://www.arcgis.com/home/gallery.html#c=esri&t=maps&o=avgrating

• Sample Galleries – D3: https://github.com/mbostock/d3/wiki/Gallery – Tableau: https://public.tableau.com/s/gallery – Plot.ly https://plot.ly/feed/