#datavizinsixweeks, week 2 - viz types

#DataVizInSixWeeksCopyright Anne Stevens

Viz types


Week One

What is data visualization? Historical context

Week Four

Design issues & best practices

Week Two

Visualization typesWeek Five

Big data, data management

Week Three

Perception and cognitionWeek Six

Synthesis

Data Viz In Six WeeksAn Introduction to Visual Analytics course taught at OCAD University, Toronto

By Anne Stevens


Not all viz types are created equal

Anne Stevens


Taxonomy of viz types


Flows


Time series

Charles Minard, Napoleon’s March on Moscow. 1869http://en.wikipedia.org/wiki/File:Minard.png


Time series

Twitter StreamGraph for Kleenexthoughtgadgets.com/beyond-sentiment-analysis/


Clocks, spirals

Spiral Clock. emn.fr/z-info/spiraclock (top left). Doug McCune. Visualizing Cyclical Time. dougmccune.com/blog/2011/04/21/visualizing-cyclical-time-hour-of-day-charts/ (Top Right).. Doublas Ian Scott. Africa’s Population Growth from 0 AD to 2050 AD. visualizing.org/visualizations/africas-population-growth-0-ad-

2050-ad-combined-maddison-and-united-nations-data (Bottom Left).

http://www.emn.fr/z-info/spiraclock/

http://www.emn.fr/z-info/spiraclock/

http://www.visualizing.org/visualizations/africas-population-growth-0-ad-2050-ad-combined-maddison-and-united-nations-data

http://www.visualizing.org/visualizations/africas-population-growth-0-ad-2050-ad-combined-maddison-and-united-nations-data


Waterfall diagram

www.cimaglobal.com/


Balloon race diagram

Hans RoslingGapminder.org

http://www.gapminder.org/videos/200-years-that-changed-the-world-bbc/#.VBigwS5dUSQ

http://www.gapminder.org/videos/200-years-that-changed-the-world-bbc/#.VBigwS5dUSQ


Thread arc diagram

visualcomplexity.com


Thread arc diagrams

Martin Wattenberg, The Shape of Song.turbulence.org

http://www.turbulence.org/Works/song/gallery/gallery.html



Martin Wattenberg, The Shape of Song.turbulence.org



#DataVizInSixWeeksCopyright Anne StevensCopyright Anne

Stevens 2014

mailto:http://www.turbulence.org/Works/song/gallery/gallery.html

mailto:http://www.turbulence.org/Works/song/gallery/gallery.html


Sankey diagram

Info Design Patternsniceone.org


Trends


Line chart

climate4you.com/GlobalTemperatures.htm


Sparklines

easynotecards.com


Sparklines: small multiples


Relationship


Scatterplot

docs.enthought.com


Venn diagram


Node-link diagram

c/o Fanny Chevalier


Topographic map

Tube map, 1908http://en.wikipedia.org/wiki/Tube_map


Topologic map

Harry Beck’s original Tube map, 1933http://britton.disted.camosun.bc.ca/beckmap.htm


Tree


Word tree

Word Treeopenbible.info/blog/2007/09/visualization-genesis-word-trees/


Circular tree

c/o Fanny Chevalier


Icicle tree Sunray tree

c/o Fanny Chevalier


Composition


Pie chart


Pies: the lowest form of visualization


Glyph

Glyph-Based Video Visualization for Semen AnalysisB. Duffy, et al. TVCG 2014 (VIS2014, Friday)

VSL: Straight Line Velocity(radius and colour)

VAP: Average Path Velocity(radius)

VCL: Curvilinear Velocity(radius)

LIN*: VSL/VCL

WOB*: VAP/VCL

STR*: VSL/VAP

ALH: Amplitude of Lateral Head Displacement (length)

BCF: Beat-Cross Frequency (length/circumference)

MAD: Mean Angular Displacement (angle)

SLD: Straight Line Direction(shape orientation)

HP: Head Position(center position)HW: Head Width

(shape width)HL: Head Length(shape length)

HR: Head Rotation(shape orientation)

Uncertainty(colour)

FTA: Total ProjectedArclength of Filament

FCA: Change-in-Angle of Filament

