farr institute - information graphics in context

55
Dr Will Stahl-Timmins The Farr Institute 16 May 2016 INFORMATION GRAPHICS in context

Upload: will-stahl-timmins

Post on 14-Apr-2017

216 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Farr institute - information graphics in context

Dr Will Stahl-Timmins

The Farr Institute 16 May 2016

INFORMATION GRAPHICS in context

Page 2: Farr institute - information graphics in context

information graphics

(dataviz) (infographics)

(data journalism)

Page 3: Farr institute - information graphics in context

charts / graphs

7%8%

10%

11%

29%

35%0

25

50

75

100

2007 2008 2009 2010

0

25

50

75

100

2007 2008 2009 2010

Page 4: Farr institute - information graphics in context

charts / graphs

Page 5: Farr institute - information graphics in context

charts / graphs

William Playfair (1759–1823)

Page 6: Farr institute - information graphics in context

charts / graphs

Page 7: Farr institute - information graphics in context

maps / data maps

Page 8: Farr institute - information graphics in context

maps / data maps

Page 9: Farr institute - information graphics in context

ISOTYPE – Otto and Marie Neurath

Page 10: Farr institute - information graphics in context

ISOTYPE – Otto and Marie Neurath

Page 11: Farr institute - information graphics in context

maps / data maps

Page 12: Farr institute - information graphics in context

wayfinding

Page 13: Farr institute - information graphics in context

tower graphics

Page 14: Farr institute - information graphics in context

tower graphics

http://www.angelamorelli.com/water/Angela Morelli

Page 15: Farr institute - information graphics in context

diagrams

Page 16: Farr institute - information graphics in context

diagrams

Page 17: Farr institute - information graphics in context

diagrams

Page 18: Farr institute - information graphics in context

diagrams

Page 19: Farr institute - information graphics in context

Sankey diagrams

Page 20: Farr institute - information graphics in context

Sankey diagrams

Page 21: Farr institute - information graphics in context

Sankey diagrams

raw.densitydesign.org

Page 22: Farr institute - information graphics in context

motion graphicsRöysopp - Remind Me (Music video)

Page 23: Farr institute - information graphics in context

interactiveshttp://drones.pitchinteractive.com

Page 24: Farr institute - information graphics in context

and other things?http://infosthetics.com http://www.informationisbeautiful.net

http://www.visualcomplexity.com/vc/ http://www.densitydesign.org/blog/

Page 25: Farr institute - information graphics in context

why visualise data?

Page 26: Farr institute - information graphics in context

efficient communication?

engagement with audience?

emotive connection?

to explain complex

information?condensing into a small space?

enabling comparisons?

quick overview?

selective focussing?

Page 27: Farr institute - information graphics in context

exploration

explanation

Page 28: Farr institute - information graphics in context

production methods

Page 29: Farr institute - information graphics in context

1. Use standard graph tools

2. Use existing specialist data visualisation tools

3. Do it by hand

4. Develop new specialist data visualisation tools

Page 30: Farr institute - information graphics in context

1. Use standard graph tools

Page 31: Farr institute - information graphics in context

Open Office / Microsoft Excel / Apple Numbers

Page 32: Farr institute - information graphics in context

SPSS / Stata / R

Page 33: Farr institute - information graphics in context

https://infogr.am

Page 34: Farr institute - information graphics in context

2. Use existing specialist data visualisation tools

Page 36: Farr institute - information graphics in context

Inco

me

per P

erso

n of

the

Wor

ld

Life Expectancy of the World

Liechtenstein

Antigua&Barbuda

Dominica

Palau

NauruTuvalu

Seychelles

St. Kitts& Nevis

AndorraSan Marino

Monaco

Andorra

St.LuciaPanama

Sao Tomeand Principe

Tonga

Samoa

Grenada

Brunei

Comoros

Djibouti

Equatorial Guinea

Gabon

Luxembourg

Namibia

Swaziland

Timor-Leste

Micronesia

Trinidad and Tobago

Albania

Bhutan

Kiribati

Kosovo

Cyprus

Maldives

Slovenia

Suriname

Belize

Mauritius

Bahamas

Malta

Vanuatu

Montenegro

Estonia

Gambia

Guinea-BissauLesotho

Botswana

Mongolia

Oman

Qatar

Iceland

Barbados

BahrainCapeVerde

Latvia

SolomonIslands

Macedonia

Fiji

Guyana

Jamaica

St.Vincentand G.

Armenia

Lithuania

Uruguay

Mauritania

Moldova

Kuwait

Congo, Rep.Liberia

Bosnia and H. Croatia

Lebanon

Israel

Costa Rica

Puerto Rico

New Zealand

Georgia

Central African Rep.

SwedenSingapore

Norway

Ireland

Finland

Austria

Turkmenistan

Slovak Rep.

Kyrgyzstan

Eritrea

DenmarkTaiwan

Papua New Guinea

Hong Kong

United Arab Emirates

South Sudan

Switzerland

Hungary

BelarusAzerbaijan

Dom.R.

Bulgaria

Serbia

Burundi

LibyaNicaragua

Palestine

Sierra Leone

Laos

Benin

Guinea

Somalia

Tajikistan

Togo

El Salvador

Honduras ParaguayJordan

Poland

Bolivia

Haiti

Czech Rep.

Portugal

Tunisia

Rwanda

GreeceBelgiumCuba

Chad

Senegal

Zimbabwe

Zambia

Cambodia

Ecuador

Guatemala

BurkinaFaso

MalawiNiger

Mali

Kazakhstan

Netherlands

Chile

