INFOGRAFICHE & DATA VISUALISATIONS

Transcript

1 INFOGRAFICHE & DATA VISUALISATIONS DAL CONCEPT AGLI STRUMENTI Alessandra Spagnoli / formazione professionale continua / Primopiano Scrl

2 CATEGORIE u Infografica o Data Viz? u Location u Time u Category u Hierarchy ERRORI & CONSIGLI u Dal concept alla visualizzazione u Tipi di dati e tipi di grafici u Struttura e legenda u Obiettivi e densità dei dati u Chartjunk e misleading graph STRUMENTI u Canva u Infogr.am u Tableau Public u Adobe Illustrator u Raw

3 DI COSA STIAMO PARLANDO infografica? data visualization

4 infografica

5 Global Warning (poster) Derek Kim, 2013

6 Aiuto, chiamate Noè (IL) Francesco Franchi, 2010

7 data visualization

8 Pig Data (Wired) Accurat, 2014

9 Pig Data (Wired) Accurat, 2014

10 Amazon s Data Come to Life (Fast Company Innovation by Design Conference 2014) Accurat, 2014

13 A COSA SERVE? Tradurre visivamente un messaggio / una storia in modo utile, chiaro e comprensibile

14 data > information > knowledge Information is Beautiful, David McCandless

15 COME SI SUDDIVIDONO Richard Saul Wurman L A T C H

16 LOCATION ORGANIZZARE ELEMENTI NELLO SPAZIO

17 Wired (US) Start Atlases Carl De Torres,

20 City Railway Systems / Seul Zero Per Zero, 2010

21 City Railway Systems / Barcelona Zero Per Zero, 2010

