Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

4 ffunction inc. Le cours DÉROULEMENT > Théorie et exemples > Exercice pratique > Discussion

Slide 5

Slide 5 text

5 ffunction inc. Visualisation de données Contexte et Problématiques

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8 ffunction inc.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

12 ffunction inc.

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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?

Slide 15

Slide 15 text

15 ffunction inc. POLANOID COMMUNITY: A social network visualization, Julien Bayle 2007

Slide 16

Slide 16 text

16 ffunction inc. CONSTAT Nous sommes dans une société de l'information... et de l'image

Slide 17

Slide 17 text

17 ffunction inc. CONSTAT Mais nous ne tirons pas encore parti de tout notre potentiel...

Slide 18

Slide 18 text

18 ffunction inc. Analytique Logique Rationnel Analytique Logique Rationnel

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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?

Slide 21

Slide 21 text

21 ffunction inc. Hans Rosling, New Insights on Poverty, TED 2007 http://www.ted.com/talks/hans_rosling_reveals_new_insights_on_poverty.html

Slide 22

Slide 22 text

22 ffunction inc. Feltron Annual Report 2010, Nicholas Felton, 2011 http://feltron.com

Slide 23

Slide 23 text

23 ffunction inc. The Billion Dollar Gram, Davic McCandless, 2009 http://www.informationisbeautiful.net/2009/the-billion-dollar-gram/

Slide 24

Slide 24 text

24 ffunction inc. New York Times, Mapping America, visualisation des données du recensement, 2010 http://projects.nytimes.com/census/2010/explorer

Slide 25

Slide 25 text

25 ffunction inc. iTunes, visualisation de l'espace alloué, Apple inc, 2009 www.apple.com/itunes

Slide 26

Slide 26 text

26 ffunction inc. Google Analytics, 2011 http://analytics.google.com

Slide 27

Slide 27 text

27 ffunction inc. Geckoboard, tableau de bord configurable pour entreprise http://www.geckoboard.com/

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

29 ffunction inc. The Geotaggers' World Atlas, Eric Fisher, 2010 http://www.flickr.com/photos/walkingsf/sets/72157623971287575/

Slide 30

Slide 30 text

30 ffunction inc. TENDANCE « data is the new oil »

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

32 ffunction inc. OUVERTURE Les données sont une nouvelle source de richesse encore peu exploitée...

Slide 33

Slide 33 text

33 ffunction inc. OUVERTURE Les gouvernements l'ont compris avec le phénomène des données ouvertes (open data)

Slide 34

Slide 34 text

34 ffunction inc. OUVERTURE Dans les entreprises, on parle d'intelligence d'affaire et de « big data »

Slide 35

Slide 35 text

35 ffunction inc. Visualisation de données Introduction

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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...

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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...

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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!

Slide 44

Slide 44 text

44 ffunction inc. PARTICULARITÉ La visualisation permet de comprendre intuitivement les données

Slide 45

Slide 45 text

45 ffunction inc. Similar diversity, Philipp Steinweber & Andreas Koller, 2001

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

49 ffunction inc. PRÉCISION Données vs Information

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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)

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

ffunction inc. QUESTION Quel serait les rapports entre visualisation et architecture d'information?

Slide 58

Slide 58 text

58 ffunction inc. Visualisation de données Le langage graphique

Slide 59

Slide 59 text

59 ffunction inc. DONNÉES

Slide 60

Slide 60 text

60 ffunction inc. DONNÉES

Slide 61

Slide 61 text

61 ffunction inc. DONNÉES

Slide 62

Slide 62 text

62 ffunction inc. DONNÉES

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

ffunction inc. Les différents types de données

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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)

Slide 67

Slide 67 text

ffunction inc. QUESTION Quels autres types d'information existent?

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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)

Slide 70

Slide 70 text

ffunction inc. Glacé Froid Chaud Brûlant

Slide 71

Slide 71 text

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)

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

ffunction inc. A A Un processus... Un processus...

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

ffunction inc. Tous ces types d'informations peuvent se représenter de différentes manières

Slide 76

Slide 76 text

ffunction inc.

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

ffunction inc.

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

ffunction inc.

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

ffunction inc.

Slide 83

Slide 83 text

ffunction inc. Les diagrammes en tarte sont bons pour montrer des proportions (%) Les diagrammes en tarte sont bons pour montrer des proportions (%)

Slide 84

Slide 84 text

ffunction inc. Que l'on peut aussi exprimer en diagramme en barres Que l'on peut aussi exprimer en diagramme en barres

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

ffunction inc. PRODUCTION QUALITÉ RECYCLAGE LIVRAISON DEFECTUEUX BONNE Les « flowcharts » permettent de représenter des processus Les « flowcharts » permettent de représenter des processus

Slide 87

Slide 87 text

ffunction inc. RESPONSABLE RESPONSABLE DIRECTEUR EMPLOYÉ EMPLOYÉ EMPLOYÉ Ou des structures organisationnelles ou conceptuelles Ou des structures organisationnelles ou conceptuelles

Slide 88

Slide 88 text

ffunction inc. Et il existe de nombreux formalismes (ex : Gantt) Et il existe de nombreux formalismes (ex : Gantt)

Slide 89

Slide 89 text

ffunction inc. un réseau de Petri un réseau de Petri

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

ffunction inc. Type d'information et représentation ● IDENTIFIER L'INFORMATION Quel est son type? Combien d'éléments/quelle plage de valeur ?

Slide 92

Slide 92 text

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?

Slide 93

Slide 93 text

ffunction inc. EXERCICE Pensez à différentes manières de représenter les données suivantes

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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.

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

