Datadesign

1 933 vues

Publié le

Cette presentation retrace l'histoire de la visualisation d'information avant d'en donner les clés. Nous donnons les insights d'une bonne dataviz, les pièges à éviter avant d'illustrer par des exemples.

Publié dans : Données & analyses
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 933
Sur SlideShare
0
Issues des intégrations
0
Intégrations
199
Actions
Partages
0
Téléchargements
45
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Datadesign

  1. 1. Conférence Visualisation de l’Information
  2. 2. 00 Le sommaire 01 04 02 05 06 03 07 02 L’histoire Constat Processus - collecter - traiter - editorialiser - formaliser Les pièges à éviter Les outils Data et éthique Les exemples
  3. 3. 01 L’histoire
  4. 4. 01 L’histoire 04 1200 1300 1400 1500 1600 1700 1800 1900 2000 Les égyptiens Les arbres généalogiques Richard of Holdingham cartographie D.Mendeleïev Tableau périodique F.Nightingale diagramme escargot C.Fourcroy Tableau poléométrique W.Playfair curve, pie and bar charts C.J.Minard Diagramme de Sankey P.E.Levasseur Treemap L.Perrozzo 3D
  5. 5. 01 L’histoire Les arbres généalogiques 05 issu de la présentation slideshare “Data design & interactive” d’avril 2012 - Geoffrey Dorne (graphism.fr)
  6. 6. 01 L’histoire 1290 - Richard of Holdingham - Hereford Mappa Mundi 06 image : http://www.amplab.ca/2013/10/28/borderlands-paratextuality-cartography/
  7. 7. 01 L’histoire 1782 - Charles de Fourcroy - Tableau Poléométrique 07 Issu de la présentation de Gaëtan Gaborit : http://fr.slideshare.net/gaetangab/visualisation-de-donnes-les-leons-de-lhistoire-13139160 Représentation de la superfi- cie de 200 villes afin d’iden- tifier la taille optimale d’une ville. • outils d’analyse • outils de médiation entre experts et décideurs
  8. 8. 01 L’histoire 1786 - William Playfair - bar, curve, pie charts William Playfair 08 images : http://fr.wikipedia.org/wiki/William_Playfair Courbe Histogramme Camembert
  9. 9. 01 L’histoire 1869 - Charles Joseph Minard - diagramme de sankey, campagne russe de Napoléon 09 images : http://fr.wikipedia.org/wiki/Charles_Joseph_Minard Charles Joseph Minard
  10. 10. 01 L’histoire 1857 - Florence Nightingale - Snail Diagram 10 Image : http://en.wikipedia.org/wiki/Florence_Nightingale Florence Nightingale La visualisation pour attirer l’attention du public sur un sujet sensible
  11. 11. 01 L’histoire 1869 - Pierre-Emile Levasseur - Treemap 11 image : http://indiemaps.com/blog/2008/12/early-cartograms/ Pierre-Émile Levasseur Premier Treemap de l’histoire. Levasseur ne pousse pas la conceptualisation jusqu’au bout mais reviendra dessus quelques années plus tard.
  12. 12. 01 L’histoire 1870 - Dimitri Mendeleïev - Tableau périodique 12 image : http://fr.wikipedia.org/wiki/Tableau_p%C3%A9riodique_des_%C3%A9l%C3%A9ments Dimitri Mendeleïev
  13. 13. 01 L’histoire 1880 - Luigi Perrozzo - Probabilita di Maritarsi 13 Issu de la présentation de Gaëtan Gaborit : http://fr.slideshare.net/gaetangab/visualisation-de-donnes-les-leons-de-lhistoire-13139160
  14. 14. 01 L’histoire 1908 - Première carte du métro de Londres 14 image : http://www.bbc.co.uk/london/travel/downloads/tube_map.html
  15. 15. 02 Constat
  16. 16. 02 Constat Le phénomène d’infobésité 16 “The world of data” par Oliver Munday en partenariat avec Good et IBM
  17. 17. 17 3 RESPONSABLES internet le stockagela numérisation 02 Constat Le phénomène d’infobésité
  18. 18. 02 Constat Le phénomène d’infobésité 18 Ce que cela entraîne Capacité de comprehension et synthétisation réduite Quantité d’informations retenues réduite incapacité à démêler le vrai du faux
  19. 19. 19 02 Constat définition du design Être empathique afin de comprendre le problème de l’utilisateur et savoir résoudre ses difficultés avec une solution fonctionnelle et élégante. Cette définition s’applique aux problèmes de la données qui sont : - trop d’information - saturation - manque de confiance - transparence
  20. 20. 03 Le processus de création
  21. 21. 03 Le processus de création Éditorialiser - quel objectif ? 21 QUEL OBJECTIF ? EXPLORATIONEXPLICATION • attrayant • impactant • facile à retenir, marquant • i i n l ale • r eau • c mpren re et re tituer
  22. 22. 03 Le processus de création Les phases de conception 22 EDITORIALISER 3 TRAITER 2 COLLECTER 1 4 FORMALISER
  23. 23. 03 Le processus de création Collecter 23 Collecter la donnée OPEN dATA VéRIfIER SA VéRACITé SéLECTIONNER • • pen ata u • pen ata nante • pen f fact • anque m n iale • le e t t n ami • a ilit e la urce • faire e eri cati n au a ar • re ar er il n y a pa e r e inc rence • pa e tr u an la nn e • nn e tructur e • f rmat e pl ita le
  24. 24. 03 Le processus de création Traiter la donnée 24 Traiter la donnée DéDOubLONERuNIFORMISER RELIER ENRICHIR PREMIERS TESTS S’améliorer sur excel : Top 10 des façons de nettoyer sa donnée
  25. 25. 03 Le processus de création Editorialiser 25 Les questions à se poser Editorialiser Quels sont mes enjeux ? Quel supportQui est mon public ? • uelle nt le inf prim r iale • uel ni eau e tail • n à empl yer • int e ue • mpren re cla i cati n pren re u recul • impli er mi l ie rap ique • naly er ir la c mple it , triturer le nn e facilement • r ir trat ie • l • r entati n ppt, p f • ite i • i • apier • c n rap ie
  26. 26. 03 Le processus de création Formaliser - Les couleurs 26 Mc Candless - Datavision - les religions Masturbation neutre oui neutre oui oui non oui condamné sacré oui oui sacré oui non oui non non oui oui oui sacré oui neutre oui neutre non oui oui neutre oui neutre non non oui non neutre neutre non non non oui oui oui non neutre neutre non non non oui oui oui non neutre neutre non non non oui oui oui non neutre oui non oui non oui non oui non oui neutre non neutre non neutre condamné non condamné sacré non non neutre non oui non oui non sacré neutre non neutre non sacré non oui non sacré non condamné condamné condamné sacré condamné non condamné sacré non non non non non non neutre condamné non non oui neutre condamné neutre oui oui non oui neutre non non non oui neutre neutre non oui non non non non condamné condamné condamné condamné condamné non non non non non oui non non oui non non non non oui non non non oui non non non non neutre non non non non condamné condamné condamné condamné oui non non non oui neutre condamné condamné condamné oui non oui non oui non condamné condamné condamné oui non non non oui neutre oui sacré neutre oui oui oui non oui non oui sacré neutre oui non non non sacré oui oui oui neutre oui oui oui non sacré oui oui oui neutre oui oui oui non oui oui oui oui neutre sacré oui oui non sacré neutre oui oui neutre oui oui oui neutre sacré non oui condamné condamné oui condamné oui condamné neutre oui neutre oui oui oui oui oui neutre oui oui oui oui oui neutre non oui non oui neutre neutre non neutre neutre non neutre non neutre oui oui oui oui sacré oui oui neutre oui neutre neutre neutre neutre neutre non non non neutre Usure Boisson Jeu Contraception Sexe avant Mariage Divorce Adultère Clergé marié
  27. 27. 03 Le processus de création Formaliser - Les couleurs 27 Mc Candless - Datavision - les religions Masturbation Usure Boisson Jeu Contraception Sexe avant Mariage Divorce Adultère Clergé marié
  28. 28. 03 Le processus de création iconographie 28 http://thenounproject.com/
  29. 29. 03 Le processus de création attention au contexte 29 ENfANT jouet sex toy AdULTE VS ATTENTION ! Au CONTEXTE
  30. 30. 03 Le processus de création attention au contexte 30 Mc Candless - Datavision - les religions
  31. 31. 03 Le processus de création Principes cognitifs - Bertin 31 Jacque Bertin - semiologie graphique
  32. 32. 03 Le processus de création Principes cognitifs - Bertin 32 Jacque Bertin - semiologie graphique Combien y a-t-il de 7 ?
  33. 33. 03 Le processus de création Principes cognitifs - Bertin 33 Jacque Bertin - semiologie graphique La couleur
  34. 34. 03 Le processus de création Principes cognitifs - Bertin 34 Jacque Bertin - semiologie graphique La taille
  35. 35. 03 Le processus de création Principes cognitifs - Bertin 35 Jacque Bertin - semiologie graphique L’orientation
  36. 36. 03 Le processus de création Formaliser - Les formes 36 David Mac Candless - Information is beautiful
  37. 37. 03 Le processus de création Formaliser - Les formes 37 www.extremepresentation.com/design/charts
  38. 38. 03 Le processus de création Formaliser - Les formes 38 dataviz catalogue
  39. 39. 04 Les pièges à éviter
  40. 40. 04 Les pièges à éviter 40 mauvais choix de graphique 1 Trop d’information 2 biais visuel 3 comparer des valeurs non comparables4 http://viz.wtf/
  41. 41. 04 Les pièges à éviter 41 mauvais choix de graphique 1 Trop d’information 2 biais visuel 3 comparer des valeurs non comparables4 http://viz.wtf/
  42. 42. 04 Les pièges à éviter 42 mauvais choix de graphique 1 Trop d’information 2 biais visuel 3 comparer des valeurs non comparables4 http://viz.wtf/ Ce que l’on lit Ce qu’il faudrait lire
  43. 43. 04 Les pièges à éviter 43 mauvais choix de graphique 1 Trop d’information 2 biais visuel 3 comparer des valeurs non comparables4 http://viz.wtf/
  44. 44. 05 Les outils
  45. 45. 05 Les outils cartographie des outils de dataviz 45
  46. 46. 05 Les outils Raw 46
  47. 47. 05 Les outils Infogram 47
  48. 48. 05 Les outils Gephi 48
  49. 49. 05 Les outils Google charts 49
  50. 50. 06 Data et éthique
  51. 51. 06 data et éthique 51 ATTENTION AuX DONNéES PERSONNELLES êTRE ObJECTIF DANS LA REPRéSENTATION (ON PEuT FAIRE DIRE CE Qu’ON vEuT AuX DATA) TOuJOuRS DIRE LES FAIbLESSES DE LA DONNéE ET INFORMER DES bIAIS
  52. 52. 07 Les exemples
  53. 53. Cartographie des mots-clé partagés par les différents projets de B-Com Catégorisation via Gephi. Intéressante ? Catégorie 2 Catégorie 3 Catégorie 1 Images Expérience utilisateur Réalité augmentée e-Santé Réseaux Qualité d'usage Acceptabilité Sécurité
  54. 54. Cartographie des mots-clé partagés par les différents projets de B-Com Catégorisation via Gephi. Intéressante ? Réseaux Images E-Santé Résilience Efficacité Evolutivité Optique Radio Codage Consommation énergétique FiabilitéFlexibilité Ubiquité Convergence Qualité d'usage Transparence Mobilité Acceptabilité Sécurité Architecture Virtualisation Cloud X as a service Images Acquisition Modélisation Compression Format Contenus Méta-données Multivue Son Expérience utilisateur Présentation Interaction Métaphores Réalité augmentée réalité virtuelle Immersion Interfaces Design Usages Emotion Utilisabilité Evolution sociétale Création Confidentialité Certification Anonymisation Tatouage Traçabilité Biométrie Authentification e-Santé Geste chirurgical et thérapeutique Planification Recalage Dossier patient Indexation Sémantique Big Data Evaluation Interopérabilité Télésanté Diagnostic partagé Réseaux
  55. 55. http://guns.periscopic.com/?year=2013
  56. 56. http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?_r=0
  57. 57. http://www.bloomberg.com/graphics/2015-whats-warming-the-world/
  58. 58. https://sexperienceuk.channel4.com/the-sexperience-1000#/history/virginity
  59. 59. http://feltron.com/
  60. 60. http://lareclame.fr/canal+film+independant
  61. 61. http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=0
  62. 62. http://www.comeetie.fr/galerie/velib/in.html
  63. 63. http://graphicambient.com/2013/07/01/asx-timeline-wall-australia/
  64. 64. www.oecdbetterlifeindex.org
  65. 65. 08 Bibliographie

×