22 The Carbon Atlas (The Guardian) Mark McCormick 26 The Guardian Saturday December The Guardian Saturday December Climate change Hot spots the carbon atlas This week s Bali meeting highlighted just how difficult it will be to secure an international agreement to reduce greenhouse gas levels by enough to save the earth from catastrophic temperature rises. This map, showing countries according to their emissions, shows why an international deal is needed and why only one binding the big polluters can succeed 58 Europe 4.67bn 9% 103 World total 28.19bn 28% tonnes of CO Ukraine growth in carbon emissions, tonnes of CO Russia growth in carbon emissions, Canada World carbon emissions are up from 18.3bn tonnes in 1980 and with rapid industrialisation in the developing world, those numbers will climb higher. The effect is delayed, which means even if we stopped emitting carbon now, it would go on increasing in the atmosphere 1, For the first time, there is hard scientific evidence of climate change affecting Europe, said the Intergovernmental Panel on Climate Change recently. Freak weather events, such as the heatwaves of 2003, will become ever more common 6 Germany Kazakhstan Netherlands Polan nd United Kingdom France , tonnes of CO2 growth in carbon emissions, Turkey 17 Spain Russia s carbon emissions dropped from 583 million metric tonnes of carbon in 1992 to 405 million metric tonnes in 1998, due to its then-deteriorating economic situation. Now, the energy giant may make clean up trading carbon credits Japan 1,230 Eurasia 2.58bn 4% Italy 207 million tonnes of carbon dioxide United States China North America 6.99bn 14% These latest UN figures for climate change emissions are from 2005, but are already dated. Reliable, but provisional estimates for 2006 by Dutch government researchers suggest China s CO2 emissions increased by 9% in 2006 and have now overtaken the US emissions, which declined by 1.4% in US emissions per person are nearly three times as great as Chinese Venezuela tonnes of CO2 73% Malaysia Middle East 1.45bn 62% Asia & Oceania 10.36bn 58% tonnes of CO2 Africa 1.04bn 28% tonnes of CO2 Its carbon emissions may be small but this is the continent most vulnerable to the effects of climate change, hitting food and water supplies, causing coastal flooding and an increase in tropical diseases such as malaria as well as destroying parts of the ecosystem Indonesia tonnes of CO2 growth in carbon emissions, % South Africa 30 Argentina 87% Thailand growth in carbon emissions, Increased freak weather events mean the IPCC is concerned South America will be hard-hit by climate change. Agriculture, water supplies and the unique natural habitat could be affected by a temperature increase of up to 4C by the end of the century 18 Brazil , India 14 Saudi Arabia Taiwan Central & South America 1.10bn 29% Egypt 55 growth in carbon emissions, CO2 emission growth of the highest 20 emitters, 1995 to million tonnes of carbon dioxide Iran 49 tonnes of CO2 growth in carbon emissions, The US as a major producer of greenhouse gases has been reluctant to accept that man-made climate change even existed and refused to accept the Kyoto protocol. But freak weather events and an avalanche of scientific evidence have forced it to rethink its position 16 Mexico South Korea 5, growth in carbon emissions, The region is a major contributor to global greenhouse gas emissions, through an oil and gas industry which produces over 30 percent of world oil supply and over 10 percent of its gas Rapid industrialisation combined with greater numbers of people moving to cities has provoked a huge rise in carbon emissions with China rapidly moving to become the world s greatest carbon emitter in the next two years some scientists say this has happened already Australia Highest per person CO2 emissions, Top twenty plus UK, 2005, tonnes 70 WORDS: SIMON ROGERS, GRAPHIC: MARK MCCORMICK % % % 35% China Saudi Arabia Iran Indonesia The carbon list Rank Country North America United States Canada Mexico Bermuda St Pierre & Miquelon Tonnes per Million person tonnes CO , Central & South America Brazil Venezuela Argentina Chile Colombia Puerto Rico Trinidad & Tobago Cuba Peru Ecuador Spain Australia Dominican Republic Virgin Islands, U.S. Panama Bolivia Jamaica Netherlands Antilles Guatemala Honduras El Salvador Uruguay Costa Rica Nicaragua The Bahamas Paraguay Martinique Guadeloupe Suriname Haiti Guyana Barbados French Guiana Aruba Belize Antigua and Barbuda India NA NA NA % South Korea % Brazil % Mexico Cayman Islands St Lucia Grenada Antarctica StVincent/Grenadines Saint Kitts & Nevis Dominica Virgin Islands, UK Montserrat Falkland Islands Turks & Caicos Is 25% Canada Germany United Kingdom Italy France Spain Poland Netherlands Turkey Belgium Czech Republic % South Africa NA NA Europe % 13% 12% Japan US France Greece Romania Austria Portugal Hungary Sweden Serbia & Montenegro Norway Finland Denmark Bulgaria Switzerland Ireland Slovakia Croatia Bosnia & Herzegovina Slovenia Luxembourg Cyprus Macedonia Albania Gibraltar Iceland Malta % Italy % 4% Russia UK Faroe Islands Greenland Germany -4% Qatar Russia Ukraine Kazakhstan Uzbekistan Belarus Turkmenistan Azerbaijan Estonia Lithuania Armenia Latvia Tajikistan Moldova Kyrgyzstan Georgia , Middle East 11 Iran Bahrain -18% Eurasia Australia US Saudi Arabia Estonia Bahamas Belgium Kazakhstan Taiwan Russia Norway Czech Republic UK (36th) Ukraine Saudi Arabia United ArabEmirates Iraq Kuwait Israel Qatar Syria Oman Bahrain Jordan Yemen Lebanon Trinidad & Tobago UAE Africa South Africa Egypt Nigeria Algeria Libya Morocco Tunisia Angola Zimbabwe Kuwait Singapore Luxembourg Sudan Kenya Cameroon Ghana IvoryCoast Senegal Congo Gabon Equatorial Guinea Ethiopia Mauritius Tanzania Botswana Namibia Reunion Mauritania Madagascar Zambia Togo Dem Rep Congo Mozambique Benin Djibouti Uganda NA Canada Netherlands Guinea Niger Sierra Leone Burkina Faso Swaziland Seychelles Malawi Rwanda Eritrea Somalia Mali Liberia Burundi Guinea-Bissau Central African Rep The Gambia Cape Verde Western Sahara Lesotho Chad Comoros Sao Tome & Principe St Helena Asia & Oceania China Japan India South Korea Australia Indonesia Taiwan Thailand Malaysia Singapore Pakistan Vietnam Philippines Hong Kong North Korea Bangladesh New Zealand Burma Sri Lanka Mongolia Brunei Papua New Guinea , , , Nepal New Caledonia Macau Guam Wake Island Fiji Laos Afghanistan French Polynesia Maldives American Samoa Cambodia Bhutan U.S. Pacific Islands Solomon Islands Nauru Samoa Tonga Vanuatu Cook Islands Kiribati Niue World NA NA 4.37 World ,192.74

23 Go West! (Wired) Federica Fragapane, 2014/2015

24 È la bicicletta che fa girare il mondo (IL) Francesco Franchi, 2009

25 Body Parts. What are you worth? (Esquire) Peter Grundy, 2006

26 QUOTIDIANI & PERIODICI forma e funzioni TIME ORGANIZZARE ELEMENTI IN ORDINE TEMPORALE

27 Cover mania (La Lettura) DensityDesign / Michele Mauri, 2012

28 Cover mania (La Lettura) - DensityDesign / Michele Mauri, 2012

29 Quanti (non) laureati al Nobel (La Lettura) Accurat, 2012

30 Quanti (non) laureati al Nobel (La Lettura) - Accurat, 2012

31 Digital nostalgia (poster) Paul Butt, 2009

32

