Information Visualization
Katrien Verbert
Department of Computer Science
Faculty of Science
Vrije Universiteit Brussel
kat...
overview

1.	
  Examples	
  

2.	
  History	
  

3.	
  Defini7on	
  

4.	
  Principles	
  

5.	
  Workflow	
  

6.	
  Tools	...
Where people run?

hJp://flowingdata.com/2014/02/05/where-­‐people-­‐run/	
  
	
  

pag. 3
20/02/14
visual explorations of urban mobility

hJp://senseable.mit.edu/visual-­‐explora7ons-­‐urban-­‐mobility/touching-­‐bus-­‐ri...
professional network

hJp://inmaps.linkedinlabs.com/network	
  
pag. 5
	
  
20/02/14
Immersion

hJps://immersion.media.mit.edu/demo#	
  
	
  
pag. 6
20/02/14
Last.fm music history

hJp://www.frederikseiffert.de/lasthistory/	
  
	
  
pag. 7
20/02/14
Twitter sentiment
hJp://www.csc.ncsu.edu/faculty/healey/
tweet_viz/tweet_app/	
  
	
  

20/02/14

pag. 8
overview

1.	
  Examples	
  

2.	
  History	
  

3.	
  Defini7on	
  

4.	
  Principles	
  

5.	
  Workflow	
  

6.	
  Tools	...
Napoleon’s army drawn by Minard (1781-1870)

Source: http://www.napoleanic-literature.com, © John Schneider

20/02/14

pag...
•  Thickness of brown line is proportional to number of soldiers
(422,00 soldiers started out).
•  Black similarly encodes...
William Playfair
… and the line/area chart based on time series

20/02/14

pag. 12
William Playfair
…and the bar chart

20/02/14

pag. 13
Florence Nightingale’s diagram showing the dramatic reduction in death
rates in the hospitals of Scutari following the cha...
Map of Cholera by John Snow in 1854

• 
• 

• 

link between cholera and
water
cholera occurred among
those near the Broad...
London Underground Map by Harry Beck in 1933

•  Harry Beck’s London
Underground’s way
finding system is an
extraordinary ...
overview

1.	
  Examples	
  

2.	
  History	
  

3.	
  Defini7on	
  

4.	
  Principles	
  

5.	
  Workflow	
  

6.	
  Tools	...
information visualization
the use of computer-supported, interactive, visual
representations of abstract data to amplify c...
How many circles?

Slide	
  source:	
  Joris	
  Klerkx	
  

20/02/14

pag. 19
How many circles?

Humans have advanced perceptual abilities
Our brains makes us extremely good at recognizing visual patt...
Overview

Visualization
Scientific
visualization	
  

Slide	
  source:	
  John	
  Stasko	
  

	
  
	
  
	
  
	
  
	
  
	
 ...
Information visualization