FTT: Total Torque of Filament (thickness)

FAS: Asymmetry of Filament(angular displacement)

V0: Zero Velocity(fixed radius)


Glyph-Based Video Visualization for Semen AnalysisB. Duffy, et al. TVCG 2014 (VIS2014, Friday)


Ring chart

infodesignpatterns.com


Treemap

Jean-Daniel Feketehttp://www.cs.umd.edu/hcil/VisuMillion/


Map of the Marketmarketwatch.com/tools/stockresearch/marketmap

http://www.marketwatch.com/tools/stockresearch/marketmap

http://www.marketwatch.com/tools/stockresearch/marketmap


Comparison


Bar chart

Enrico Bertini. Fell in Love With Databit.ly/infovis14-l2


Bullet chart

wikipedia.org


Stacked area chart

Martin Wattenberg, Baby Name Voyager. 2005babynamewizard.com/voyager

http://www.babynamewizard.com/voyager#prefix=&sw=both&exact=false

http://www.babynamewizard.com/voyager#prefix=&sw=both&exact=false

http://www.babynamewizard.com/voyager

http://www.babynamewizard.com/voyager


Parallel coordinates diagram

Data Stories, Ownership of Assets and Amenities by District (Proportion of Households)http://datastories.in/

http://datastories.in/blog/page/2/





Star plot

Tulip software c/o Fanny Chevalier


Radar chart, spider chart

codeproject.com


Coxcomb diagram

Diagram of the causes of mortality in the army in the East. Florence Nightengale. 1858 decohan.wordpress.com/2011/10/07/nature-of-visualisation

Grey = disease. Pink = battle wounds. Black = other causes


Matrix

Charles Perin. The Bertifierbertifier.com

https://www.youtube.com/watch?v=tJxAF_a_yBQ

https://www.youtube.com/watch?v=tJxAF_a_yBQ


Dot matrix

Income Structure 2005, Net Income Distribution by Boroughinfodesignpatterns.com


Matrix of dot matrices

Political Party Landscape 2006. Number of Seats per Party and Borough Assemblyinfodesignpatterns.com


Matrices of any viz form


Small multiples

Jeffrey Heerhomes.cs.washington.edu/~jheer//files/zoo/


Distribution


Histogram

nikonians.org


Histogram


Box & whisker chart

maths.nayland.school.nz (left), wilsonmar.com (right)


Location based data


Maps

Paul ButlerVisualizing Friendship


Choropleth (thematic) maps

Borzu Taleia


Bubble maps

Borzu Taleia


Cartograms

World population. worldmapper.org/svg/map2/index.html (top) Alcohol & cigarette imports. worldmapper.org/display.php?selected=56 (botom)

http://worldmapper.org/index.html

http://worldmapper.org/index.html


Hybrids & composites


Online resources

A Tour Through the Visualization Zoo, Jeffrey Heer

hci.stanford.edu/jheer/files/zoo/

Info Design Patterns

www.niceone.org/infodesignpatterns/index.php5#/patterns.php5

Extreme Presentations

extremepresentation.typepad.com/blog/2006/09/choosing_a_good.html

http://homes.cs.washington.edu/~jheer/files/zoo/

http://homes.cs.washington.edu/~jheer/files/zoo/

http://www.niceone.org/infodesignpatterns/index.php5#/patterns.php5

http://www.niceone.org/infodesignpatterns/index.php5#/patterns.php5

http://extremepresentation.typepad.com/blog/2006/09/choosing_a_good.html

http://extremepresentation.typepad.com/blog/2006/09/choosing_a_good.html


Week One

What is data visualization? Historical context

Week Four

Design issues & best practices

Week Two

Visualization typesWeek Five

Big data, data management

Week Three

Perception and cognitionWeek Six

Synthesis

Data Viz In Six WeeksAn Introduction to Visual Analytics course taught at OCAD University, Toronto

By Anne Stevens

stevensanne.com

stevensanne.com/blog/

@3_ring_binder

#datavizinsixweeks, week 2 - viz types

Technology

torontoby anne stevens

data hybrid forms hierarchy

data visualization

trend location

cyclical time

equalanne stevens

typesdistribution time

shape of