Embed Size (px)
Citation preview
Open Data VorlesungData Visualization
Benjamin Wiederkehr February 21, 2019
Interactive Things [email protected]
Benjamin WiederkehrInteraction & Information Designer
@wiederkehr 076 / 533 33 72 [email protected] benjaminwiederkehr.com
Managing Director of Interactive Things Editor of Datavisualization.ch Lecturer at ZHdK, HKB, UZH, HSLU Organizer of Hacks/Hackers Zürich Participant of Opendata.ch
Digital Product Design Established 2010 Five Equal Partners Fifteen Employees
@ixt 044 / 267 66 44 [email protected] interactivethings.com
!4
EinsatzbereichKapitel 1
Wo werden Visualisierungen eingesetzt?
!5 Selection of scientific research visualizations from Visualcomplexity.com
Visual Analytics
!6 Selection of visual analytics tools from various visualization designers
Interactive Reporting
!7 Selection of data-driven reportings from NYTimes.com
Data-Driven Journalism
!8 Selection of consumer applications from Dribbble.com
Data-Driven Products
!9 Selection of heads-up displays, interfaces, and holograms from various movies
Movies
!10 Selection of data-driven reportings from NYTimes.com
Video Games
!11
Visualizations have become a ubiquituous format for data and
information in everyday life.
!12
AufgabeKapitel 2
Welche Aufgaben können mit Visualisierungen erfüllt werden?
!13
Three Jobs of Visualizations
Stephen Few (2014), Why Do We Visualize Quantitative Data?
ExplanationConveying information to others.
Communication
EvaluationExamining and making sense of data.
Understanding
ExplorationSearching for significant facts.
Discovery
!15
Competence Browser Data visualization of research activity and competency.
Client ZHAWRelease August 2014Services Interaction Design, Interface Design,
Data Visualization, Software Engineering
Credits Benjamin Wiederkehr, Ilya Boyandin, Jan Wächter, Jeremy Stucki, Peter Gassner, Tania Boa, Thomas Preusse
Link expertisenkarte.zhaw.ch
!17
Augment Mobile application for tracking and analyzing medical grade vital signs.
Client BiovotionRelease September 2018Services Design Strategy, Design Conception,
Interface Design, Interaction Design, Data Visualization
Credits Anna Wiederkehr, Christoph Schmid, Jan Wächter
Link biovotion.com
!19
Roger Federer Data story about the career of the legendary Swiss tennis player.
Client SRG SSR Release January 2018Services Interface Design, Interaction Design,
Data Visualization, Software Engineering
Credits Tania Boa, Luc Guillemot, Angelo Zehr (SRG SSR)
Link srf.ch/static/srf-data/data/2018/federer
!20
Visualizations are tools to explore, evaluate, and explain
insights hidden in data.
!21
FunktionKapitel 3
Wie funktionieren Visualisierungen eigentlich?
!25
Visualization
Decoding
Human
3Encoding
Data
1
2
3
4
!26
With visualizations, we encode data into a visual form that can be decoded
and understood by people.
!27
• Wer ist das Publikum der Visualisierung?Entscheidungsträger, Fachexperten, Laien, etc.
• Wo wird die Visualisierung gesehen und genutzt?Frontalpräsentation, Arbeitsmittel, Berichtsdokument, etc.
• Welche Aufgabe soll die Visualisierung erfüllen?Verständnis schaffen, Aussage treffen, Entscheidung beeinflussen, etc.
Fragen, die wir zuerst beantworten müssen
!28
!29
Billable Unbillable
!30
Loss
!31
Profit
!32
Project–3Project–2Project–1 Project–4 Project–5
!33
!34
FUN
!35
FUN
FAME
!36
!
"
#
$
%
FAME
FUN
!37
ProzessKapitel 4
Wie erstellen wir bei Interactive Things Visualisierungen?
!38
Client World Health Organisation Release October 2017 Service Interface Design, Interaction Design, Data Visualization, Software EngineeringCredits Gerhard Bliedung, Tomas Carnecky, Peter Gassner, Luc Guillemot, Ece Kavlak, Kallirroi Retzepi, Christian Siegrist
http://apps.who.int/violence-info
Violence Info Global knowledge platform about violence prevention.
!39
1. InformHave a shared vision
for the project.
Technical and topical research provided by the Neue Zürcher Zeitung!40
News office at Neue Zürcher Zeitung: Marcel Gyr, Benjamin Wiederkehr, Martina Franzén, Sylke Grihnwald!41
!42
1. InformHave a shared vision
for the project.
2. PrepareCollect and refine the
data ready for analysis.
Construct personas, scenarios, use cases.
!46
Collect
Gather data from systematic reviews, then
fill in single studies.
Harmonize
Summarize the data and align dimensions,
metrics, and terms.
Organize
Map the structure of the data to the mental model of the user.
Visualize
Translate the attributes of the data into intuitive
visual variables.
Collecting and Refining Data
!50
Policy Makers
Interested in high-level evidence for decision
and policy making.
Researchers
Interested in scientific data and tools to explore
that data.
Journalists
Interested in stories for communication and
distribution.
Public
Interested in easy-to-understand facts and
figures.
Understanding Users and Scenarios
!51
1. InformHave a shared vision
for the project.
2. PrepareCollect and refine the
data ready for analysis.
Construct personas, scenarios, use cases.
!51
1. InformHave a shared vision
for the project.
2. PrepareCollect and refine the
data ready for analysis.
Construct personas, scenarios, use cases.
3. ExploreUnderstand the
texture of the data.
Observe and inquire theuser in his context.
Zürich, Switzerland: Jan Wächter, Martina Franzén, Christoph Schmid, Benjamin Wiederkehr, Flavio Gortana!52
Raw data for Education Inequalities!53
Data analysis for Education Inequalities!54
Albania Burundi CAR Guinea Bissau Iraq Myanmar Sao Tome and Principe Sierra Leone Suriname Togo Uzbekistan Venezuela
Country Total All
Country Total Region
Country Total Sex
Country Total Urban/Rural
Country W
ealth Index Quintiles
Region and Country W
ealth Index Quintiles
Region and Se
xRegion and Se
x and Wealth Index Quintile
Sex and Country W
ealth Index Quintiles
Urban/Rural and Country W
ealth Index Quintiles
Urban/Rural and Sex
Urban/Rural and Sex and W
ealth Index Quintile
Country Total All
Country Total Region
Country Total Sex
Country Total Urban/Rural
Country W
ealth Index Quintiles
Region and Country W
ealth Index Quintiles
Region and Se
xRegion and Se
x and Wealth Index Quintile
Sex and Country W
ealth Index Quintiles
Urban/Rural and Country W
ealth Index Quintiles
Urban/Rural and Sex
Urban/Rural and Sex and W
ealth Index Quintile
Country Total All
Country Total Region
Country Total Sex
Country Total Urban/Rural
Country W
ealth Index Quintiles
Region and Country W
ealth Index Quintiles
Region and Se
xRegion and Se
x and Wealth Index Quintile
Sex and Country W
ealth Index Quintiles
Urban/Rural and Country W
ealth Index Quintiles
Urban/Rural and Sex
Urban/Rural and Sex and W
ealth Index Quintile
Country Total All
Country Total Region
Country Total Sex
Country Total Urban/Rural
Country W
ealth Index Quintiles
Region and Country W
ealth Index Quintiles
Region and Se
xRegion and Se
x and Wealth Index Quintile
Sex and Country W
ealth Index Quintiles
Urban/Rural and Country W
ealth Index Quintiles
Urban/Rural and Sex
Urban/Rural and Sex and W
ealth Index Quintile
Country Total All
Country Total Region
Country Total Sex
Country Total Urban/Rural
Country W
ealth Index Quintiles
Region and Country W
ealth Index Quintiles
Region and Se
xRegion and Se
x and Wealth Index Quintile
Sex and Country W
ealth Index Quintiles
Urban/Rural and Country W
ealth Index Quintiles
Urban/Rural and Sex
Urban/Rural and Sex and W
ealth Index Quintile
Country Total All
Country Total Region
Country Total Sex
Country Total Urban/Rural
Country W
ealth Index Quintiles
Region and Country W
ealth Index Quintiles
Region and Se
xRegion and Se
x and Wealth Index Quintile
Sex and Country W
ealth Index Quintiles
Urban/Rural and Country W
ealth Index Quintiles
Urban/Rural and Sex
Urban/Rural and Sex and W
ealth Index Quintile
Country Total All
Country Total Region
Country Total Sex
Country Total Urban/Rural
Country W
ealth Index Quintiles
Region and Country W
ealth Index Quintiles
Region and Se
xRegion and Se
x and Wealth Index Quintile
Sex and Country W
ealth Index Quintiles
Urban/Rural and Country W
ealth Index Quintiles
Urban/Rural and Sex
Urban/Rural and Sex and W
ealth Index Quintile
Country Total All
Country Total Region
Country Total Sex
Country Total Urban/Rural
Country W
ealth Index Quintiles
Region and Country W
ealth Index Quintiles
Region and Se
xRegion and Se
x and Wealth Index Quintile
Sex and Country W
ealth Index Quintiles
Urban/Rural and Country W
ealth Index Quintiles
Urban/Rural and Sex
Urban/Rural and Sex and W
ealth Index Quintile
Country Total All
Country Total Region
Country Total Sex
Country Total Urban/Rural
Country W
ealth Index Quintiles
Region and Country W
ealth Index Quintiles
Region and Se
xRegion and Se
x and Wealth Index Quintile
Sex and Country W
ealth Index Quintiles
Urban/Rural and Country W
ealth Index Quintiles
Urban/Rural and Sex
Urban/Rural and Sex and W
ealth Index Quintile
Country Total All
Country Total Region
Country Total Sex
Country Total Urban/Rural
Country W
ealth Index Quintiles
Region and Country W
ealth Index Quintiles
Region and Se
xRegion and Se
x and Wealth Index Quintile
Sex and Country W
ealth Index Quintiles
Urban/Rural and Country W
ealth Index Quintiles
Urban/Rural and Sex
Urban/Rural and Sex and W
ealth Index Quintile
Country Total All
Country Total Region
Country Total Sex
Country Total Urban/Rural
Country W
ealth Index Quintiles
Region and Country W
ealth Index Quintiles
Region and Se
xRegion and Se
x and Wealth Index Quintile
Sex and Country W
ealth Index Quintiles
Urban/Rural and Country W
ealth Index Quintiles
Urban/Rural and Sex
Urban/Rural and Sex and W
ealth Index Quintile
Country Total All
Country Total Sex
Country Total Urban/Rural
Country W
ealth Index Quintiles
Sex and Country W
ealth Index Quintiles
Urban/Rural and Country W
ealth Index Quintiles
Urban/Rural and Sex
Urban/Rural and Sex and W
ealth Index Quintile
0.0
0.5
1.0
Educ
ation po
verty
: les
sthan
4 yea
rs of s
choo
ling
(age
17-22
)
0.0
0.5
1.0Ed
ucation po
verty
: les
sthan
4 yea
rs of s
choo
ling
(age
23-27
)
0.0
0.5
1.0
Educ
ation po
verty
: les
sthan
2 yea
rs of s
choo
ling
(age
17-22
)
0.0
0.5
1.0
Educ
ation po
verty
: les
sthan
2 yea
rs of s
choo
ling
(age
23-27
)
0.0
0.5
Share of pop
age
d 7-17
who
has
nev
er bee
n to
scho
ol
Sheet 2
Average of edu4_17_m, average of edu4_23_m, average of edu2_17_m, average of edu2_23_m and average of edu0_7_m for each category broken down by country. Details are shown for subcategory1, subcategory2 and subcategory3. The data is filtered on year, which ranges from 2000 to 2000. The view is filtered on country, which excludes Bosnia & Herzigovina, Gambia, Lao PDR, Mongolia and Trinidad& Tobago.
Detail data analysis for Education Inequalities!55
country
0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0Education poverty: less than 4 years of schooling (age 17-22)
CAR
Uzbekistan
Burkina Faso
Somalia
Kyrgyzstan
Sierra Leone
Guinea Bissau
Burundi
Belarus
Gambia
Djibouti
Mauritania
Guyana
Yemen, Rep.
Togo
Iraq
Lao PDR
Suriname
Mongolia
Vanuatu
Syria
Thailand
Macedonia
Tajikistan
Belize
Serbia
Montenegro
Cuba
Albania
Georgia
Ukraine
Bosnia & Herzigovina
Jamaica
Kazakhstan
Sheet 7category
Country Total Sex
Country Total Urban/Rural
Country Total Religion
Country Total Region
Country Wealth Index Quintiles
Country Total Ethnicity
Average of edu4_17_m for each country. Color shows details about category. Details are shown for subcategory1. The data is filtered on year, which ranges from 2005to 2005. The view is filtered on country and category. The country filter excludes no members. The category filter has multiple members selected.
country
0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0Education poverty: less than 4 years of schooling (age 17-22)
CAR
Uzbekistan
Burkina Faso
Somalia
Kyrgyzstan
Sierra Leone
Guinea Bissau
Burundi
Belarus
Gambia
Djibouti
Mauritania
Guyana
Yemen, Rep.
Togo
Iraq
Lao PDR
Suriname
Mongolia
Vanuatu
Syria
Thailand
Macedonia
Tajikistan
Belize
Serbia
Montenegro
Cuba
Albania
Georgia
Ukraine
Bosnia & Herzigovina
Jamaica
Kazakhstan
Sheet 7category
Country Total Sex
Country Total Urban/Rural
Country Total Religion
Country Total Region
Country Wealth Index Quintiles
Country Total Ethnicity
Average of edu4_17_m for each country. Color shows details about category. Details are shown for subcategory1. The data is filtered on year, which ranges from 2005to 2005. The view is filtered on country and category. The country filter excludes no members. The category filter has multiple members selected.
country
0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0Education poverty: less than 4 years of schooling (age 17-22)
CAR
Uzbekistan
Burkina Faso
Somalia
Kyrgyzstan
Sierra Leone
Guinea Bissau
Burundi
Belarus
Gambia
Djibouti
Mauritania
Guyana
Yemen, Rep.
Togo
Iraq
Lao PDR
Suriname
Mongolia
Vanuatu
Syria
Thailand
Macedonia
Tajikistan
Belize
Serbia
Montenegro
Cuba
Albania
Georgia
Ukraine
Bosnia & Herzigovina
Jamaica
Kazakhstan
Sheet 7category
Country Total Sex
Country Total Urban/Rural
Country Total Religion
Country Total Region
Country Wealth Index Quintiles
Country Total Ethnicity
Average of edu4_17_m for each country. Color shows details about category. Details are shown for subcategory1. The data is filtered on year, which ranges from 2005to 2005. The view is filtered on country and category. The country filter excludes no members. The category filter has multiple members selected.
!56
1. InformHave a shared vision
for the project.
2. PrepareCollect and refine the
data ready for analysis.
Construct personas, scenarios, use cases.
3. ExploreUnderstand the
texture of the data.
Observe and inquire theuser in his context.
4. DiscoverUnderstand the
contents of the data.
Analyze and interpretthe behavior of the user.
!57 Results from a mini design sprint for Violence Information
!58
1. InformHave a shared vision
for the project.
2. PrepareCollect and refine the
data ready for analysis.
Construct personas, scenarios, use cases.
3. ExploreUnderstand the
texture of the data.
Observe and inquire theuser in his context.
4. DiscoverUnderstand the
contents of the data.
Analyze and interpretthe behavior of the user.
Map the user flow and user journey.
5. SketchTranslate ideas into
concept visuals.
!59 Consequences of child maltreatment Consequences of elder abuse
!60 Lifetime prevalence studies of child maltreatment Lifetime prevalence studies of child maltreatment by subtype
!61
!62
1. InformHave a shared vision
for the project.
2. PrepareCollect and refine the
data ready for analysis.
Construct personas, scenarios, use cases.
3. ExploreUnderstand the
texture of the data.
Observe and inquire theuser in his context.
4. DiscoverUnderstand the
contents of the data.
Analyze and interpretthe behavior of the user.
6. QuestionVerify the selected
visualization method.
Verify that it meets theuser’s expectations.
Map the user flow and user journey.
5. SketchTranslate ideas into
concept visuals.
!63
!64 Consequences of child maltreatment Consequences of elder abuse
!65
Violence Type Page
Height: Median odds ratio
!66
Country Detail Page
!67
Country DetailCountry Overview
!67
Country DetailCountry Overview
!68
1. InformHave a shared vision
for the project.
2. PrepareCollect and refine the
data ready for analysis.
Construct personas, scenarios, use cases.
3. ExploreUnderstand the
texture of the data.
Observe and inquire theuser in his context.
4. DiscoverUnderstand the
contents of the data.
Analyze and interpretthe behavior of the user.
6. QuestionVerify the selected
visualization method.
Verify that it meets theuser’s expectations.
Map the user flow and user journey.
5. SketchTranslate ideas into
concept visuals.
7. DesignCreate the specification
for implementation.
!69
Studies Page
Size: Homicide rate
!70
Violence Type Page
!71
Application Architecture
Homepage Types Countries Studies
!72
Visual Design Aesthetics
Visual design variations for Unwanted
!73
Visual Design Styleguide
!74
1. InformHave a shared vision
for the project.
2. PrepareCollect and refine the
data ready for analysis.
Construct personas, scenarios, use cases.
3. ExploreUnderstand the
texture of the data.
Observe and inquire theuser in his context.
4. DiscoverUnderstand the
contents of the data.
Analyze and interpretthe behavior of the user.
6. QuestionVerify the selected
visualization method.
Verify that it meets theuser’s expectations.
7. DesignCreate the specification
for implementation.
8. DevelopBuild a flawlessly
working application.
Map the user flow and user journey.
5. SketchTranslate ideas into
concept visuals.
Development Toolkit
!75
Client Side Server Side
d3js.org nextjs.org
reactjs.org catalog.style
nodejs.org graphql.org
!76
1. InformHave a shared vision
for the project.
2. PrepareCollect and refine the
data ready for analysis.
Construct personas, scenarios, use cases.
3. ExploreUnderstand the
texture of the data.
Observe and inquire theuser in his context.
4. DiscoverUnderstand the
contents of the data.
Analyze and interpretthe behavior of the user.
6. QuestionVerify the selected
visualization method.
Verify that it meets theuser’s expectations.
7. DesignCreate the specification
for implementation.
8. DevelopBuild a flawlessly
working application.
9. EvaluateEnsure the result is
understandable.
Ensure the result is usable.
Map the user flow and user journey.
5. SketchTranslate ideas into
concept visuals.
Content Validation, Tania Boa!77
User Evaluation: Sylke Gruhnwald, Participant!78
!79
1. InformHave a shared vision
for the project.
2. PrepareCollect and refine the
data ready for analysis.
Construct personas, scenarios, use cases.
3. ExploreUnderstand the
texture of the data.
Observe and inquire theuser in his context.
4. DiscoverUnderstand the
contents of the data.
Analyze and interpretthe behavior of the user.
6. QuestionVerify the selected
visualization method.
Verify that it meets theuser’s expectations.
7. DesignCreate the specification
for implementation.
8. DevelopBuild a flawlessly
working application.
9. EvaluateEnsure the result is
understandable.
Ensure the result is usable.
10. DeliverFinalize the project
and ship it.
Map the user flow and user journey.
5. SketchTranslate ideas into
concept visuals.
!80
!81
WerkzeugeKapitel 5
Welche Werkzeuge helfen uns, Visualisierungen zu erstellen?
Werkzeuge: Spektrum der Arbeitsresultate
!82
Vordefiniert
Exportiert aus Excel, Numbers, Tableau, etc.
Massgeschneidert
Spezifische Gestaltung und Umsetzung
Angepasst
Standard Layout oder Beispiel-Vorlage
!83
Werkzeuge für die Analyse
R r-project.org
OpenRefine openrefine.org
Tableau tableau.com
!84
Werkzeuge ohne Programmieren
Datawrapper datawrapper.de
RAWGraphs rawgraphs.io
Flourish flourish.studio
RAWDatawrapper
!85
Werkzeuge fürs Programmieren
D3 d3js.org
React reactjs.org
JavaScript js.org
!86
Finde die passenden Helfer: selection.datavisualization.ch
Empfohlene Werkzeuge
!87
Liste (fast) aller verfügbaren Helfer: visualisingdata.com/resources
Empfohlene Werkzeuge
!88
Finde die richtige Darstellungsform: datavizproject.com
Empfohlene Werkzeuge
Don’t hesitate to contact us.Many Thanks!
Interactive Things [email protected]
Benjamin Wiederkehr February 21, 2019
[email protected]+41 44 267 66 44