98 ffunction inc. Visualisation de données Le langage graphique

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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.

Slide 101

Slide 101 text

ffunction inc. f(x) =

Slide 102

Slide 102 text

ffunction inc. f(x) =

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

ffunction inc. Typographie, mise en page et graphisme (pour la présentation d'information)

Slide 105

Slide 105 text

ffunction inc. QUESTION Quels sont, selon vous, les critères d'un bon graphisme?

Slide 106

Slide 106 text

ffunction inc. Principes de base ● SIMPLICITÉ Faire la place à l'information, et non pas à la décoration

Slide 107

Slide 107 text

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)

Slide 108

Slide 108 text

ffunction inc. Principes de base ● RÉGULARITÉ Espaces, alignements, taille de caractères, éléments disposés sur une grille.

Slide 109

Slide 109 text

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.

Slide 110

Slide 110 text

ffunction inc.

Slide 111

Slide 111 text

ffunction inc.

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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.

Slide 114

Slide 114 text

ffunction inc. Choix stylistiques ● CONNOTATION La typographie, la taille et les couleurs influencent la lecture que nous faisons des choses.

Slide 115

Slide 115 text

ffunction inc. bonjour!

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

ffunction inc. bonjour!

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

ffunction inc. Bonjour!

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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.

Slide 124

Slide 124 text

ffunction inc. À RETENIR La visualisation est une fonction graphique des données

Slide 125

Slide 125 text

ffunction inc. À RETENIR Il s'agit plus de construction visuelle que de création graphique

Slide 126

Slide 126 text

ffunction inc. À RETENIR Simplicité, cohérence et sobriété sont les éléments-clé

Slide 127

Slide 127 text

ffunction inc. À RETENIR Les choix stylistiques connotent le message, il faut les utiliser avec parcimonie

Slide 128

Slide 128 text

128 ffunction inc. Visualisation de données La pratique professionnelle

Slide 129

Slide 129 text

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.

Slide 130

Slide 130 text

130 ffunction inc. Compétences/profil ANALYSTE > Comprendre les données > Déterminer leurs types et relations > Identifier des indicateurs-clé

Slide 131

Slide 131 text

131 ffunction inc. Compétences/profil PROGRAMMEUR > Collecter/extraire les données > Normaliser/ « réparer » les données > Développer les représentations

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

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

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

ffunction inc. EN PRATIQUE Quels sont les différents rôles dans une équipe de visualisation?

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

ffunction inc. FORME Analyste Designer graphique Programmeur MATIERE FONCTION Journaliste de données Les rôles

Slide 151

Slide 151 text

ffunction inc. EN PRATIQUE Quelle place a la visualisation dans un projet?

Slide 152

Slide 152 text

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

Slide 153

Slide 153 text

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?

Slide 154

Slide 154 text

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?

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

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

Slide 157

Slide 157 text

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.

Slide 158

Slide 158 text

ffunction inc. INFOGRAPHIQUE VISUALISATIONS INTERACTIVE Pour communiquer

Slide 159

Slide 159 text

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

Slide 160

Slide 160 text

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

Slide 161

Slide 161 text

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

Slide 162

Slide 162 text

ffunction inc. Sleep Is Awesome, FFunction, 2010

Slide 163

Slide 163 text

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

Slide 164

Slide 164 text

ffunction inc. VISUALISATION EXPLORATOIRE TABLEAU DE BORD Pour comprendre

Slide 165

Slide 165 text

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.

Slide 166

Slide 166 text

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.

Slide 167

Slide 167 text

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

Slide 168

Slide 168 text

ffunction inc. Visualisation du budget fédéral américain, FFunction, 2011

Slide 169

Slide 169 text

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

Slide 170

Slide 170 text

ffunction inc. INFOGRAPHIQUE VISUALISATION DATA JOURNALISME VISUALISATION EXPLORATOIRE TABLEAU DE BORD DATA JOURNALISME DESIGN GRAPHIQUE DÉVELOPPEMENT COMPLEXITÉ COMMUNICATION COMPRÉHENSION

Slide 171

Slide 171 text

ffunction inc. EN PRATIQUE Comment puis-je appliquer la visualisation dans...

Slide 172

Slide 172 text

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)

Slide 173

Slide 173 text

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

Slide 174

Slide 174 text

ffunction inc. EN PRATIQUE Quels sont les étapes principales du travail de visualisation?

Slide 175

Slide 175 text

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

Slide 176

Slide 176 text

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?

Slide 177

Slide 177 text

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?

Slide 178

Slide 178 text

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?

Slide 179

Slide 179 text

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?

Slide 180

Slide 180 text

ffunction inc. Le processus ● 6 : MÉDIAS Sur quels supports seront diffusés vos graphiques? Article, présentation, poster, sur le Web?

Slide 181

Slide 181 text

ffunction inc. Le processus ● 7 : INTERACTION Quel pouvoir allez-vous donner aux utilisateurs? Quel sera leur rapport avec la visualisation?

Slide 182

Slide 182 text

ffunction inc. DONNÉES/ANALYSE DESIGN/CONCEPTION PROGRAMMATION//DÉVELOPPEMENT Flots de travail

Slide 183

Slide 183 text

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

Slide 184

Slide 184 text

ffunction inc. EXERCICE FINAL Du texte à l'image

Slide 185

Slide 185 text

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?

Slide 186

Slide 186 text

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?

Slide 187

Slide 187 text

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.

Slide 188

Slide 188 text

ffunction inc.

Slide 189

Slide 189 text

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

Slide 190

Slide 190 text

190 ffunction inc. Merci! www.ffctn.com