Support de présentation "Visualisation de l’information : Typologies et Usages" 25 Mai 2011

1. International Civil Flight Traffic Mapping in 1999 (B. Gerard, L. Briceno, B.A. Bui The Thuong / 2011)
Grégoire Cliquet / L’Ecole de design Nantes Atlantique / READi design lab
+ Visualisation de l’information :
Typologies et Usages +
La Cantine Numérique - Nantes - « Sessions Innovation Design »
25 Mai 2011
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

2. Atlas Maior / Joan Blaeu / 1665 (ré édition Taschen 2010)
Visualisation de l’information :
Typologies et usages
 1. Introduction
 2. Enjeux
 3. Typologies de la visualisation de l’information
 4. Ressources
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

3. 1. Introduction: Représenter l’information ?
http://www.visual-literacy.org/periodic_table/periodic_table.html#
Cholera Map // John Snow 1854
 Comprendre (par la classification et la mise en relation d’éléments)
 Simplifier
 Analyser
 Prévoir
des phénomènes en les représentant…
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

4. 1. Introduction: Représenter l’information ?
The Elements of Euclid // Oliver Byrne 1847
London Underground Map // Harry Beck 1933
 Comprendre
 Simplifier (sémiologie graphique)
 Analyser
 Prévoir
des phénomènes en les représentant…
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

5. 1. Introduction: Représenter l’information ?
Cartographie thématique des projets labelisés
Franck Ghitalla 2010
 Comprendre
 Simplifier
 Analyser (visuelle, immédiate)
 Prévoir
des phénomènes en les représentant…
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

6. Le référendum sur la constitution européenne
1. Introduction: Représenter l’information ? Franck Ghitalla et Guilhem Fouetillou 2005
 Comprendre
 Simplifier
 Analyser
 Prévoir (dimension stratégique)
des phénomènes en les représentant…
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

7. Feltron Annual Reports
1. Introduction: Représenter l’information ? http://feltron.com/
Bases de la sémiologie graphique : Variables “rétiniennes” :
 Taille des éléments
Variables Spatiales :  Forme / Orientation
 Le plan et ses limites (granularité)  Couleur / Valeur des couleurs
 Position des éléments X,Y)  Grain (trames)
D’après Jacques Bertin / 1967
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

8. http://www.aggdata.com/
2. Enjeux: Volume des informations Nobel Prizes (1901 – 2010)
 Faciliter la compréhension, l’assimilation et la transmission des informations
 Croissance continue du volume des données (Web 2.0) // LinkedIn-Gephi / Facebook-Daytum
 OpenData (Web Square / Tim Berners Lee)
 Outil d’aide à l’analyse sociologique (ex. Sims online) et à la décision (dimension stratégique)
 Design d’information : Malléabilité totale de la matière numérique
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

9. http://www.michaelnajjar.com/
3. Typologie: “Dow Jones” évolution 1980-2009
 Dataprocess  Datamaps
 Dataviz  Dataesthetic
 Datalogy  Datatainment
 Datanets
D’après “Dataflow 2” / 2010
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

10. http://www.flickr.com/photos/bryce/56404690/
3. Typologie: Dataprocess http://www.judebuffum.com/infographic/iheritage.html
 Représentation de processus naturels ou artificiels
 Description de phénomènes complexes, multi-agents inter-dépendants, circulation et flux d’informations (Workflow / Flowcharts)
 Représentation de processus de conception, de production (formation professionnelle, règles d’hygiènes et de sécurité).
“Flickr User Model” / Bryce Glass 2005
“Heritage Beast” / Jude Buffum 2009
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

11. http://infoviz.lecolededesign.com/treemap/delicious/pop_delicious.php
3. Typologie: Dataviz
 Représentation de données (à priori non relationnelles)
 DataBlocks
 Voir Treemaps (Ben Scheidermann / 1990)
Outil quotidien de veille : Agrégation des liens les plus mémorisés sur delicious.com
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

12. http://projects.washingtonpost.com/top-secret-america/network/#/overall/most-activity/
3. Typologie: Dataviz
 Représentation de données
 DataCircles
45 organisations “secrètes” américaines et leurs fournisseurs (Washington Post)
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

13. http://100yearsofworldcuisine.com/
3. Typologie: Datalogy
 Des données représentées par des éléments du réel
“100 ans de cuisine mondiale“ (représentation du nombre des victimes des principaux conflits)
Par Clara Kayser-Bril, Nicolas Kayser-Bril and Marion Kotlarski (2011)
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

14. http://opte.org/maps/
3. Typologie: Datanets
 Interprétation graphique des graphes de données
 Représentation d’une topologie virtuelle (Web)
 Représentation de données relationnelles sous une forme cartographique
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

15. http://www.flickr.com/photos/walkingsf/4671594023/in/set-72157624209158632
3. Typologie: Datamaps
 “Territoires de données”
 Information géolocalisée (cf. International Civil Flight Traffic Mapping)
Cartographie des photos géolocalisées (Flickr) prises à New York par des touristes en rouge et par des locaux en bleu
Eric Fischer 2010
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

16. http://benfry.com/tendril/
3. Typologie: Dataesthetics
 Représentations artistiques, recherche d’une esthétique formelle, plastique
Tendril, un navigateur Web qui créé des sculptures typographique à partir de pages Web (Ben Fry 2000).
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

17. Roadtree / / Yohan Erent.2009
3. Typologie: Datatainment http://www.yohanerent.com/Arbre.html
 Interprétation recontextualisée / métaphorique / “détournée” de l’information (ludique)
Roadtree : extrapolation du traffic routier à Nantes (source : infocirculation http://www.infocirculation.fr/)
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

18. dataquarium / / G. Cliquet, D. Faydi, J. Dumail 2007
3. Typologie: Datatainment
 Représentation “tangible” de l’information
Transposition de l’activité sur l’intranet de l’Ecole de design et des flux entrants : connexions site Web / et sortants : envoi de mails
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011

19.  Bibliographie:
“Sémiologie graphique” / Jacques Bertin / 1967
“The Visual Display of Quantitative Information” / Edward Tufte / 2001
“Visualizing Data” / Ben Fry / 2007
“Atlas of Cyberspace” / Martin Dodge & Rob Kitchin / 2001
“DataFlow 1” 2009 / “DataFlow 2” 2010 / gestalten
“Feltron Annual Report” / Nicholas Feltron
 Webographie:
http://www.cybergeography.org/atlas/atlas.html
http://www.opte.org
http://www.visualcomplexity.com/vc
http://infosthetics.com
http://www.visualizing.org
http://ateliercartographie.wordpress.com/
http://library.lecolededesign.com/marquespages.php?q=infovis
http://www.daytum.com/
 Outils:
http://docs.google.com/support/bin/answer.py?hl=en&answer=99488&topic=15165 (Google docs)
http://flare.prefuse.org/ (Action Script)
http://www.processing.org
http://www.infovis-wiki.net/index.php?title=Toolkit_Links
http://gephi.org
+ “data mining” comme par exemple “Navicrawler” / Plug-in Firefox
4. Ressources
Information Visualization / La Cantine Numérique - Nantes / Innovation Design / G. Cliquet / 25 mai 2011