Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction à la visualisation

Introduction à la visualisation

Une introduction à la visualisation de données dans le cadre de l'école d'été d'architecture de l'information à l'UQAM.

Deb6636f344e6071fd9fe70724825ac6?s=128

sebastien

May 01, 2011
Tweet

More Decks by sebastien

Other Decks in Design

Transcript

  1. ffunction inc. COURS La visualisation de données (dans les projets

    Web) Sébastien Pierre, ffunction inc. @École d'été en Architecture de l'Information, Université de Montréal, Mai 2011 www.ffctn.com
  2. ffunction inc. Sébastien Pierre Ingénieur logiciel (France) Maîtrise Informatique (France)

    Bac. Design (France) R&D, informatique industrielle Interface, visualisation de données FFunction 2008 Montréal Ouvert 2010
  3. 3 ffunction inc. Le cours OBJECTIFS > Donner un aperçu

    de ce qu'est la visualisation > Donner une base théorique pour la comprendre > Donner une compréhension de sa pratique
  4. 4 ffunction inc. Le cours DÉROULEMENT > Théorie et exemples

    > Exercice pratique > Discussion
  5. 5 ffunction inc. Visualisation de données Contexte et Problématiques

  6. 6 ffunction inc. CONSTAT Nous sommes surchargés d'information

  7. 7 ffunction inc. CONSTAT Nous sommes surchargés d'information Nous produisons

    tous les deux jours autant d'information que nous en avons produit jusqu'en 2003 Nous produisons tous les deux jours autant d'information que nous en avons produit jusqu'en 2003 Eric Schmidt, CEO de Google @Techonomy 2010
  8. 8 ffunction inc.

  9. 9 ffunction inc. PROBLÉMATIQUE Comment faire passer le message dans

    cet environnement? PROBLÉMATIQUE Comment faire passer le message dans cet environnement?
  10. 10 ffunction inc. CONSTAT La nature des informations a changé

    Nous sommes passés de données numériques à deux dimensions à des données numériques, textuelles, à plusieurs dimensions Nous sommes passés de données numériques à deux dimensions à des données numériques, textuelles, à plusieurs dimensions
  11. 11 ffunction inc. Pendant longtemps les informations étaient représentables sous

    formes tabulaires Pendant longtemps les informations étaient représentables sous formes tabulaires
  12. 12 ffunction inc.

  13. 13 ffunction inc. La NATURE et le VOLUME des données

    ont changé La NATURE et le VOLUME des données ont changé
  14. 14 ffunction inc. PROBLÉMATIQUE Comment faire pour interpréter ces nouveaux

    types de données? PROBLÉMATIQUE Comment faire pour interpréter ces nouveaux types de données?
  15. 15 ffunction inc. POLANOID COMMUNITY: A social network visualization, Julien

    Bayle 2007
  16. 16 ffunction inc. CONSTAT Nous sommes dans une société de

    l'information... et de l'image
  17. 17 ffunction inc. CONSTAT Mais nous ne tirons pas encore

    parti de tout notre potentiel...
  18. 18 ffunction inc. Analytique Logique Rationnel Analytique Logique Rationnel

  19. 19 ffunction inc. Créatif Holistique Intuition Créatif Holistique Intuition

  20. 20 ffunction inc. PROBLÉMATIQUE Comment tirer parti des facultés sous-utilisées

    de notre cerveau pour mieux comprendre l'information? PROBLÉMATIQUE Comment tirer parti des facultés sous-utilisées de notre cerveau pour mieux comprendre l'information?
  21. 21 ffunction inc. Hans Rosling, New Insights on Poverty, TED

    2007 http://www.ted.com/talks/hans_rosling_reveals_new_insights_on_poverty.html
  22. 22 ffunction inc. Feltron Annual Report 2010, Nicholas Felton, 2011

    http://feltron.com
  23. 23 ffunction inc. The Billion Dollar Gram, Davic McCandless, 2009

    http://www.informationisbeautiful.net/2009/the-billion-dollar-gram/
  24. 24 ffunction inc. New York Times, Mapping America, visualisation des

    données du recensement, 2010 http://projects.nytimes.com/census/2010/explorer
  25. 25 ffunction inc. iTunes, visualisation de l'espace alloué, Apple inc,

    2009 www.apple.com/itunes
  26. 26 ffunction inc. Google Analytics, 2011 http://analytics.google.com

  27. 27 ffunction inc. Geckoboard, tableau de bord configurable pour entreprise

    http://www.geckoboard.com/
  28. 28 ffunction inc. ZEO, réveil intelligent, 2010 http://myzeo.com

  29. 29 ffunction inc. The Geotaggers' World Atlas, Eric Fisher, 2010

    http://www.flickr.com/photos/walkingsf/sets/72157623971287575/
  30. 30 ffunction inc. TENDANCE « data is the new oil

    »
  31. 31 ffunction inc. TENDANCE « data is the new soil

    » Citation de David McCandless, TED, 2010 http://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization.html
  32. 32 ffunction inc. OUVERTURE Les données sont une nouvelle source

    de richesse encore peu exploitée...
  33. 33 ffunction inc. OUVERTURE Les gouvernements l'ont compris avec le

    phénomène des données ouvertes (open data)
  34. 34 ffunction inc. OUVERTURE Dans les entreprises, on parle d'intelligence

    d'affaire et de « big data »
  35. 35 ffunction inc. Visualisation de données Introduction

  36. 36 ffunction inc. DÉFINITION Représentation graphique d'un ensemble de données

  37. 37 ffunction inc. DÉFINITION Représentation graphique d'un ensemble de données

    Notons qu'il n'y a pas (encore) vraiment de définition officielle du terme... Notons qu'il n'y a pas (encore) vraiment de définition officielle du terme...
  38. 38 ffunction inc. La graphique et le traitement graphique de

    l'information, Jacques Bertin, 1967
  39. 39 ffunction inc. La graphique et le traitement graphique de

    l'information, Jacques Bertin, 1967
  40. 40 ffunction inc. La graphique et le traitement graphique de

    l'information, Jacques Bertin, 1967 On remarque immédiatement les variations entre haute et basses saisons On remarque immédiatement les variations entre haute et basses saisons
  41. 41 ffunction inc. La graphique et le traitement graphique de

    l'information, Jacques Bertin, 1967 La prédominance des hommes d'affaires... La prédominance des hommes d'affaires...
  42. 42 ffunction inc. La graphique et le traitement graphique de

    l'information, Jacques Bertin, 1967 Et de la clientèle locale Et de la clientèle locale
  43. 43 ffunction inc. La graphique et le traitement graphique de

    l'information, Jacques Bertin, 1967 Et tout ceci, sans avoir fait un seul calcul! Et tout ceci, sans avoir fait un seul calcul!
  44. 44 ffunction inc. PARTICULARITÉ La visualisation permet de comprendre intuitivement

    les données
  45. 45 ffunction inc. Similar diversity, Philipp Steinweber & Andreas Koller,

    2001
  46. 46 ffunction inc. Visualisation de réseau social, LinkedIn InMaps, 2011

  47. 47 ffunction inc. PARTICULARITÉ La visualisation rend les rapports et

    les relations tangibles
  48. 48 ffunction inc. Pourquoi la visualisation? • Tirer parti de

    notre cerveau droit! • Révéler les relations cachées dans les données • Communiquer de l'information complexe
  49. 49 ffunction inc. PRÉCISION Données vs Information

  50. 50 ffunction inc. PRÉCISION Données vs Information Les données sont

    la matière première, brute, qui n'a pas encore été interprétée Les données sont la matière première, brute, qui n'a pas encore été interprétée
  51. 51 ffunction inc. PRÉCISION Données vs Information L'information est ce

    que l'on retire de l'interprétation des données L'information est ce que l'on retire de l'interprétation des données
  52. 52 ffunction inc. PRÉCISION Infographique vs Visualisation http://www.readwriteweb.com/cloud/2011/01/difference-between-datavisualization-infographics.php

  53. 53 ffunction inc. PRÉCISION Infographique vs Visualisation http://www.readwriteweb.com/cloud/2011/01/difference-between-datavisualization-infographics.php Un infographique

    est une communication visuelle d'information, souvent avec une approche éditoriale Un infographique est une communication visuelle d'information, souvent avec une approche éditoriale
  54. 54 ffunction inc. PRÉCISION Infographique vs Visualisation http://www.readwriteweb.com/cloud/2011/01/difference-between-datavisualization-infographics.php Une visualisation

    est une communication graphique de données, où l'on laisse les données s'exprimer Une visualisation est une communication graphique de données, où l'on laisse les données s'exprimer
  55. 55 ffunction inc. PRÉCISION Infographique vs Visualisation http://www.readwriteweb.com/cloud/2011/01/difference-between-datavisualization-infographics.php En pratique,

    les infographiques sont souvent crées à la main, avec un logiciel de dessin vectoriel (Adobe Illustrator) En pratique, les infographiques sont souvent crées à la main, avec un logiciel de dessin vectoriel (Adobe Illustrator)
  56. 56 ffunction inc. PRÉCISION Infographique vs Visualisation http://www.readwriteweb.com/cloud/2011/01/difference-between-datavisualization-infographics.php Les visualisations

    sont quand à elles générées automatiquement par un programme, souvent crée spécifiquement Les visualisations sont quand à elles générées automatiquement par un programme, souvent crée spécifiquement
  57. ffunction inc. QUESTION Quel serait les rapports entre visualisation et

    architecture d'information?
  58. 58 ffunction inc. Visualisation de données Le langage graphique

  59. 59 ffunction inc. DONNÉES

  60. 60 ffunction inc. DONNÉES

  61. 61 ffunction inc. DONNÉES

  62. 62 ffunction inc. DONNÉES

  63. 63 ffunction inc. DONNÉES Quel mode de représentation choisir? Quel

    mode de représentation choisir?
  64. ffunction inc. Les différents types de données

  65. ffunction inc. 2 3 4 5 6 7 8 9

    0 2 % $ .
  66. ffunction inc. 2 3 4 5 6 7 8 9

    0 2 % $ . Les chiffres sont les premiers éléments d'information auxquels nous pensons (quantitatif) Les chiffres sont les premiers éléments d'information auxquels nous pensons (quantitatif)
  67. ffunction inc. QUESTION Quels autres types d'information existent?

  68. ffunction inc. Bleu Vert Jaune Rouge Orange Orange Violet Mauve

    Brun
  69. ffunction inc. Bleu Vert Jaune Rouge Orange Orange Violet Mauve

    Brun Il y a aussi de l'information représentant des éléments non-quantifiables/quantifiés (nominal) Il y a aussi de l'information représentant des éléments non-quantifiables/quantifiés (nominal)
  70. ffunction inc. Glacé Froid Chaud Brûlant

  71. ffunction inc. Glacé Froid Chaud Brûlant Parfois on peut ordonner

    ces éléments entre eux (ordinal) Parfois on peut ordonner ces éléments entre eux (ordinal)
  72. ffunction inc. B C A L'information peut être plus complexe

    et décrire une structure L'information peut être plus complexe et décrire une structure
  73. ffunction inc. A A Un processus... Un processus...

  74. ffunction inc. Ou plus généralement des relations entre des éléments

    Ou plus généralement des relations entre des éléments
  75. ffunction inc. Tous ces types d'informations peuvent se représenter de

    différentes manières
  76. ffunction inc.

  77. ffunction inc. Les diagrammes en barre sont bons pour l'information

    numérique discrète Les diagrammes en barre sont bons pour l'information numérique discrète
  78. ffunction inc.

  79. ffunction inc. Les diagrammes en ligne sont bons pour l'information

    numérique continue et s'utilisent pour indiquer des tendances Les diagrammes en ligne sont bons pour l'information numérique continue et s'utilisent pour indiquer des tendances
  80. ffunction inc.

  81. ffunction inc. Les diagrammes en surface indiquent un cumul de

    valeurs Les diagrammes en surface indiquent un cumul de valeurs
  82. ffunction inc.

  83. ffunction inc. Les diagrammes en tarte sont bons pour montrer

    des proportions (%) Les diagrammes en tarte sont bons pour montrer des proportions (%)
  84. ffunction inc. Que l'on peut aussi exprimer en diagramme en

    barres Que l'on peut aussi exprimer en diagramme en barres
  85. ffunction inc. Ce qui offre l'avantage de pouvoir avoir plusieurs

    niveaux de détail Ce qui offre l'avantage de pouvoir avoir plusieurs niveaux de détail
  86. ffunction inc. PRODUCTION QUALITÉ RECYCLAGE LIVRAISON DEFECTUEUX BONNE Les «

    flowcharts » permettent de représenter des processus Les « flowcharts » permettent de représenter des processus
  87. ffunction inc. RESPONSABLE RESPONSABLE DIRECTEUR EMPLOYÉ EMPLOYÉ EMPLOYÉ Ou des

    structures organisationnelles ou conceptuelles Ou des structures organisationnelles ou conceptuelles
  88. ffunction inc. Et il existe de nombreux formalismes (ex :

    Gantt) Et il existe de nombreux formalismes (ex : Gantt)
  89. ffunction inc. un réseau de Petri un réseau de Petri

  90. ffunction inc. Et un digramme de Pareto Et un digramme

    de Pareto
  91. ffunction inc. Type d'information et représentation • IDENTIFIER L'INFORMATION Quel

    est son type? Combien d'éléments/quelle plage de valeur ?
  92. ffunction inc. Type d'information et représentation • CHOISIR LA BONNE

    REPRÉSENTATION Qu'est-ce que l'on veut montrer, est-ce compatible avec le type de données?
  93. ffunction inc. EXERCICE Pensez à différentes manières de représenter les

    données suivantes
  94. ffunction inc. Exercice ÉQUIPE JAN. FEV. MAR. AVR. A 3,1

    4,2 4,1 3,2 B 2,9 2,8 3,1 3,4 C 3,4 2,8 2,5 2,9 D 2,3 2,4 2,5 2,4 E 3,3 3,4 4,0 4,1
  95. ffunction inc. Exercice ÉQUIPE JAN. FEV. MAR. AVR. A 3,1

    4,2 4,1 3,2 B 2,9 2,8 3,1 3,4 C 3,4 2,8 2,5 2,9 D 2,3 2,4 2,5 2,4 E 3,3 3,4 4,0 4,1 Il s'agit ici d'un tableau comparant les performances d'équipes (fictives) au sein d'une organisation Il s'agit ici d'un tableau comparant les performances d'équipes (fictives) au sein d'une organisation
  96. ffunction inc. Exercice ÉQUIPE JAN. FEV. MAR. AVR. A 3,1

    4,2 4,1 3,2 B 2,9 2,8 3,1 3,4 C 3,4 2,8 2,5 2,9 D 2,3 2,4 2,5 2,4 E 3,3 3,4 4,0 4,1 Le type de données est ici très classique : tabulaire, avec dimension temporelle. Le type de données est ici très classique : tabulaire, avec dimension temporelle.
  97. ffunction inc. Exercice ÉQUIPE JAN. FEV. MAR. AVR. A 3,1

    4,2 4,1 3,2 B 2,9 2,8 3,1 3,4 C 3,4 2,8 2,5 2,9 D 2,3 2,4 2,5 2,4 E 3,3 3,4 4,0 4,1
  98. 98 ffunction inc. Visualisation de données Le langage graphique

  99. ffunction inc. La Graphique, Jacques Bertin, Revue Communications N.15, 1970

  100. ffunction inc. Il existe plusieurs dimensions dans le visuel, en

    plus de la position : la forme, la couleur et la taille en sont quelques unes. Il existe plusieurs dimensions dans le visuel, en plus de la position : la forme, la couleur et la taille en sont quelques unes.
  101. ffunction inc. f(x) =

  102. ffunction inc. f(x) =

  103. ffunction inc. f(x) = Dans la graphique, on projette les

    valeurs dans un espace visuel Dans la graphique, on projette les valeurs dans un espace visuel
  104. ffunction inc. Typographie, mise en page et graphisme (pour la

    présentation d'information)
  105. ffunction inc. QUESTION Quels sont, selon vous, les critères d'un

    bon graphisme?
  106. ffunction inc. Principes de base • SIMPLICITÉ Faire la place

    à l'information, et non pas à la décoration
  107. ffunction inc. Principes de base • COHÉRENCE Utiliser un langage

    graphique où chaque dimension choisie est représentée de la même manière (forme, couleur, taille, etc)
  108. ffunction inc. Principes de base • RÉGULARITÉ Espaces, alignements, taille

    de caractères, éléments disposés sur une grille.
  109. ffunction inc. Le rôle des journaux est de communiquer beaucoup

    d'information, et ils sont une bonne référence en la matière. Le rôle des journaux est de communiquer beaucoup d'information, et ils sont une bonne référence en la matière.
  110. ffunction inc.

  111. ffunction inc.

  112. ffunction inc. TITRE VISUEL TITRE TITRE TITRE TITRE Contenu contenu

    contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu Contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu Contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu Contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
  113. ffunction inc. Composition • HIÉRARCHIE DE LECTURE L'œil est naturellement

    guidé au travers d'un visuel en fonction des masses, de leur disposition et de leur contraste – la hiérarchie de lecture devrait suivre la hiérarchie de l'information.
  114. ffunction inc. Choix stylistiques • CONNOTATION La typographie, la taille

    et les couleurs influencent la lecture que nous faisons des choses.
  115. ffunction inc. bonjour!

  116. ffunction inc. BONJOUR! Les CAPITALES permettent d'attirer l'attention sans utiliser

    un autre corps de caractère Les CAPITALES permettent d'attirer l'attention sans utiliser un autre corps de caractère
  117. ffunction inc. BONJOUR! La taille du texte appuie le message

    en lui donnant plus de poids La taille du texte appuie le message en lui donnant plus de poids
  118. ffunction inc. bonjour!

  119. ffunction inc. bonjour! Les couleurs disent quelque chose, mais faites

    attention car l'interprétation varie selon les cultures Les couleurs disent quelque chose, mais faites attention car l'interprétation varie selon les cultures
  120. ffunction inc. bonjour! Le contraste permet de donner du poids

    en utilisant les couleurs Le contraste permet de donner du poids en utilisant les couleurs
  121. ffunction inc. Bonjour!

  122. ffunction inc. Bonjour! Le choix de la typographie peut avoir

    un impact important sur l'interprétation du message Le choix de la typographie peut avoir un impact important sur l'interprétation du message
  123. ffunction inc. Typographie • TAILLE, GRAISSE, COULEUR & STYLE Chaque

    élément va avoir une influence sur l'interprétation de l'information, car la représentation connote l'information.
  124. ffunction inc. À RETENIR La visualisation est une fonction graphique

    des données
  125. ffunction inc. À RETENIR Il s'agit plus de construction visuelle

    que de création graphique
  126. ffunction inc. À RETENIR Simplicité, cohérence et sobriété sont les

    éléments-clé
  127. ffunction inc. À RETENIR Les choix stylistiques connotent le message,

    il faut les utiliser avec parcimonie
  128. 128 ffunction inc. Visualisation de données La pratique professionnelle

  129. ffunction inc. COMPÉTENCES La visualisation de données est une pratique

    nouvelle Il n'y a pas encore de cursus « officiel » car la pratique est très jeune, et les profils sont donc très variés.
  130. 130 ffunction inc. Compétences/profil ANALYSTE > Comprendre les données >

    Déterminer leurs types et relations > Identifier des indicateurs-clé
  131. 131 ffunction inc. Compétences/profil PROGRAMMEUR > Collecter/extraire les données >

    Normaliser/ « réparer » les données > Développer les représentations
  132. 132 ffunction inc. Compétences/profil GRAPHISTE > Organisation, lisibilité de la

    présentation > Choix des couleurs & typographies > Création de nouveaux modes de présentation
  133. ffunction inc. FORME/ REPRÉSENTATION MATIÈRE/ DONNÉES FONCTION/ PROGRAMME

  134. ffunction inc. FORME/ REPRÉSENTATION MATIÈRE/ DONNÉES FONCTION/ PROGRAMME Un analyste

    programmeur
  135. ffunction inc. FORME/ REPRÉSENTATION MATIÈRE/ DONNÉES FONCTION/ PROGRAMME Designer graphique

  136. ffunction inc. FORME/ REPRÉSENTATION MATIÈRE/ DONNÉES FONCTION/ PROGRAMME Architecte de

    l'information
  137. ffunction inc. FORME/ REPRÉSENTATION MATIÈRE/ DONNÉES FONCTION/ PROGRAMME

  138. ffunction inc. COMPÉTENCES La visualisation s'appuie sur de nombreuses disciplines

  139. ffunction inc. ARCHITECTURE DE L'INFORMATION DESIGN D'INTERFACE DESIGN D'INTERACTION PROGRAMMATION

  140. ffunction inc. ARCHITECTURE DE L'INFORMATION DESIGN D'INTERFACE DESIGN D'INTERACTION PROGRAMMATION

    Être capable d'analyser et de structurer l'information
  141. ffunction inc. ARCHITECTURE DE L'INFORMATION DESIGN D'INTERFACE DESIGN D'INTERACTION PROGRAMMATION

    Être capable de concevoir des représentation attrayantes et fonctionnelles
  142. ffunction inc. ARCHITECTURE DE L'INFORMATION DESIGN D'INTERFACE DESIGN D'INTERACTION PROGRAMMATION

    Offrir des manières simples et Intéressantes d'interagir avec les données
  143. ffunction inc. ARCHITECTURE DE L'INFORMATION DESIGN D'INTERFACE DESIGN D'INTERACTION PROGRAMMATION

    Concrétiser le tout par un programme
  144. ffunction inc. ARCHITECTURE DE L'INFORMATION PROGRAMMATION ARCHITECTURE DE L'INFORMATION DESIGN

    D'INTERFACE DESIGN D'INTERACTION PROGRAMMATION SCIENCES COGNITIVES ERGONOMIE SIGNALETIQUE TYPOGRAPHIE STATISTIQUES ESTHETIQUE
  145. ffunction inc. EN PRATIQUE Quels sont les différents rôles dans

    une équipe de visualisation?
  146. ffunction inc. Journaliste de données Les rôles

  147. ffunction inc. Analyste Journaliste de données Les rôles

  148. ffunction inc. Analyste Programmeur Journaliste de données Les rôles

  149. ffunction inc. Analyste Designer graphique Programmeur Journaliste de données Les

    rôles
  150. ffunction inc. FORME Analyste Designer graphique Programmeur MATIERE FONCTION Journaliste

    de données Les rôles
  151. ffunction inc. EN PRATIQUE Quelle place a la visualisation dans

    un projet?
  152. ffunction inc. QUESTION 1 Avez-vous des données?

  153. ffunction inc. QUESTION 1 Avez-vous des données? Est-ce que celles-ci

    pourraient vous permettre de prendre de meilleurs décisions? Est-ce que celles-ci pourraient vous permettre de prendre de meilleurs décisions?
  154. ffunction inc. QUESTION 1 Avez-vous des données? Est-ce qu'elles pourraient

    apporter quelque chose à vos utilisateurs ou à votre entreprise? Est-ce qu'elles pourraient apporter quelque chose à vos utilisateurs ou à votre entreprise?
  155. ffunction inc. QUESTION 2 Voulez-vous améliorer un processus ou communiquer

    de l'information?
  156. ffunction inc. QUESTION 2 Voulez-vous améliorer un processus ou communiquer

    de l'information? La visualisation permet de comprendre des phénomènes complexes et donc d'améliorer le fonctionnement de systèmes La visualisation permet de comprendre des phénomènes complexes et donc d'améliorer le fonctionnement de systèmes
  157. ffunction inc. QUESTION 2 Voulez-vous améliorer un processus ou communiquer

    de l'information? Elle permet également d communiquer de l'information de manière visuelle, vous permettant de faire comprendre des phénomènes complexes. Elle permet également d communiquer de l'information de manière visuelle, vous permettant de faire comprendre des phénomènes complexes.
  158. ffunction inc. INFOGRAPHIQUE VISUALISATIONS INTERACTIVE Pour communiquer

  159. ffunction inc. INFOGRAPHIQUE VISUALISATIONS INTERACTIVE Pour communiquer Ils communiquent des

    chiffres, faits et données de manière visuelle et attrayantes. L'aspect narratif est primordial Ils communiquent des chiffres, faits et données de manière visuelle et attrayantes. L'aspect narratif est primordial
  160. ffunction inc. INFOGRAPHIQUE VISUALISATIONS INTERACTIVE Pour communiquer Ils communiquent des

    chiffres, faits et données de manière visuelle et attrayantes. L'aspect narratif est primordial Ils communiquent des chiffres, faits et données de manière visuelle et attrayantes. L'aspect narratif est primordial
  161. ffunction inc. Pour communiquer Expliquer visuellement Communiquer un message complexe

    Créer du buzz sur les médias sociaux INFOGRAPHIQUE VISUALISATION INTERACTIVE Expliquer et laisser découvrir Permettre aux utilisateurs de ne pas être passifs Ouvrir une discussion basée sur les données
  162. ffunction inc. Sleep Is Awesome, FFunction, 2010

  163. ffunction inc. Rapport annuel sur le sida, FFunction, 2011

  164. ffunction inc. VISUALISATION EXPLORATOIRE TABLEAU DE BORD Pour comprendre

  165. ffunction inc. VISUALISATION EXPLORATOIRE TABLEAU DE BORD Pour comprendre Elles

    permettent d'explorer et de comprendre des données complexes. Il est important d'être fidèle aux données pour éviter les erreurs d'interprétation. Elles permettent d'explorer et de comprendre des données complexes. Il est important d'être fidèle aux données pour éviter les erreurs d'interprétation.
  166. ffunction inc. VISUALISATION EXPLORATOIRE TABLEAU DE BORD Pour comprendre Ils

    donnent une vision d'ensemble des données et permettent d'avoir en un clin d'oeil l'état d'un système complexe. Ils donnent une vision d'ensemble des données et permettent d'avoir en un clin d'oeil l'état d'un système complexe.
  167. ffunction inc. Pour comprendre Comprendre des phénomènes complexes Trouver des

    corrélations entre différentes variables Identifier des tendances ou des motifs VISUALISATION EXPLORATOIRE TABLEAU DE BORD Avoir une vision d'ensemble Connaître en un clin d’œil l'état de systèmes Réagir plus rapidement aux événements
  168. ffunction inc. Visualisation du budget fédéral américain, FFunction, 2011

  169. ffunction inc. Tableau de bord des visiteurs et visionnements, ONF

    FFunction, 2009
  170. ffunction inc. INFOGRAPHIQUE VISUALISATION DATA JOURNALISME VISUALISATION EXPLORATOIRE TABLEAU DE

    BORD DATA JOURNALISME DESIGN GRAPHIQUE DÉVELOPPEMENT COMPLEXITÉ COMMUNICATION COMPRÉHENSION
  171. ffunction inc. EN PRATIQUE Comment puis-je appliquer la visualisation dans...

  172. ffunction inc. Un site Web? • Utiliser des infographiques pour

    communiquer l'information (services d'une entreprise, fonctionnement du site) • Utiliser des visualisations pour rendre plus accessibles vos données (tableaux, statistiques, etc)
  173. ffunction inc. Une application? • Donner une vision d'ensemble avec

    des résumés visuels • Embarquez des visualisations de données dans vos listes et vos tableaux pour rendre les masses de chiffre plus visibles
  174. ffunction inc. EN PRATIQUE Quels sont les étapes principales du

    travail de visualisation?
  175. ffunction inc. Le processus • 1 : ANALYSER ET DIMENSIONNER

    Décomposer les données, identifier leur type, les dimensionner et les classer par importance ou de manière hiérarchique
  176. ffunction inc. Le processus • 2 : RECHERCHE DES REPRÉSENTATIONS

    Quelles formes sont les plus adaptées aux données présentées? Comment exprimer graphiquement les différentes propriétés?
  177. ffunction inc. Le processus • 3 : ASPECT NARRATIF Qu'est-ce

    que les données montrent? Que voulez-vous communiquer avec elles? Voulez- vous communiquer seulement des chiffres ou une analyse?
  178. ffunction inc. Le processus • 4 : HIÉRARCHIE DE LECTURE

    Quelle est l'organisation de l'information que vous voulez présenter? Comment allez vous organiser leur composition graphique?
  179. ffunction inc. Le processus • 5 : LANGAGE GRAPHIQUE Comment

    allez vous traduire les propriétés/dimensions des données de manière visuelle? Quels codes et symboles allez vous choisir?
  180. ffunction inc. Le processus • 6 : MÉDIAS Sur quels

    supports seront diffusés vos graphiques? Article, présentation, poster, sur le Web?
  181. ffunction inc. Le processus • 7 : INTERACTION Quel pouvoir

    allez-vous donner aux utilisateurs? Quel sera leur rapport avec la visualisation?
  182. ffunction inc. DONNÉES/ANALYSE DESIGN/CONCEPTION PROGRAMMATION//DÉVELOPPEMENT Flots de travail

  183. ffunction inc. CONCLUSION Simplicité, cohérence, régularité

  184. ffunction inc. EXERCICE FINAL Du texte à l'image

  185. ffunction inc. Objectifs de l'exercice • ANALYSER L'INFORMATION Un texte

    est riche en information de différents types : chiffres, noms, adjectifs – qui ne sont pas forcément homogène. Comment allez-vous analyser et extraire l'information?
  186. ffunction inc. Objectifs de l'exercice • DÉTERMINER VOTRE PROPOS Qu'est-ce

    que les données vous disent? Faut-il communiquer toutes les données, ou seulement une partie? Est-ce que certaines vous semblent plus intéressantes que d'autres?
  187. ffunction inc. Objectifs de l'exercice • DÉFINIR VOTRE REPRÉSENTATION Tableau,

    graphique, diagramme, ou encore mélange de ceux-ci. Choisissez les modes de représentation qui conviennent à vos données et à votre message.
  188. ffunction inc.

  189. ffunction inc. Comment pourriez-vous représenter cette information? Comment pourriez-vous représenter

    cette information?
  190. 190 ffunction inc. Merci! www.ffctn.com