1. University of Oslo Library
Hugo C. Huurdeman, 4 July, 2018
Clariah Summer School
Visualization lecture

2. This lecture’s program
• 0. A little bit of context (5 min)
• 1. Introduction to visualization (25 min)
• 2. The visualization process (10 min)
• 3. Supportive tools for visualization (15 min)
• 4. A practical example using a Media Suite export (30 min)
• After the coffee break, Carlos continues with visualization in Jupyter notebooks

3. 0. A little bit of context

4. Mikaela Aamodt | Dan Michael Heggø | Hugo Huurdeman | Helge Mjelde | Live Rasmussen | Heidi Rustad | Kyrre Låberg | Nina Thodesen
University of Oslo Library
bit.ly/VisualNavigationProject

6. Stream 2: Physical
Interaction
• Stream 1 & 3 build on top of
existing work and infrastructure
• Approach Stream 2:
experiment with novel ways of
interaction in physical space
• with library’s book collections
• experiments with a touch
table (Science Library)
• Includes an INF2260 project &
INF Master project Yaron Okun
Visualiza-
tion (1)
Picture: Marina Tofting

7. Clusters
color: representations of websites, size: number of crawls
Example w/Dutch Web archive

8. Clusters
color: representations of websites, size: number of crawls
Example w/Dutch Web archive

9. Word Clouds
size: number of sites
Example w/Dutch Web archive

10. Bar Charts
color: unesco category, size: avg change %
Example w/Dutch Web archive

11. Bar Charts
color: unesco category, size: avg change %
Example w/Dutch Web archive

12. Network (Force-directed)
connetions: unesco category, size: number of crawls
Example w/Dutch Web archive

13. Network (Force-directed)
connetions: unesco category, size: number of crawls
Example w/Dutch Web archive

14. 1. Introduction to visualization

15. Minard - Depicting events Russian military campaign by Napoleon (1812-13)
https://www.edwardtufte.com/tufte/minard

16. Saving lives: tracing the source of a cholera outbreak in Soho, London (1854)
map used to find cause of epidemic. Dr. John Snow
https://www1.udel.edu/johnmack/frec682/cholera/

17. Provide insights into scientific data: climate change “hockey stick” graph
Michael E. Mann, CC-BY, https://upload.wikimedia.org/wikipedia/commons/0/0a/Mann_hockeystick.jpg

18. Visualization?
• “A visualization is any kind of visual representation of information
designed to enable communication, analysis, discovery, exploration,
etc.” (Cairo, 2016)

19. Visualization?
• “A visualization is any kind of visual representation of information
designed to enable communication, analysis, discovery, exploration,
etc.” (Cairo, 2016)
• “The representation and presentation of data to facilitate understanding
(Kirk, 2016)

20. Visualization types?
• Davis (2009) distinguishes the following types of visualization:
• Statistical visualizations e.g. Supreme Court Justices
• Infographics e.g. An internet minute
• Maps e.g. New York Times immigration explorer
• Network visualizations e.g. Social network analysis visualization
• Artistic visualizations (“data as art”) e.g. “Forest of Numbers”

21. https://www.flickr.com/photos/idvsolutions/8806668702/sizes/o/in/photostream/

22. When to use visualization?
• Can be used throughout research process

23. When to use visualization?
• Can be used throughout research process
• initial exploration, get a grasp (exploratory)

24. When to use visualization?
• Can be used throughout research process
• initial exploration, get a grasp (exploratory)

25. When to use visualization?
• Can be used throughout research process
• initial exploration, get a grasp (exploratory)
• as an artefact of ongoing research (discovery)
• i.e. “as process”

26. When to use visualization?
• Can be used throughout research process
• initial exploration, get a grasp (exploratory)
• as an artefact of ongoing research (discovery)
• i.e. “as process”

27. When to use visualization?
• Can be used throughout research process
• initial exploration, get a grasp (exploratory)
• as an artefact of ongoing research (discovery)
• i.e. “as process”
• as an end product (explanatory)
• i.e. “as product / outcome”

28. (Cleveland 1985, as cited in Spence, 2016)
“Graphing data needs to be iterative because we often do not know
what to expect of the data; a graph can help discover unknown
aspects of the data, and once the unknown is known, we frequently
find ourselves formulating new questions about the data.”

29. Qualities of visualizations
• Cairo (2016) suggests a number of qualities of visualizations (which are often not
met in practice!)

30. Qualities of visualizations
• Cairo (2016) suggests a number of qualities of visualizations (which are often not
met in practice!)
• Functional It should depict data accurately, but also be useful to people

31. Qualities of visualizations
• Cairo (2016) suggests a number of qualities of visualizations (which are often not
met in practice!)
• Functional It should depict data accurately, but also be useful to people
• Beautiful A visualization should be ‘attractive’ to different audiences

32. Qualities of visualizations
• Cairo (2016) suggests a number of qualities of visualizations (which are often not
met in practice!)
• Functional It should depict data accurately, but also be useful to people
• Beautiful A visualization should be ‘attractive’ to different audiences
• Insightful It should reveal evidence that we could have missed without the visualization