Romania

Cameroon

Sri Lanka

Cote d'Ivoire

Angola

Madagascar

Syria

Australia

Mozambique

Yemen

North Korea

Afghanistan

Ghana

Nepal

Sudan

SaudiArabia

PeruVenezuela

Malaysia

Morocco

Uzbekistan

Italy

Spain

UK Germany

Canada

France

South Korea

Philippines

Vietnam

Ethiopia

Egypt

IranTurkey

Dem. Rep. Congo

Thailand

South Africa

Myanmar

Colombia

Ukraine

Tanzania

Kenya

Argentina

Algeria

Iraq

Uganda

ChinaBangladesh

Indonesia

Pakistan

USA

Russia

Brazil

Nigeria

Japan

Mexico

India

2011 data for all 193 UN Members and for Hong Kong, Kosovo, Palestine, Puerto Rico and Taiwan.

Documentation andpdf version for print at:

3 orless

10100 1000

millions

Colour by region

Size by population

If you want to see more data visit:

www.gapminder.org

Free to copy, share and remix, but attribute to

Gapminder Foundation.

Version 11 September 2012

map

layo

ut b

y Pao

lo Fa

uson

e

gapminder.org/downloads/world-pdf

GAPMINDER WORLD 2012Mapping the Wealth and Health of Nations

Healthy

Poor Rich

Sick

50

500 1 000 2 000 20 0005 000 10 000 50 000

60

70

80

55

65

75

income per person in US Dollars (GDP/capita, PPP$ inflation adjusted, log scale)

life

exp

ecta

ncy

in ye

ars

Gapminder - Hans Rosling

Page 38: Farr institute - information graphics in context

http://www.tableausoftware.com/

Page 39: Farr institute - information graphics in context

http://www.tableausoftware.com/

Page 40: Farr institute - information graphics in context

3. Do it by hand

(or work with a specialist)

Page 41: Farr institute - information graphics in context
Page 42: Farr institute - information graphics in context
Page 43: Farr institute - information graphics in context

Software:

Presentation software Illustrator InDesign

Premiere After effects Animate

Processing / D3 HTML5 / Javascript Other programming languages

Stills {Motion}

Interactive {

Page 44: Farr institute - information graphics in context

Processing

http://processing.org/

Page 45: Farr institute - information graphics in context

http://d3js.org/

Page 46: Farr institute - information graphics in context

4. Develop new specialist data visualisation tools

Page 47: Farr institute - information graphics in context

55 75 95

ADAS

-cog

MM

SE SIB

othe

rAD

CS-A

DL

DAD PDS

othe

rNPI

othe

rCI

BIC

GD

SCD

RAD

CS-C

GIC

QoLauthor ageslocation

design, size & follow-up

studyquality

cog

0yr 1 2

no. ofcentres

0 10 20 30

baselineMMSE sex

outcome measures usedfunc be glo

55 75 95

ADAS

-cog

MM

SESIB

othe

rAD

CS-A

DL

DAD

PDS

othe

rNPI

othe

rCI

BIC

GD

SCD

RAD

CS-C

GIC

QoL

0yr 1 2 0 10 20 30 cog func be glo

N = 161

Donepezil 1mg N = 42 M FRandCharBlindAnaly

N = 473

M F

M F

RandCharBlindAnaly

M F

M F

RandCharBlindAnaly

Rogers et al.

1998 (B)

Rogers &

1996? Donepezil 3mg N = 40

Donepezil 5mg N = 39Placebo N = 40

Donepezil 5mg N = 154

Placebo N = 162

N = 468

Donepezil 5mg N = 157

Placebo N = 153

M FM FM F

Rogers et al.

1998 (A)Donepezil 10mg N = 157

M F

Donepezil 10mg N = 158M F

M F

M F

RandCharBlindAnaly

M FM F

RandCharBlindAnaly

M F

M F

RandCharBlindAnaly

M F

M F

RandCharBlindAnaly

N = 818

Donepezil 5mg N = 271

Placebo N = 274

N = 60

Donepezil 5mg (D)

Placebo (p)

N = 268

Donepezil 5mg N = 134

Placebo N = 129

N = 431

Donepezil 10mg N = 214

Placebo N = 217

Burns et al.

1999

Greenberg et al.

2000

Homma et al.

2000

Mohs et al.

2001

Donepezil 10mg N = 273M F

group 1 (p-D-p-p) N=30group 2 (p-p-D-p) N=30

1mg3mg5mg

5mg

10mg

5mg10mg

5mg10mg

Page 48: Farr institute - information graphics in context

Title

Able Baker et al. 2010

Dogg's Hamlet 2009

Echo Bazaar 2006

Gender

M F

M F

M F

M F

Ages Sites

?

Features Outcomes

N=50

N=150

N=25

Design

Control N=28

500mg N=22

Page 49: Farr institute - information graphics in context

Programming / scripting languages

Processing d3

javascript python etc...

Page 50: Farr institute - information graphics in context

1. Use standard graph tools

2. Use existing specialist data visualisation tools

3. Do it by hand

4. Develop new specialist data visualisation tools

Page 51: Farr institute - information graphics in context

make physical graphics

secret no. 5.

Page 52: Farr institute - information graphics in context

sugarstacks.com

Page 53: Farr institute - information graphics in context

Stan’s Cafe: stanscafe.co.uk

Page 54: Farr institute - information graphics in context
Page 55: Farr institute - information graphics in context

Dr Will Stahl-Timmins

blog.willstahl.com

www.bmj.com/infographics

Twitter: @will_s_t

www.bmj.com/infographics