33 La cascata quotidiana (IL) Francesco Franchi, 2009

34 Creative Routine (poster) RJ Andrews, 2013

35 SEISMI (sito web) Media Lab Helsinki, 2010

38 Berlin 1945 und heute (sito web) Berliner Morgenpost, 2015

39 Berlin 1945 und heute (sito web) Berliner Morgenpost, 2015

40 QUOTIDIANI & PERIODICI forma e funzioni CATEGORY SUDDIVIDERE ELEMENTI IN CLASSI

41 Superpower Showdown. Demographics David McCandless, 2014

42 Expo 2015 Themes visualization (poster) DensitiyDesign, 201o

43 Expo 2015 Themes visualization (poster) DensitiyDesign, 2010

44 La demografia riscrive la fede (La Lettura) Accurat, 2013

45 La demografia riscrive la fede (La Lettura) - Accurat, 2013

46 Design Research Maps DensityDesign, 2009

47 Design Research Maps DensityDesign, 2009

48 OECD Regional Well-being (sito web) Moritz Stefaner, 2013

49 QUOTIDIANI & PERIODICI forma e funzioni HIERARCHY ORGANIZZARE ELEMENTI IN ORDINE DI PRIORITA

50 L oro di Paperopoli pesa più di Topolinia (La Lettura) - Accurat, 2014

51 L oro di Paperopoli pesa più di Topolinia (La Lettura) - Accurat, 2014

52 Global Emissions (GOOD) Lamosca, 2009

53 The World of 100 (poster) Toby Ng, 2009

54 Parlamento senza veli (Wired) Valerio Pellegrini, 2014

55 Parlamento senza veli (Wired) Valerio Pellegrini, 2014

56 Se non lo sai spiegare in modo semplice, non l hai capito abbastanza bene Albert Einstein (attribuita)

57 TIPI DI GRAFICO

58 The Graphic Continuum (poster) - Jonathan Schwabish, Severino Ribecca, 2014

62 5 consigli + 5 errori

63 Prima di dedicarsi allo stile occorre pensare alla struttura Alberto Cairo, L arte funzionale, non di solo excel è fatta un infografica

64 Ecco dov è il tuo lavoro in Europa (Wired) Alessandra Spagnoli, 2015

69 Se da un lato i grafici rapidamente comprensibili hanno i loro campi di applicazione, dall altro è limitativo fare della rapidità un esigenza [ ]. Il criterio importante da seguire per i grafici non è semplicemente la velocità con cui riusciamo a vedere i risultati, ma piuttosto la possibilità di vedere, servendoci del grafico, qualcosa che sarebbe stato difficile vedere altrimenti, o che non avremmo potuto vedere affatto. William Cleveland, The Elements of Graphing Data 2. a ogni grafico il suo significato

70 William S. Cleveland, Robert McGill, Graphical Perception: theory, esperimentation, and application to the development of graphical methods, 1984

71 Clarity and simplicity are the complete opposite of simple-mindedness. Edward R. Tufte, Envisioning Information, una buona legenda è metà dell opera

72 Poveri giallisti (La Lettura) - Accurat, 2012

73 Poveri giallisti (La Lettura) - Accurat, 2012

74 An infographic should lead me from introduction to conclusion, somehow. It should help me solve or understand a problem. If it doesn t, it s a graphic, minus the info. Ian Lurie, CEO and founder of Portent Inc 4. visualizzare il flow

75 Everybody Writes Ann Handley By Visual.ly

76 Lunch Crunch: Where Does The Food Crisis Come From? - Tutu

77 China s Global Reach (The Heritage Foundation) Visual.ly

78 We envision information in order to reason about, communicate, document, and preserve that knowledge -- activities nearly always carried out on two-dimensional paper and computer screen. Escaping this flatland and enriching the density of data displays are the essential tasks of information design. Edward R. Tufte, Envisioning Information, rappresentazione dimensionale

79 Napoleone e la campagna di Russia Charles Minard, 1869

80 1. sbagliare l obiettivo Infographics should ease and speed the consumption of information. If you take something you can express in 25 words and turn it into 1000 x 3000 pixels of eye-watering garbage, it s not an infographic. It s a waste of paper Ian Lurie, CEO and founder of Portent Inc

81 Un lettore riuscirebbe davvero a immaginarsi 1,8 zetabytes grazie a questa infografica?

82 Gran parte del fascino intrinseco dell infografica sembra risidere nel suo riduzionismo visuale delle informazioni complesse. Il riduzionismo non è di per sé intrinsecamente negativo ( ). Il problema sorge quando l atto di ridurre in realtà comincia, senza volere, a semplificare troppo, oscurare, o distorcere il filo narrativo che era nelle intenzioni dell autore, invece di farvi confluire l attenzione Reif Larsen, This Chart is a Lonely Hunter: the Narrative Heroes of the Infographic 2. bassa densità di dati