33. Qualities of visualizations
• Cairo (2016) suggests a number of qualities of visualizations (which are often not
met in practice!)
• Functional It should depict data accurately, but also be useful to people
• Beautiful A visualization should be ‘attractive’ to different audiences
• Insightful It should reveal evidence that we could have missed without the visualization
• Enlightening A visualization may “change our minds” (hopefully for the better…)

34. Qualities of visualizations
• Cairo (2016) suggests a number of qualities of visualizations (which are often not
met in practice!)
• Functional It should depict data accurately, but also be useful to people
• Beautiful A visualization should be ‘attractive’ to different audiences
• Insightful It should reveal evidence that we could have missed without the visualization
• Enlightening A visualization may “change our minds” (hopefully for the better…)
• Truthful A visualization should depict truthful and honest research

35. https://flowingdata.com/2012/08/06/fox-news-continues-charting-excellence/
Enlightening?

36. Fallacies of visualization
• Designing an understandable and reliable visualization is far from
straightforward.
• Importance of the origins, quality and scope of underlying data.
• I.e., it is essential to understand the whole picture
• Data critique: how was data generated? Is it complete? etc.

37. Numberofmoviereleases

38. Amountofchocolatesold

39. Numberofreceivedbooks

40. Numberofreceivedbooks
Problems of storytelling, patternicity and confirmation (Cairo, 2016)

41. Problems of visualization
• Patternicity
• “Detecting interesting patterns, regardless of whether or not they are real”
• Storytelling
• Trying to find cause-effect relationships for patterns we observe
• Confirmation
• Confirming our own beliefs (cognitive dissonance, confirmation bias)
• (Cairo, 2016)

42. How to pick the right chart?
• How many variables to show in the chart? One, two, three, many?
• Few or many data points?
• Display values over period of time, or among items or groups?
• Source: eazybi.com, extremepresentation.com

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

44. datavizcatalogue.com

45. Storytelling
• Which audience are you making the chart for?
• E.g. scientific context, popular science, newspaper, website, etc.
• What is your key message?
• Which (combination of) text and charts can best tell this story?

46. Moritz Stefaner, http://rhythm-of-food.net/

47. https://www.economist.com/graphic-detail/2015/05/12/seeking-safety

48. https://interaktiv.morgenpost.de/zugezogene-in-berlin/

49. https://www.nytimes.com/interactive/2014/upshot/dialect-quiz-map.html

50. https://www.bloomberg.com/graphics/infographics/graphic-language-the-curse-of-the-ceo.html

51. https://www.bloomberg.com/graphics/infographics/graphic-language-the-curse-of-the-ceo.html

52. And: less is more …
Cairo (2016)
eazybi.com/blog/data_visualization_and_chart_types/
Some Do’s & Don’ts

53. 2. The visualization process

54. (Simplified) Steps
data wrangling data enrichment visualizationcorpus creation

57. Title Text
http://www.thomaspadilla.org/2015/02/17/8020rule/

58. Title Text
http://www.thomaspadilla.org/2015/02/17/8020rule/

59. (Simplified) Steps
data wrangling data enrichment visualizationcorpus creation
* From 7 stages in data visualization (Fry, 2007)
Iterative!
Involves analysis along the way

60. (Simplified) Steps
data wrangling data enrichment visualizationcorpus creation
* From 7 stages in data visualization (Fry, 2007)
Iterative!
Involves analysis along the way

61. (Simplified) Steps
data wrangling data enrichment visualizationcorpus creation
Represent*
Refine*
Interact*
Clean
Parse*
Filter*
Mine*Acquire*
Understand
* From 7 stages in data visualization (Fry, 2007)
Iterative!
Involves analysis along the way

62. (Simplified) Steps
data wrangling data enrichment visualizationcorpus creation
Represent*
Refine*
Interact*
Clean
Parse*
Filter*
Mine*Acquire*
Understand
E.g. get data about
acquired books
* From 7 stages in data visualization (Fry, 2007)
Iterative!
Involves analysis along the way

63. (Simplified) Steps
data wrangling data enrichment visualizationcorpus creation
Represent*
Refine*
Interact*
Clean
Parse*
Filter*
Mine*Acquire*
Understand
E.g. clean up publisher
names
E.g. get data about
acquired books
* From 7 stages in data visualization (Fry, 2007)
Iterative!
Involves analysis along the way

64. (Simplified) Steps
data wrangling data enrichment visualizationcorpus creation
Represent*
Refine*
Interact*
Clean
Parse*
Filter*
Mine*Acquire*
Understand
E.g. clean up publisher
names
E.g. get geocodes
for placenames
E.g. get data about
acquired books
* From 7 stages in data visualization (Fry, 2007)
Iterative!
Involves analysis along the way

