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.

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. 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
  5. 9 ffunction inc. PROBLÉMATIQUE Comment faire passer le message dans

    cet environnement? PROBLÉMATIQUE Comment faire passer le message dans cet environnement?
  6. 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
  7. 11 ffunction inc. Pendant longtemps les informations étaient représentables sous

    formes tabulaires Pendant longtemps les informations étaient représentables sous formes tabulaires
  8. 13 ffunction inc. La NATURE et le VOLUME des données

    ont changé La NATURE et le VOLUME des données ont changé
  9. 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?
  10. 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?
  11. 21 ffunction inc. Hans Rosling, New Insights on Poverty, TED

    2007 http://www.ted.com/talks/hans_rosling_reveals_new_insights_on_poverty.html
  12. 23 ffunction inc. The Billion Dollar Gram, Davic McCandless, 2009

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

    données du recensement, 2010 http://projects.nytimes.com/census/2010/explorer
  14. 29 ffunction inc. The Geotaggers' World Atlas, Eric Fisher, 2010

    http://www.flickr.com/photos/walkingsf/sets/72157623971287575/
  15. 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
  16. 33 ffunction inc. OUVERTURE Les gouvernements l'ont compris avec le

    phénomène des données ouvertes (open data)
  17. 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...
  18. 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
  19. 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...
  20. 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
  21. 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!
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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)
  28. 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
  29. 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)
  30. 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)
  31. 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)
  32. 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
  33. ffunction inc. Ou plus généralement des relations entre des éléments

    Ou plus généralement des relations entre des éléments
  34. 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
  35. 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
  36. ffunction inc. Les diagrammes en surface indiquent un cumul de

    valeurs Les diagrammes en surface indiquent un cumul de valeurs
  37. ffunction inc. Les diagrammes en tarte sont bons pour montrer

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

    barres Que l'on peut aussi exprimer en diagramme en barres
  39. 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
  40. ffunction inc. PRODUCTION QUALITÉ RECYCLAGE LIVRAISON DEFECTUEUX BONNE Les «

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

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

    Gantt) Et il existe de nombreux formalismes (ex : Gantt)
  43. ffunction inc. Type d'information et représentation • IDENTIFIER L'INFORMATION Quel

    est son type? Combien d'éléments/quelle plage de valeur ?
  44. 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?
  45. 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
  46. 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
  47. 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.
  48. 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
  49. 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.
  50. 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
  51. ffunction inc. Principes de base • SIMPLICITÉ Faire la place

    à l'information, et non pas à la décoration
  52. 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)
  53. ffunction inc. Principes de base • RÉGULARITÉ Espaces, alignements, taille

    de caractères, éléments disposés sur une grille.
  54. 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.
  55. 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
  56. 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.
  57. ffunction inc. Choix stylistiques • CONNOTATION La typographie, la taille

    et les couleurs influencent la lecture que nous faisons des choses.
  58. 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
  59. 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
  60. 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
  61. 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
  62. 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
  63. 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.
  64. 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.
  65. 130 ffunction inc. Compétences/profil ANALYSTE > Comprendre les données >

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

    Normaliser/ « réparer » les données > Développer les représentations
  67. 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
  68. ffunction inc. ARCHITECTURE DE L'INFORMATION DESIGN D'INTERFACE DESIGN D'INTERACTION PROGRAMMATION

    Être capable de concevoir des représentation attrayantes et fonctionnelles
  69. 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
  70. 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
  71. 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?
  72. 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?
  73. 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
  74. 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.
  75. 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
  76. 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
  77. 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
  78. 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.
  79. 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.
  80. 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
  81. ffunction inc. INFOGRAPHIQUE VISUALISATION DATA JOURNALISME VISUALISATION EXPLORATOIRE TABLEAU DE

    BORD DATA JOURNALISME DESIGN GRAPHIQUE DÉVELOPPEMENT COMPLEXITÉ COMMUNICATION COMPRÉHENSION
  82. 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)
  83. 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
  84. 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
  85. 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?
  86. 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?
  87. 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?
  88. 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?
  89. ffunction inc. Le processus • 6 : MÉDIAS Sur quels

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

    allez-vous donner aux utilisateurs? Quel sera leur rapport avec la visualisation?
  91. 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?
  92. 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?
  93. 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.