83 Brazilian Population Grows More in Prisons (Epoca) Alberto Cairo, 2010

84 La ruota della visualizzazione Alberto Cairo, L arte funzionale, 2013

85 The interior decoration of graphics generates a lot of ink that does not tell the viewer anything new. The purpose of decoration varies to make the graphic appear more scientific and precise, to enliven the display, to give the designer an opportunity to exercise artistic skills. Regardless of its cause, it is all non-data-ink or redundant data-ink, and it is often chartjunk. Edwars Tufte, The Visual Display of Quantitative Information, chartjunk

86 3. chartjunk u Sfondi rumorosi u Griglie pesanti e decorate u Testi inutili e font poco idonee u Elementi decorativi non necessari u Ombreggiature e 3D ingannevoli

87 # Decorazioni e sfondo rumorosi; 3D ingannevole

88 # Elementi decorativi non necessari; 3D ingannevole

89 # Sfondi rumorosi e font poco idonee

90 # Elementi decorativi non necessari

91 # Elementi decorativi non necessari?

92 It [a misleading graph] is vastly more effective, however, because it contains no adjectives or adverbs to spoil the illusion of objectivity, there's nothing anyone can pin on you. Darrell Huff, How to Lie with Statistics, misleading graph

93 # Utilizzo del 3D e prospettiva 26% 58% 12% 4% grafico ingannevole grafico corretto

94 # L epidemia delle bolle (Alberto Cairo)

95

96

97 Tendiamo a confrontare le altezze piuttosto che le aree

98 # Confronti dimensionali tra elementi f.1/ rapporto dimensionale scorretto f.2/ grafico corretto f.3/ confronto

99 # Utilizzo improprio delle scale: grafico tronco A B C D E 0 A B C D E grafico tronco grafico corretto

100 # Utilizzo improprio delle scale: grafico stirato A B C D E 0 A B C D E rapporto larghezza per altezza scorretto grafico corretto

101 Una visualizzazione di dati deve essere bella solo se la bellezza può per certi versi favorire la comprensione, senza comprometterla per altri. La bellezza può essere utile? Certamente. La bellezza è sempre utile? Certamente no. Stephen Few, Should Data Visualization Be Beautiful? 5. dataesthetic

102 Nonsensical Infographics Chad M. Hagen

103 QUOTIDIANI & PERIODICI forma e funzioni 5+1 strumenti per la visualizzazione dati

104 COSA UTILIZZARE? complessità della visualizzazione Infogr.am Tableau Public RAW Adobe Illustrator + Visual.ly Canva modellabilità della visualizzazione

105 CANVA * * Tool gratuito online, richiede registrazione. NON visualizza grafici ma solo template e oggetti per infografiche. * Download in pdf o png. Condivisione sui social (Facebook, Twitter) e mail.

106 INFOGR.AM * * Tool gratuito online, richiede registrazione. Upgrade a pagamento. Alcuni template per infografiche e più di 30 modelli di grafici personalizzabili. * Condivisione sui social (Facebook, Twitter, G+, Linkedin, Pinterest) e codice html per embed. Download a pagamento.

107 TABLEAU PUBLIC * * * Software gratuito e community online. Upgrade a pagamento. Circa 25 modelli di grafici altamente personalizzabili. Generazione codice html per embed. Download in pdf, png, foglio di lavoro Tableau, dati (csv).

108 ADOBE ILLUSTRATOR * * * Software a pagamento. 9 modelli di grafici totalmente personalizzabili. Salvataggio in formati raster (jpg, png, btm ) e vettoriali (pdf, ai, svg, eps ).

109 RAW * * * Tool gratuito online ( 16 modelli di grafici non comuni e personalizzabili - parzialmente online, totalmente con programma di grafica vettoriale. Generazione codice html per embed. Download come immagine png e vettoriale svg.

110 VISUAL.LY * Piattaforma online per la vendita di servizi grafici a pagamento: presentazioni, video, infografiche, ebook

111 Testi vari AA.VV., Data Flow 2, Gestalten, Berlin 2010 A. Cairo, L arte funzionale, Pearson, Milano 2013 D. McCandless, Knowledge is Beautiful, William Collins, London 2014 S. Rendgen, J. Wiedemann, Information Graphics, Taschen, Köln 2012 E. Tufte, The Visual Display of Quantitative Information, Graphics Press, Cheshire 2001 (1997) Chad M. Hagen Nonsensical Infographic

112 INFOGRAFICHE & DATA VISUALISATIONS DAL CONCEPT AGLI STRUMENTI Alessandra Spagnoli / formazione professionale continua / Primopiano Scrl