65. (Simplified) Steps
data wrangling data enrichment visualizationcorpus creation
Represent*
Refine*
Interact*
Clean
Parse*
Filter*
Mine*Acquire*
Understand
E.g. clean up publisher
names
E.g. get geocodes
for placenames
E.g. project publisher
locations onto map
E.g. get data about
acquired books
* From 7 stages in data visualization (Fry, 2007)
Iterative!
Involves analysis along the way

66. Parse
remove unnecessary fields
create additional fields
clean up publisher names
create ‘pivot tables’, explore countsUnderstand
Clean
Filter
data wrangling data enrichment visualization

67. Mine
E.g. get geocodes for placenames
data wrangling data enrichment visualization

68. Represent
Refine
Interact
data wrangling data enrichment visualization

69. 3. Supportive tools for visualization

70. OpenRefine data wrangling data enrichment visualization

71. OpenRefine data wrangling data enrichment visualization

72. Google Spreadsheets data wrangling data enrichment visualization

73. Google Spreadsheets data wrangling data enrichment visualization

74. plot.ly data wrangling data enrichment visualization

75. plot.ly data wrangling data enrichment visualization

76. Google Fusion Tables
Anat Ben David & Hugo Huurdeman (2013)
data wrangling data enrichment visualization

77. Google Fusion Tables data wrangling data enrichment visualization

78. Tableau (Public) data wrangling data enrichment visualization

79. DMI tools data wrangling data enrichment visualization

80. Gephi visualizationdata wrangling data enrichment

81. Gephi
2011_12_Assad_09_EN.rtf2011_10_Assad_5_EN.rtf2011_11_Assad_15_EN.rtf2011_09_Assad_31_EN.rtf2011_08_Assad_26_EN.rtf2011_07_Assad_21_EN.rtf2011_06_Assad_22_EN.rtf2011_05_Assad_14_EN.rtf2011_04_Assad_100_EN.rtf2011_03_Assad_21_EN.rtf2011_01_Assad_58_EN.txt2011_02_Assad_29_EN.rtf
london united nations iraq
eu
new zealandtwitter hosni mubarak
president bashar al-assadlibyan capital tripoli
monday
nu.nl deaths
spokesman
syria
the netherlands country
peopleparty
president tahrir square
egypt
mubarak
regime
historical eventnu.nl egypt
historic event
nu.nl
press conference
president hosni mubarak
muslim brotherhood
netherlandshamapercent
CO-WORD ANALYSIS 2011
Detail
Co-word anlysis of Assad articles: J 2011
A.BenDavid,A.Helmond,H.Huurdeman,D.Moats,
N.Sánchez,T.Sammar,C.Somzé,DMIWinterSchool2013
visualizationdata wrangling data enrichment

82. RAW visualizationdata wrangling data enrichment

83. RAW visualizationdata wrangling data enrichment

84. d3 visualizationdata wrangling data enrichment

85. TimelineJS visualizationdata wrangling data enrichment

86. TimelineJS visualizationdata wrangling data enrichment
Up next in the exercise

87. Jupyter notebooks data wrangling data enrichment visualization

88. Jupyter notebooks data wrangling data enrichment visualization
Later this morning

89. 4. A practical exercise
Exporting data from Media Suite, import into Google Sheets,
create timeline in TimelineJS

90. Go to:
bit.ly/ClariahVisualizationTutorial
for the links, data and a screencast

91. First step
• 1. Open a browser window, preferably Chrome:
• 2. From the Google Doc folder (bit.ly/ClariahVisualizationTutorial),
open the document First-step
• 3. Open 4 browser tabs:
• Tab 1: Google Sheets: sheets.google.com
• Tab 2: ImportJSON for Google Sheets: github.com/bradjasper/ImportJSON
• Tab 3: TimelineJS: timeline.knightlab.com/
• Tab 4: From the Google Doc folder (bit.ly/ClariahVisualizationTutorial),
double click on metros-bookmarks-basic-final.json

92. Data diggin’ & visualization
• Ready?
• Note: time is a bit limited
• If you cannot keep up, there is a screencast of the process in the Google Doc
folder, so you can try it out later

100. Any questions?
?

101. Literature and other pointers
• Cairo (2016). The Truthful Art - Data, Charts, and Maps for Communication.
• Davis, (2009). Article on visualization in a library context: inthelibrarywiththeleadpipe.org/2009/not-just-another-pretty-picture
• Fry (2007), Visualizing Data, O’Reilly.
• Kirk (2016). Data Visualization - A handbook for Data Driven Design
• Nussbaumer Knaflic (2015). Storytelling with Data. Wiley.
• Tufte (1983). The Visual Display of Quantitative Information.
• Visualization examples: informationisbeautiful.net
• Pivot tables: en.wikipedia.org/wiki/Pivot_table
• Chart usage guidelines: eazybi.com/blog/data_visualization_and_chart_types
• Improving the ‘data-ink ratio’: darkhorseanalytics.com/blog/data-looks-better-naked
• Google Fusion Tables tutorials: https://support.google.com/fusiontables/answer/184641

102. University of Oslo Library
Presentation by Hugo C. Huurdeman, 4 July, 2018
Clariah Summer School
Visualization lecture