Concerned with data that does not have a well-defined
representation in 2D or 3D space (i.e., “...
Scientific visualization

Specifically concerned with data that has a well-defined representation
in 2D or 3D space (e.g.,...
Also: visual analytics

hJp://www.visual-­‐analy7cs.eu/faq/	
  

20/02/14

pag. 24
Focus: information visualization

20/02/14

pag. 25
overview

1.	
  Examples	
  

2.	
  History	
  

3.	
  Defini7on	
  

4.	
  Principles	
  

5.	
  Workflow	
  

6.	
  Tools	...
some bad examples

20/02/14

pag. 27
What’s wrong with this graph?

Source: Stephen Few

20/02/14

pag. 28
Bar values should start at zero

Source: Stephen Few

20/02/14

pag. 29
Bad examples

hJp://flowingdata.com/category/sta7s7cs/mistaken-­‐data/	
  
Source: Joris Klerkx

20/02/14

pag. 30
Bad examples

hJp://flowingdata.com/category/sta7s7cs/mistaken-­‐data/	
  
Source: Joris Klerkx

20/02/14

pag. 31
What about 3D?

Source: Stephen Few

20/02/14

pag. 32
But what if there is a 3rd variable

Source: Stephen Few

20/02/14

pag. 33

20/0
PAG
How to display additional variables?

Source: Stephen Few

20/02/14

pag. 34
What about pie charts?

“Save the pies for dessert” (Stephen Few)

Source: Stephen Few

20/02/14

pag. 35
What makes these graphics bad?

20/02/14

pag. 36
Summary of Tufte’s Principles

"The success of a visualization is based on deep
knowledge and care about the substance, an...
design aesthetics

20/02/14

pag. 38
design aesthetics: five principles
1. 
2. 
3. 
4. 
5. 

Above all else show the data.
Maximize the data-ink ratio, within ...
Above all else, show the data

20/02/14

pag. 40
Above all else, show the data

20/02/14

pag. 41
Data-ink ratio

“A large share of ink on a graphic should present data
information, the ink changing as the data change. D...
Data-Ink Ratio

Data-ink ratio

=

data-ink
Total ink used to print graphic

=

Proportion of a graphic’s ink devoted to
t...
Data-ink ratio

20/02/14

pag. 44
What is the data-ink ratio?

20/02/14

pag. 45
What is the data-ink ratio?

< 0.05

20/02/14

pag. 46
What is the data-ink ratio of this graphic?

< 0.001

20/02/14

pag. 47
Five Principles
1.  Above all else show the data.
2.  Maximize the data-ink ratio.
–  Within reason
–  Every bit of ink on...
Maximize the data-ink ratio, within reason

(Tufte)

“A pixel
is a
terrible
thing to
waste.”
(Shneiderman)
Slide	
  source...
Five Principles
1. 
2. 
3. 
4. 
5. 

Above all else show the data.
Maximize the data-ink ratio, within reason.
Erase non-d...
Erase non-data ink

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 51
Erase non-data ink

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 52
Erase non-data ink

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 53
Erase redundant data-ink

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 54
Erase non-data ink

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 55
Erase redundant data-ink

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 56
Erase redundant data-ink

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 57
Erase redundant data-ink

20/02/14

pag. 58
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 59
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 60
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 61
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 62
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 63
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 64
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 65
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 66
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 67
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 68
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 69
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 70
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 71
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 72
Revise and edit

20/02/14

pag. 73
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 74
Revise and edit

	
  source:	
  Joey	
  Cherdarchuk	
  

20/02/14

pag. 75
“Perfection is achieved not when there is nothing more to
add, but when there is nothing left to take away”
– Antoine de S...
graphical integrity

20/02/14

pag. 77
Pseudo-decline

20/02/14

pag. 78
Lie factor
Size	
  of	
  effect	
  shown	
  in	
  graphic	
  
Lie Factor = --------------------------Size	
  of	
  effect	
 ...
Same data, simple graphic

20/02/14

pag. 80
Lie factor
• 

Use of area to portray 1D
data can be confusing
–  Area	
  has	
  2	
  dimensions	
  	
  

• 

The ‘incredi...
Lie factor
• 

Use of area to portray 1D data can be
confusing
–  Area	
  has	
  2	
  dimensions	
  	
  

• 

The ‘incredi...
overview

1.	
  Examples	
  

2.	
  History	
  

3.	
  Defini7on	
  

4.	
  Principles	
  

5.	
  Workflow	
  

6.	
  Tools	...
Workflow
• 
• 
• 
• 
• 
• 
• 

Acquire
Parse
Filter
Mine
Represent
Refine
Interact

Adapted	
  from	
  	
  Fry,	
  Visuali...
Workflow
•  Acquire

[p. 7, Fry, Visualizing Data]
Introduction to Information Visualization - Fall 2013

20/02/14

pag. 8...
Workflow
•  Parse

[p. Introduction to Information Visualization - Fall 2013
8, Fry, Visualizing Data]

20/02/14

pag. 86
Workflow
•  Filter/Mine

Introduction to Information Visualization - Fall 2013
[p. 10, Fry, Visualizing Data]

20/02/14

p...
Workflow
•  Represent

[p. 10, Fry, Visualizing Data]
Introduction to Information Visualization - Fall 2013

20/02/14

pag...
Workflow
•  Refine

[p. Introduction to Information Visualization - Fall 2013
12, Fry, Visualizing Data]

20/02/14

pag. 8...
Workflow
•  Interact

•  Demo

[p. 12, Fry, Visualizing Data]
Introduction to Information Visualization - Fall 2013

20/02...
Not the entire story!

20/02/14

pag. 91
overview

1.	
  Examples	
  

2.	
  History	
  

3.	
  Defini7on	
  

4.	
  Principles	
  

5.	
  Workflow	
  

6.	
  Tools	...
Visualization tools and APIs!
• 
• 
• 
• 
• 
• 
• 

Many Eyes
http://www-958.ibm.com/software/data/cognos/manyeyes/
Ggplot...
Many Eyes

http://www-958.ibm.com/software/
data/cognos/manyeyes/"

/ name of department

20/02/14

pag. 94
Tableau public

hJp://www.tableausocware.com/public/community	
  
	
  

20/02/14

pag. 95
Google chart: treemap example

hJps://developers.google.com/chart/
interac7ve/docs/gallery/treemap	
  
	
  

20/02/14

pag...
Simile Widgets
•  http://www.simile-widgets.org/

20/02/14

pag. 97

20/0
PAG
Timeplot
hJp://www.simile-­‐widgets.org/7meplot/docs/	
  
	
  

20/02/14

pag. 98

20/0
PAG
Processing.js
•  http://processingjs.org/

20/02/14

pag. 99

20/0
PAG
D3.js!
•  http://d3js.org/
•  demo: http://vimeo.com/29862153

20/02/14

pag. 100
D3 example treemap
hJp://bl.ocks.org/mbostock/4063582	
  
	
  

/ name of department

20/02/14

pag. 101

20/0
PAG
D3 resources
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

http://vimeo.com/m/35005701 - nice overview and run-through video/talk
h...
D3 support
•  Active community online
–  hJps://github.com/mbostock/d3/wiki	
  
–  Including	
  Mike	
  Bostock	
  ocen	
 ...
hJp://blog.profitbricks.com/39-­‐data-­‐visualiza7on-­‐tools-­‐for-­‐big-­‐data/	
  

20/02/14

pag. 104
overview

1.	
  Examples	
  

2.	
  History	
  

3.	
  Defini7on	
  

4.	
  Principles	
  

5.	
  Workflow	
  

6.	
  Tools	...
About me

20/02/14

pag. 106
About me

20/02/14

pag. 107
Teaching assistant
•  Sandra Trullemans
http://wise.vub.ac.be/sandra-trullemans

20/02/14

pag. 108
Required text book

20/02/14

pag. 109
Course goals

	
  

know	
  the	
  	
  
founda1ons	
  

learn	
  the	
  principles	
  of	
  
informa7on	
  visualiza7on	
 ...
Grading

	
  

Team	
  project	
  

build	
  an	
  interac7ve	
  visualiza7on	
  
in	
  teams	
  
	
  
	
  

	
  

	
  
	
...
Grading

	
  

Team	
  project	
  

build	
  an	
  interac7ve	
  visualiza7on	
  
in	
  teams	
  
	
  
	
  

	
  

	
  
	
...
Team project:
an interactive visualization
•  Teams of 3-4
•  Limited number of restrictions
•  Be creative!

20/02/14

pa...
Team project

•  hands-on experience of building interactive visualizations
•  using D3

20/02/14

pag. 114
Inspiration
• 

• 

Related courses
KU Leuven: http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course1314
Berkeley: http:/...
hJp://nycusefuldata.com/	
  
	
  
20/02/14 pag. 116
hJp://bit.ly/1fqy8yy	
  
	
  
	
  	
  
20/02/14

pag. 117
Datasets

hJp://websci14.org/#info	
  

20/02/14

pag. 118

20/0
PAG
Team project milestones
1. 
2. 
3. 
4. 
5. 

due	
  27	
  Feb.	
  
Form teams
due	
  13	
  March	
  
Project proposal
due	...
Project proposal
1 page description of your intended project:

–  mo7va7on	
  
–  which	
  datasets	
  you	
  will	
  use	...
Intermediate and final presentation
• 
• 
• 
• 

20 mins (15 mins presentations + 5 mins questions)
What is your project a...
Short report (max. 3 pages)
Motivation
Dataset
Visualization design and implementation
Reflection
–  How	
  is	
  your	
  ...
Grading

	
  

Team	
  project	
  

build	
  an	
  interac7ve	
  visualiza7on	
  
in	
  teams	
  
	
  
	
  

	
  

	
  
	
...
Research paper
•  Select papers from list available on pointcarré
–  Present	
  a	
  paper	
  of	
  your	
  choice	
  in	
...
Research presentation
•  Selected papers available on PointCarré
•  Select paper at: http://doodle.com/3ubzmy6fid4baqgk
• ...
Grading

	
  

Team	
  project	
  

build	
  an	
  interac7ve	
  visualiza7on	
  
in	
  teams	
  
	
  
	
  

	
  

	
  
	
...
Oral exam
•  40% of the grade
•  Closed book
•  Material:

–  Robert	
  Spence.	
  Informa7on	
  visualiza7on:	
  design	
...
Tentative schedule
week	
   date	
  

Lecture	
  	
  
14:00-­‐16:00	
  

WPO	
  
16:00-­‐18:00	
  

23	
  

20	
  Feb.	
  ...
Contact

Office	
  

	
  
Katrien:	
  10F721	
  
Sandra:	
  10G731e	
  

	
  
	
  

Email	
  

	
  
Katrien:	
  katrien.verb...
Questions?

20/02/14

pag. 130
5 minute paper
What do YOU expect from this course?

20/02/14

pag. 131
Additional examples
• 
• 
• 
• 
• 
• 

http://infosthetics.com/
http://visualizing.org
http://www.visualcomplexity.com/vc/...
Readings
•  Chapter 1 – 2

20/02/14

pag. 133
The beauty of data visualization - David
McCandless

hJp://www.youtube.com/watch?v=5Zg-­‐C8AAIGg	
  

	
  

20/02/14

pag....
Don’t forget
Form teams by 27 February

20/02/14

pag. 135
Next lecture:
perception and principles

20/02/14

pag. 136
References

•  Stuart K. Card, Jock D. Mackinlay, and Ben Scheiderman,
Academic Press, San Diego CA, 1999, p. 7

20/02/14
...
Upcoming SlideShare
Loading in...5
×

Information visualization - introduction

1,744

Published on

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,744
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
77
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Information visualization - introduction"

  1. 1. Information Visualization Katrien Verbert Department of Computer Science Faculty of Science Vrije Universiteit Brussel katrien.verbert@vub.ac.be 20/02/14 pag. 1
  2. 2. overview 1.  Examples   2.  History   3.  Defini7on   4.  Principles   5.  Workflow   6.  Tools  and   APIs   7.  Course  overview                         20/02/14 pag. 2
  3. 3. Where people run? hJp://flowingdata.com/2014/02/05/where-­‐people-­‐run/     pag. 3 20/02/14
  4. 4. visual explorations of urban mobility hJp://senseable.mit.edu/visual-­‐explora7ons-­‐urban-­‐mobility/touching-­‐bus-­‐rides.html     20/02/14 pag. 4
  5. 5. professional network hJp://inmaps.linkedinlabs.com/network   pag. 5   20/02/14
  6. 6. Immersion hJps://immersion.media.mit.edu/demo#     pag. 6 20/02/14
  7. 7. Last.fm music history hJp://www.frederikseiffert.de/lasthistory/     pag. 7 20/02/14
  8. 8. Twitter sentiment hJp://www.csc.ncsu.edu/faculty/healey/ tweet_viz/tweet_app/     20/02/14 pag. 8
  9. 9. overview 1.  Examples   2.  History   3.  Defini7on   4.  Principles   5.  Workflow   6.  Tools  and   APIs   7.  Course  overview                         20/02/14 pag. 9
  10. 10. Napoleon’s army drawn by Minard (1781-1870) Source: http://www.napoleanic-literature.com, © John Schneider 20/02/14 pag. 10
  11. 11. •  Thickness of brown line is proportional to number of soldiers (422,00 soldiers started out). •  Black similarly encodes the retreat (10,000 returned). •  Crossing of Berezina river. •  Temperature plot at the bottom. Source: Information Visualization Course, Katy Börner, Indiana University
  12. 12. William Playfair … and the line/area chart based on time series 20/02/14 pag. 12
  13. 13. William Playfair …and the bar chart 20/02/14 pag. 13
  14. 14. Florence Nightingale’s diagram showing the dramatic reduction in death rates in the hospitals of Scutari following the changes she introduced Source: Nightingale (1858)
  15. 15. Map of Cholera by John Snow in 1854 •  •  •  link between cholera and water cholera occurred among those near the Broad Street water pump removing the handle of the pump ended the neighborhood epidemic Source: Information Visualization Course, Katy Börner 20/02/14 pag. 15
  16. 16. London Underground Map by Harry Beck in 1933 •  Harry Beck’s London Underground’s way finding system is an extraordinary example of directional signage. •  Note the stylized angles (90 and 45 degrees) and the regular spacing between station stops. Source: Information Visualization Course, Katy Börner 20/02/14 pag. 16
  17. 17. overview 1.  Examples   2.  History   3.  Defini7on   4.  Principles   5.  Workflow   6.  Tools  and   APIs   7.  Course  overview                         20/02/14 pag. 17
  18. 18. information visualization the use of computer-supported, interactive, visual representations of abstract data to amplify cognition [Card et al. 1999] 20/02/14 pag. 18
  19. 19. How many circles? Slide  source:  Joris  Klerkx   20/02/14 pag. 19
  20. 20. How many circles? Humans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patterns Slide  source:  Joris  Klerkx   20/02/14 pag. 20
  21. 21. Overview Visualization Scientific visualization   Slide  source:  John  Stasko                         Information visualization   20/02/14 pag. 21
  22. 22. Information visualization Concerned with data that does not have a well-defined representation in 2D or 3D space (i.e., “abstract data”) Introduction to Information Visualization - Fall 2013 Slide  source:  Robert  Putman   20/02/14 pag. 22
  23. 23. Scientific visualization Specifically concerned with data that has a well-defined representation in 2D or 3D space (e.g., from simulation mesh or scanner). Introduction to Information Visualization - Fall 2013 Slide  source:  Robert  Putman   20/02/14 pag. 23
  24. 24. Also: visual analytics hJp://www.visual-­‐analy7cs.eu/faq/   20/02/14 pag. 24
  25. 25. Focus: information visualization 20/02/14 pag. 25
  26. 26. overview 1.  Examples   2.  History   3.  Defini7on   4.  Principles   5.  Workflow   6.  Tools  and   APIs   7.  Course  overview                         20/02/14 pag. 26
  27. 27. some bad examples 20/02/14 pag. 27
  28. 28. What’s wrong with this graph? Source: Stephen Few 20/02/14 pag. 28
  29. 29. Bar values should start at zero Source: Stephen Few 20/02/14 pag. 29
  30. 30. Bad examples hJp://flowingdata.com/category/sta7s7cs/mistaken-­‐data/   Source: Joris Klerkx 20/02/14 pag. 30
  31. 31. Bad examples hJp://flowingdata.com/category/sta7s7cs/mistaken-­‐data/   Source: Joris Klerkx 20/02/14 pag. 31
  32. 32. What about 3D? Source: Stephen Few 20/02/14 pag. 32
  33. 33. But what if there is a 3rd variable Source: Stephen Few 20/02/14 pag. 33 20/0 PAG
  34. 34. How to display additional variables? Source: Stephen Few 20/02/14 pag. 34
  35. 35. What about pie charts? “Save the pies for dessert” (Stephen Few) Source: Stephen Few 20/02/14 pag. 35
  36. 36. What makes these graphics bad? 20/02/14 pag. 36
  37. 37. Summary of Tufte’s Principles "The success of a visualization is based on deep knowledge and care about the substance, and the quality, relevance and integrity of the content." (Tufte, 1983) •  Tell the truth –  Graphical integrity •  Do it effectively with clarity, precision... –  Design aesthetics Source: Information Visualization Course, Katy Börner, Indiana University 20/02/14 pag. 37
  38. 38. design aesthetics 20/02/14 pag. 38
  39. 39. design aesthetics: five principles 1.  2.  3.  4.  5.  Above all else show the data. Maximize the data-ink ratio, within reason. Erase non-data ink, within reason. Erase redundant data-ink. Revise and edit. 20/02/14 pag. 39
  40. 40. Above all else, show the data 20/02/14 pag. 40
  41. 41. Above all else, show the data 20/02/14 pag. 41
  42. 42. Data-ink ratio “A large share of ink on a graphic should present data information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic...” (Tufte, 1983) 20/02/14 pag. 42
  43. 43. Data-Ink Ratio Data-ink ratio = data-ink Total ink used to print graphic = Proportion of a graphic’s ink devoted to the non-redundant display of datainformation. = 1.0 – proportion of graphic that can be erased without the loss of information 20/02/14 pag. 43
  44. 44. Data-ink ratio 20/02/14 pag. 44
  45. 45. What is the data-ink ratio? 20/02/14 pag. 45
  46. 46. What is the data-ink ratio? < 0.05 20/02/14 pag. 46
  47. 47. What is the data-ink ratio of this graphic? < 0.001 20/02/14 pag. 47
  48. 48. Five Principles 1.  Above all else show the data. 2.  Maximize the data-ink ratio. –  Within reason –  Every bit of ink on a graphic requires a reason 3.  Erase non-data ink, within reason. 4.  Erase redundant data-ink. 5.  Revise and edit. 20/02/14 pag. 48
  49. 49. Maximize the data-ink ratio, within reason (Tufte) “A pixel is a terrible thing to waste.” (Shneiderman) Slide  source:  Chris  North,  Virginia  Tech   20/02/14 pag. 49
  50. 50. Five Principles 1.  2.  3.  4.  5.  Above all else show the data. Maximize the data-ink ratio, within reason. Erase non-data ink, within reason. Erase redundant data-ink. Revise and edit. 20/02/14 pag. 50
  51. 51. Erase non-data ink  source:  Joey  Cherdarchuk   20/02/14 pag. 51
  52. 52. Erase non-data ink  source:  Joey  Cherdarchuk   20/02/14 pag. 52
  53. 53. Erase non-data ink  source:  Joey  Cherdarchuk   20/02/14 pag. 53
  54. 54. Erase redundant data-ink  source:  Joey  Cherdarchuk   20/02/14 pag. 54
  55. 55. Erase non-data ink  source:  Joey  Cherdarchuk   20/02/14 pag. 55
  56. 56. Erase redundant data-ink  source:  Joey  Cherdarchuk   20/02/14 pag. 56
  57. 57. Erase redundant data-ink  source:  Joey  Cherdarchuk   20/02/14 pag. 57
  58. 58. Erase redundant data-ink 20/02/14 pag. 58
  59. 59. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 59
  60. 60. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 60
  61. 61. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 61
  62. 62. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 62
  63. 63. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 63
  64. 64. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 64
  65. 65. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 65
  66. 66. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 66
  67. 67. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 67
  68. 68. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 68
  69. 69. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 69
  70. 70. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 70
  71. 71. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 71
  72. 72. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 72
  73. 73. Revise and edit 20/02/14 pag. 73
  74. 74. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 74
  75. 75. Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 75
  76. 76. “Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away” – Antoine de Saint-Exupery 20/02/14 pag. 76
  77. 77. graphical integrity 20/02/14 pag. 77
  78. 78. Pseudo-decline 20/02/14 pag. 78
  79. 79. Lie factor Size  of  effect  shown  in  graphic   Lie Factor = --------------------------Size  of  effect  in  data     Edward  Tu)e   The  Visual  Display  of   Quan7ta7ve  Informa7on   page  57   (27.5-­‐18.0)/18=53%  actual  increase   (5.3-­‐0.6)/0.6=783%  visual  increase   Lie  factor=783/53=14.8   20/02/14 pag. 79
  80. 80. Same data, simple graphic 20/02/14 pag. 80
  81. 81. Lie factor •  Use of area to portray 1D data can be confusing –  Area  has  2  dimensions     •  The ‘incredible’ shrinking family doctor –  Lie  factor  of  2.8   –  Plus  perspec7ve  distor7on   –  Plus  incorrect  horizontal  spacing   20/02/14 pag. 81
  82. 82. Lie factor •  Use of area to portray 1D data can be confusing –  Area  has  2  dimensions     •  The ‘incredible’ shrinking dollar •  A more accurate representation of the 1978 dollar would be about twice the size of the one in this chart 20/02/14 pag. 82
  83. 83. overview 1.  Examples   2.  History   3.  Defini7on   4.  Principles   5.  Workflow   6.  Tools  and   APIs   7.  Course  overview                         20/02/14 pag. 83
  84. 84. Workflow •  •  •  •  •  •  •  Acquire Parse Filter Mine Represent Refine Interact Adapted  from    Fry,  Visualizing  Data   Available  at:  hJp://it-­‐ebooks.info/book/143/     Introduction to Information Visualization - Fall 2013 20/02/14 pag. 84
  85. 85. Workflow •  Acquire [p. 7, Fry, Visualizing Data] Introduction to Information Visualization - Fall 2013 20/02/14 pag. 85
  86. 86. Workflow •  Parse [p. Introduction to Information Visualization - Fall 2013 8, Fry, Visualizing Data] 20/02/14 pag. 86
  87. 87. Workflow •  Filter/Mine Introduction to Information Visualization - Fall 2013 [p. 10, Fry, Visualizing Data] 20/02/14 pag. 87
  88. 88. Workflow •  Represent [p. 10, Fry, Visualizing Data] Introduction to Information Visualization - Fall 2013 20/02/14 pag. 88
  89. 89. Workflow •  Refine [p. Introduction to Information Visualization - Fall 2013 12, Fry, Visualizing Data] 20/02/14 pag. 89
  90. 90. Workflow •  Interact •  Demo [p. 12, Fry, Visualizing Data] Introduction to Information Visualization - Fall 2013 20/02/14 pag. 90
  91. 91. Not the entire story! 20/02/14 pag. 91
  92. 92. overview 1.  Examples   2.  History   3.  Defini7on   4.  Principles   5.  Workflow   6.  Tools  and   APIs   7.  Course  overview                         20/02/14 pag. 92
  93. 93. Visualization tools and APIs! •  •  •  •  •  •  •  Many Eyes http://www-958.ibm.com/software/data/cognos/manyeyes/ Ggplot2 http://ggplot2.org/ Tableau public http://www.tableausoftware.com/public/ Google Charts http://code.google.com/apis/chart/interactive/docs/gallery.html Simile Widgets http://www.simile-widgets.org/ Processing.js http://processingjs.org/ D3.js http://d3js.org/ 20/02/14 pag. 93
  94. 94. Many Eyes http://www-958.ibm.com/software/ data/cognos/manyeyes/" / name of department 20/02/14 pag. 94
  95. 95. Tableau public hJp://www.tableausocware.com/public/community     20/02/14 pag. 95
  96. 96. Google chart: treemap example hJps://developers.google.com/chart/ interac7ve/docs/gallery/treemap     20/02/14 pag. 96 20/0 PAG
  97. 97. Simile Widgets •  http://www.simile-widgets.org/ 20/02/14 pag. 97 20/0 PAG
  98. 98. Timeplot hJp://www.simile-­‐widgets.org/7meplot/docs/     20/02/14 pag. 98 20/0 PAG
  99. 99. Processing.js •  http://processingjs.org/ 20/02/14 pag. 99 20/0 PAG
  100. 100. D3.js! •  http://d3js.org/ •  demo: http://vimeo.com/29862153 20/02/14 pag. 100
  101. 101. D3 example treemap hJp://bl.ocks.org/mbostock/4063582     / name of department 20/02/14 pag. 101 20/0 PAG
  102. 102. D3 resources •  •  •  •  •  •  •  •  •  •  •  •  http://vimeo.com/m/35005701 - nice overview and run-through video/talk http://alignedleft.com/tutorials/d3/ - thorough d3 tutorials from an academic instructor and the author of the open OReilly book, "Interactive Data Visualization for the Web" (look for free preview link for the actual book draft https://github.com/mbostock/d3/wiki/Tutorials - big list of resources from the author of D3 https://github.com/mbostock/d3/wiki/API-Reference - well-done D3 documentation http://www.d3noob.org - free ebook with lots of tips and tricks, actively update http://www.jeromecukier.net/wp-content/uploads/2012/10/d3-cheat-sheet.pdf - cheat sheet for D3, also see parent site for blog post https://groups.google.com/forum/?fromgroups=#!forum/d3-js - D3 Google group http://bost.ocks.org/mike/selection/ - Guide to understanding selections, key part of D3. http://benclinkinbeard.com/talks/2012/NCDevCon/ - A talk, with interactive examples and code snippets, explaining d3 http://enjalot.github.com/dot-enter/ - A live-coding set of videos to walk through a lot of the basics http://enjalot.github.com/dot-append/ - A live-coding set of videos to walk through a lot of the basics (part 2) http://tributary.io/ - A fast prototyping lounge similar to CodePen to let you test your ideas out. Used by the enjalot fellow. Source: John Stasko 20/02/14 pag. 102
  103. 103. D3 support •  Active community online –  hJps://github.com/mbostock/d3/wiki   –  Including  Mike  Bostock  ocen  answering  ques7ons   •  In active development –  Though  the  cri7cal  features  are  unlikely  to  change   20/02/14 pag. 103
  104. 104. hJp://blog.profitbricks.com/39-­‐data-­‐visualiza7on-­‐tools-­‐for-­‐big-­‐data/   20/02/14 pag. 104
  105. 105. overview 1.  Examples   2.  History   3.  Defini7on   4.  Principles   5.  Workflow   6.  Tools  and   APIs   7.  Course  overview                         20/02/14 pag. 105
  106. 106. About me 20/02/14 pag. 106
  107. 107. About me 20/02/14 pag. 107
  108. 108. Teaching assistant •  Sandra Trullemans http://wise.vub.ac.be/sandra-trullemans 20/02/14 pag. 108
  109. 109. Required text book 20/02/14 pag. 109
  110. 110. Course goals   know  the     founda1ons   learn  the  principles  of   informa7on  visualiza7on                   Learn  about  exis1ng   techniques  and  systems     learn  about  exis7ng   techniques  and  systems,   and  their  effec7veness       develop  the  knowledge   to  select  appropriate   visualiza7on  techniques   for  par7cular  tasks         build       build  your  own     visualiza7ons     apply  theore7cal     founda7ons           20/02/14 pag. 110
  111. 111. Grading   Team  project   build  an  interac7ve  visualiza7on   in  teams                   Research  paper     present  research  paper  during   WPO  hours     +       prepare  3  ques7ons  about  a   second  paper           40%   20%   Exam     Oral  exam   Closed  book                   40%   20/02/14 pag. 111
  112. 112. Grading   Team  project   build  an  interac7ve  visualiza7on   in  teams                   Research  paper     present  research  paper  during   WPO  hours     +       prepare  3  ques7ons  about  a   second  paper           40%   20%   Exam     Oral  exam   Closed  book                   40%   20/02/14 pag. 112
  113. 113. Team project: an interactive visualization •  Teams of 3-4 •  Limited number of restrictions •  Be creative! 20/02/14 pag. 113
  114. 114. Team project •  hands-on experience of building interactive visualizations •  using D3 20/02/14 pag. 114
  115. 115. Inspiration •  •  Related courses KU Leuven: http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course1314 Berkeley: http://blogs.ischool.berkeley.edu/i247s13/ Columbia university: http://columbiadataviz.wordpress.com/student-work/   Other examples Information is beatiful: http://www.informationisbeautiful.net/2013/over-300-of-the-best-datavisualization/?utm_source=feedly Gap Minder World: http://www.gapminder.org/world Netflix Map http://www.nytimes.com/interactive/2010/01/10/nyregion/20100110netflix-map.html NYC Parking Map http://www.nytimes.com/interactive/2008/11/26/nyregion/ 20081128_PARKING.html How people spend their day http://www.nytimes.com/interactive/2009/07/31/business/20080801metrics-graphic.html 20/02/14 pag. 115
  116. 116. hJp://nycusefuldata.com/     20/02/14 pag. 116
  117. 117. hJp://bit.ly/1fqy8yy         20/02/14 pag. 117
  118. 118. Datasets hJp://websci14.org/#info   20/02/14 pag. 118 20/0 PAG
  119. 119. Team project milestones 1.  2.  3.  4.  5.  due  27  Feb.   Form teams due  13  March   Project proposal due  3  April   Intermediate presentation Final presentation Short report 22  May   due  29  May   20/02/14 pag. 119
  120. 120. Project proposal 1 page description of your intended project: –  mo7va7on   –  which  datasets  you  will  use   –  current  status.  If  available,  first  designs.   –  problems/ques7ons   due 13 March If you want earlier feedback, send us your proposal earlier ;-) 20/02/14 pag. 120
  121. 121. Intermediate and final presentation •  •  •  •  20 mins (15 mins presentations + 5 mins questions) What is your project about? Most important part final presentation: demo What have you learned when implementing the project? 20/02/14 pag. 121
  122. 122. Short report (max. 3 pages) Motivation Dataset Visualization design and implementation Reflection –  How  is  your  work  related  to  the  topics  taught  in  the  course?   –  If  you  would  start  over,  what  would  you  do  differently?   •  Effort –  How  much  effort  did  it  take  to  implement  the  project?     –  how  did  you  distribute  it  in  your  group?   •  •  •  •  20/02/14 pag. 122
  123. 123. Grading   Team  project   build  an  interac7ve  visualiza7on   in  teams                   Research  paper     present  research  paper  during   WPO  hours     +       prepare  3  ques7ons  about  a   second  paper           40%   20%   Exam     Oral  exam   Closed  book                   40%   20/02/14 pag. 123
  124. 124. Research paper •  Select papers from list available on pointcarré –  Present  a  paper  of  your  choice  in  class   –  Prepare  3  ques7on  about  a  second  paper   •  Topics: –  –  –  –  –  –  –  –  –  Trees   Hierarchies   Focus  +  context   Graphs   Time  series   Interac7on   Documents   Social  media   …   •  Individual assignment 20/02/14 pag. 124
  125. 125. Research presentation •  Selected papers available on PointCarré •  Select paper at: http://doodle.com/3ubzmy6fid4baqgk •  When all presentations are scheduled: select a second paper for questions. 20/02/14 pag. 125
  126. 126. Grading   Team  project   build  an  interac7ve  visualiza7on   in  teams                   Research  paper     present  research  paper  during   WPO  hours     +       prepare  3  ques7ons  about  a   second  paper           40%   20%   Exam     Oral  exam   Closed  book                   40%   20/02/14 pag. 126
  127. 127. Oral exam •  40% of the grade •  Closed book •  Material: –  Robert  Spence.  Informa7on  visualiza7on:  design  for  interac7on   –  Lecture  slides   –  Two  research  papers   •  Paper  from  presenta7on   •  Paper  you  asked  ques7ons  about   •  Example questions will be posted 20/02/14 pag. 127
  128. 128. Tentative schedule week   date   Lecture     14:00-­‐16:00   WPO   16:00-­‐18:00   23   20  Feb.   Introduc7on:  defini7on,  examples,   toolkits,  overview  assignments   24   27  Feb.   Percep7on  and  principles   25   6  March   Representa7on:  values  and  rela7ons   26   13  March   Presenta7on   presenta7ons   27   20  March   Interac7on   presenta7ons   28   27  March   Case  studies   presenta7ons   29   3  April   32   24  April   Informa7on  dashboards   presenta7ons   34   8  May   Visual  analy7cs   presenta7ons   35   15  May   No  lecture:  work  on  team  projects   36   22  May   Final  team  project  presenta7ons   Intermediate  team  project  presenta7ons   20/02/14 pag. 128
  129. 129. Contact Office     Katrien:  10F721   Sandra:  10G731e       Email     Katrien:  katrien.verbert@vub.ac.be   Sandra:  sandra.trullemans@vub.ac.be       20/02/14 pag. 129
  130. 130. Questions? 20/02/14 pag. 130
  131. 131. 5 minute paper What do YOU expect from this course? 20/02/14 pag. 131
  132. 132. Additional examples •  •  •  •  •  •  http://infosthetics.com/ http://visualizing.org http://www.visualcomplexity.com/vc/ http://visual.ly/ http://flowingdata.com http://www.infovis-wiki.net Introduction to Information Visualization - Fall 2013 20/02/14 pag. 132
  133. 133. Readings •  Chapter 1 – 2 20/02/14 pag. 133
  134. 134. The beauty of data visualization - David McCandless hJp://www.youtube.com/watch?v=5Zg-­‐C8AAIGg     20/02/14 pag. 134
  135. 135. Don’t forget Form teams by 27 February 20/02/14 pag. 135
  136. 136. Next lecture: perception and principles 20/02/14 pag. 136
  137. 137. References •  Stuart K. Card, Jock D. Mackinlay, and Ben Scheiderman, Academic Press, San Diego CA, 1999, p. 7 20/02/14 pag. 137
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×