Upload
doannga
View
214
Download
0
Embed Size (px)
Citation preview
Codage Graphique de l’Information
1
Mountaz Hascoët, Université de Montpellier,
LIRMM
Plan• Introduction– Un peu de déconstruction pour commencer
• Workflow/dataflow– Des données à leur représentation
graphique interactive
• Variables graphiques • Couleurs–Modèles colorimétriques– Palettes– Contrastes et harmonies
Mountaz Hascoët, Univ. Montpellier 2
2
Arcs
Martin Dittus – Arc diagrams to visualise IRC references – source: visual complexityMartin Wattenberg – 2001 – Arc diagrams Infovis 2002
Arcs
Principe• Positions sur un axe • Taille des cercles• Lien
– Source/destination– Epaisseur des liens– Demi-plan– Longueur
• Ordre sur les éléments• ?• Référence
– Source parle de destination
– Quantité– Lien inverse– Aucun sens
Martin Dittus – Arc diagrams to visualise IRC referencesMartin Wattenberg – 2001 – Arc diagrams
Arcs
Matthias Dittrich - Source - http://www.matthiasdittrich.com/projekte/dliste/visualisations/index.html
AnneauxVisualisation de la composition d’une université Australienne
• Organisation– RMIT University– College (3)– School (8 pour DSC)– Niveau– Program (210)– Course (2000)
• Sources de Financements• Passerelles (4700)
– Intra écoles– Inter écoles
• Flux d’étudiants• Bilan
– 8 dimensions interdépendantes
Andrew Dun – 2012 – College of Design and Social Context - Source - http://intensional.org/rmit_dsc/
Inclassable
Les différentes écoles
• Géographes– Jacques Bertin – Sémiologie graphique
• Statisticiens– Edward Tufte – Display of quantitative information– Leland Wilkinson – Grammar of Graphics
• Designers– David McCandless, Aaron Coblin, Manuel Lima, etc
• Psychologues– Gibson, Affordance theory– Lindsay, Norman – Human Information processing– Colin Ware – Perception for Design– Gestalt – Berlin School
• Informaticiens– Stuart Card, Jock Mackinlay, Ben Shneiderman, Robert Spence
Mountaz Hascoët, Univ. Montpellier 8
WORKLOW - DATAFLOW
Des données brutes aux représentations graphiques interactives
Mountaz Hascoët, Univ. Montpellier 9
Des données aux graphiques (1/3)
Mounta
z H
asc
oët,
Univ
. M
ontp
elli
er
1010Ed. Chi, Data State Models, AVI 2002]
View
Visualization Abstraction
Analytical Abstraction
Value
Data Transformation
Visualization Transformati
on
Visual Mapping Transformation
Documents Textuels, Web page collections, Données d’expression
Extraction, Clustering, Filtrage
Graphes, Tables, Arbres
Codage: placement, pavage, interpolations
Objets graphiques
Opérations de rendu et transformations
Vue d’ensemble graphique
Des données aux graphiques (2/3)
Mountaz Hascoët, Univ. Montpellier 11
Dos Santos, S. and Brodlie, K. Gaining understanding of multivariate and multidimensional data through visualization. Computers & Graphics,
28(3):311–325. 2004.
Des données aux graphiques (3/3)
Mountaz Hascoët, Univ. Montpellier 12
Jeffrey Heer, Stuart K. Card, and James A. Landay. prefuse: a toolkit for interactive information visualization. In CHI 2005, Human Factors in
Computing Systems, 2005.
CODAGE
Variables visuelles, appariement des variables, sémiologie graphique
Mountaz Hascoët, Univ. Montpellier 13
Les variables visuelles – C. Ware
Mounta
z H
asc
oët,
Univ
. M
ontp
elli
er
14Grammaire visuelle des éléments visuels
Extrait de Colin Ware, Information Visualization, 2000
Les variables visuelles – J. Bertin
– Taille– Valeur– Orientation– Grain– Couleur– Forme
Mountaz Hascoët, Univ. Montpellier 15
Extrait de J. Bertin, Sémiologie graphique, 1967 - 2005
Implantation des variables visuelles
• Les trois formes d’implantation visuelle– ponctuelle– linéaire– Surfacique
• Exemple– Les trois implantations de
quatres valeurs de grain
Mountaz Hascoët, Univ. Montpellier 16
Perception pré-attentive
« Une tâche qui s’effectue en moins de 200 à 250 ms sur un écran comportant de nombreux objets peut être considérée comme pre-attentive »
C.G. Healey
Mountaz Hascoët, Univ. Montpellier 17
Mountaz Hascoët, Univ. Montpellier II
18
Sélection
• Définition– Une variable graphique est dite sélective lorsqu’elle
permet d’isoler de manière pré-attentive les familles d’entités partageant la même valeur.
• Les variables sélectives:– Taille (moins de 5 tailles différentes présentes)– Valeur (moins de 5 en implantation surfacique)– Grain (moins de 5 en implantation surfacique)– Couleur (moins de 8 en implantation surfacique)– Orientation (moins de 2 en implantation linéaire)
• Les variables non sélectives:– La forme
Mountaz Hascoët, Univ. Montpellier II
19
Ordre
• Définition:– Une variable est dite ordonnée lorsque
différentes valeurs de cette variable peuvent être perçues comme naturellement ordonnées.
• Exemples de variables ordonnées– Taille– Grain– Valeur
Mountaz Hascoët, Univ. Montpellier II
20
Quantité
• Définition– Une variable est dite quantitative
lorsqu’elle permet de d’évaluer la distance entre deux de ses valeurs.
• Exemples de variables quantitatives– Taille
A B C D
1 2 3
1 2 5 10 20 50 100
Mountaz Hascoët, Univ. Montpellier II
21
Association
• Définition– Une variable est associative si ces
différentes valeurs ne modifient pas radicalement la visibilité des objets.
• Variables associatives– Toutes sauf taille et valeur
En résumé
• Perception associative ()– Regrouper des semblables
• Perception sélective ( )– Rechercher un catégorie précise
• Perception ordonnée (O)– L’ordre géographique des taux de naissance
est-il semblable à celui des décès
• Perception quantitative (Q)– Evaluer le rapport quantitatif entre deux signes
Mountaz Hascoët, Univ. Montpellier 22
Exemples / Application
Mounta
z H
asc
oët,
Univ
. M
ontp
elli
er
23
Taille
Valeur
Orientation
Grain
Couleur
Forme
SélectiveQuantitativeOrdonnable
SélectiveOrdonnable
AssociativeSélective en implantation P et LAssociativeSélectiveOrdonnable
AssociativeSélective
Associative
COULEURS
Modèles, Palettes, Harmonies, Contrastes
Mountaz Hascoët, Univ. Montpellier 24
Le phénomène physique
• Définition physique de la lumière– La lumière est issue d’une onde
électromagnétique perceptible par l’œil humain
– Deux caractérisations du spectre électromagnétique de cette onde peuvent être utiles• Corpusculaire: énergie des photons• Ondulatoire: longueur d’onde ou fréquence
Mountaz Hascoët, Univ. Montpellier 25
Le phénomène physique
Mounta
z H
asc
oët,
Univ
. M
ontp
elli
er
26
Le phénomène perçu
• Bâtonnets (rod) – Vision nocturne– Monochromatique– Faible intensité
lumineuse
• Cônes (cone)– Vision diurne– Couleur– Forte intensité
lumineuse– Trois types
• L,M,S
Mountaz Hascoët, Univ. Montpellier 27
Extrait de Dowling (1987). "The Retina: an approachable part of the brain." The Belknap Press of
Harvard University Press, Cambridge
Le phénomène interprété• Quelques effets célèbres:
Quel est le plus sombre ou le plus brillant: A, B, C, D ?Réponses:physique –> aucunperception physiologique – >aucun ?interprétation –> A est le plus brillant et D le plus sombre
Mountaz Hascoët, Univ. Montpellier 28
A B C D
Le phénomène socio-culturel
Mounta
z H
asc
oët,
Univ
. M
ontp
elli
er
29
Modèles
Mountaz Hascoët, Univ. Montpellier 30
• Modèle de l’imprimeur– Orienté pigment
• Synthèse soustractive– Ajout de couleur conduit au noir
• Chaque pigment absorbe l’une des trois portions du spectre de la lumière visible.
• La couleur du pigment résulte des couleurs qu’il réfléchit
Modèle CMY : Cyan/Magenta/Yellow
Mountaz Hascoët, Univ. Montpellier 31
Modèles RVB – CIE 1920
• Modèle de l’image d’écran– Orienté émission de lumière
• Synthèse additive– l’ajout de couleurs conduit au blanc
• Chaque composante émet de la lumière dans sa longueur d’onde
• Modèle inspiré d’études de la CIE sur l’œil humain– R, V, B correspondraient aux teintes auxquelles les
récepteurs rétiniens seraient les plus sensibles
• Existe dans différentes variantes– sRVB
Mountaz Hascoët, Univ. Montpellier 32
Conclusion : Limites de RVB et CMY
• Représentation de l’espace colorimétrique orienté matériel
• Modèle éloigné des besoins des designers– Définition des contrastes, des harmonies– Différences significatives– Contrôle de la brillance– Contrôle de la teinte– Roue des couleurs
• Alternatives à RVB et CMY– HCB ou HSV– CIE XYZ– CIE L*U*V
Mountaz Hascoët, Univ. Montpellier 33
HSB: Hue, Saturation, Brightness
• Aussi appelé HSV (V=Value)
• Hue: teinte–~ la longueur d’onde
• Saturation: pureté– À quel point la couleur est
mélangée à d’autre: • 0 -> blanc, max -> couleur
saturée ou pure (à éviter)
• Brightness / Value– Intensité lumineuse: • 0 -> noir.
– Attention: la définition de brillance n’est pas toujours la même
Mountaz Hascoët, Univ. Montpellier 34
Brillance, luminance, luminosité
• Chaque domaine donne ses définitions– Pas toujours cohérentes avec les autres
• Proposition– Brillance
• Intensité lumineuse perçue• ~ « Mesurable » subjectivement et contextuellement• Perspective perception/design
– Luminance• Intensité lumineuse émise ou réfléchie• ~ Mesurable objectivement• Perspective physique électronique
– Luminosité~ brillance• Très polysémique
Mountaz Hascoët, Univ. Montpellier 35
Modèle XYZ – CIE 1930
• Espace XYZ – C = X+Y+Z– Où Y est censé suivre la fonction
d’efficacité de l’œil• Sensibilité exacerbée sur les verts• Prend en compte perception
• Espace chromatique CIE– x = X / (X + Y + Z)– y = Y / (X + Y + Z)– Diagramme fer à cheval
• Propriétés– Les couleurs pures ou saturées
• Situées sur périphérie de la courbe sur le fer à cheval
• Longueur d’onde mentionnées en bleu
– Limite du visible ultraviolet et infrarouge• Situées sur segment de droite qui
ferme le fer à cheval
Mountaz Hascoët, Univ. Montpellier 36
Espace chromatique CIE xy
Espace chromatique CIE XYZ
• Spectre des couleurs visibles perceptibles avec x et y >0– Conversions avec RVB
• Représentation et comparaison de gamut– Le gamut ~ triangle dans
espace chromatique– Gamut = sous ensemble
des couleurs qu’un dispositif matériel (écran, projecteur) permet de produire
– E ~ blanc
Mountaz Hascoët, Univ. Montpellier 37
Espace chromatique CIE xy et gamut
Bilan espace chromatique CIE XYZ
• Aspect positif– Couvre l’espace
chromatique visible • avec seulement deux
coordonnées positives
• Aspect négatif–Modèle non uniforme• Diagramme de Mac
Adam
• Alternatives–Modèles CIELUV–Modèle CIELAB
Mountaz Hascoët, Univ. Montpellier 38
Espace chromatique CIE xy et diagramme de Mac Adam
Modèle CIELUV
• Trois composantes– l,u,v ou l*u*v*– l ~ brillance – u et v ~ x et y• De sorte à ce que l’espace colorimétrique
soit uniforme
• Espace colorimétrique uniforme– Le distance euclidienne en deux
couleurs représente la distance perçue
Mountaz Hascoët, Univ. Montpellier 39
Modèle CIELAB
• Utilise des oppositions de couleurs– Vert – Rouge (a)– Bleu – Jaune (b)
• Trois composantes l,a,b ou l*,a*,b*– l ~ brillance (idem cieluv)– a ~ distance entre vert et rouge• Min = vert (-300)• Max = rouge (299)
– b ~ distance entre bleu au jaune• Min = bleu (-300)• Max = jaune (299)
Mountaz Hascoët, Univ. Montpellier 40
Conclusion modèle de couleurs
• De nombreux autres modèles de couleur– En particulier pour images animées
• Comment faire de bonnes palettes de couleurs– Combien de couleurs ?– Physique -> infinité– Moniteur 24 bits -> plus de 16 Millions– Système perceptif humain -> 15
000 ? Mountaz Hascoët, Univ. Montpellier 41
Palettes
Mountaz Hascoët, Univ. Montpellier 42
Objectifs et questions
• Des palettes pour quoi faire?– Esthétique– Informatique• => codage et transmission des informations
• Comment les construire ?– Palettes adhoc• Créées par des auteurs
– Palettes génériques à création semi-automatiques• Prendre en compte les interactions entre couleurs
– Contrastes– Harmonies
• Choisir le bon nombre de couleurs– Discrimination– Catégories
Mountaz Hascoët, Univ. Montpellier 43
Objectifs et questions• Combien de couleurs dans une palette?– Expérience de Healey 1996
• Trouver un élément par sa couleur parmi d’autres éléments de n autres couleurs• Couleurs de même brillance• Distance entre chaque paire de couleurs choisie et fixée pour être identifiable• Nb couleurs varie : 3, 5, 7 et 9
– Résultats de l’expérience de Healey• Si nbc <= 5 : processus préattentif (ie < 200ms)
– Ne dépend ni de nb items ni des couleurs
• Si nbc = 7 ou 9 : processus plus complexe– Le choix de la couleur cible est déterminant
» Cibles vertes donnent les plus mauvais résultats
• =>Plus le nb de couleurs est élevé plus le choix des couleurs est déterminant
• Rappel– « Une tâche qui s’effectue en moins de 200 à 250 ms sur un écran
comportant de nombreux objets peut être considérée comme pre-attentive » C.G. Healey
Mountaz Hascoët, Univ. Montpellier 44
Conception de palettes adhoc
• Exemple de ColorBrewer (1/2)
Mountaz Hascoët, Univ. Montpellier 45
Principes de conception de palettesorientées codage
• Types des palettes de ColorBrewer– Données nominales
• Données qualitatives catégorisables mais non ordonnables ou pour lesquelles aucun ordre ne fait de sens
=> palettes qualitatives
– Données qualitatives ordinales• Données non numériques pour lesquelles un ou plusieurs
ordres peuvent faire du sens=> palettes séquentielles
– Données quantitatives• Données numériques => palettes divergentes
Mountaz Hascoët, Univ. Montpellier 46
Palettes Qualitatives
• Objectifs– contrôle des
distances entre teintes
– différentiation– Isobrillance
• Exemple– Coloration – de graphe
Mountaz Hascoët, Univ. Montpellier 47
Palettes séquentielles (1/2)
• Monochromatique–Min = blanc–Max = la couleur
saturée– C = Interpolation
linéaire (dans modèle XYZ ou L*a*b*) entre Min et Max
Mountaz Hascoët, Univ. Montpellier 48
Palettes séquentielles (2/2)
Mountaz Hascoët, Univ. Montpellier 49
• Polychromatique– Couleurs interpolées sur intervalles prédéfinis
• Du Jaune au Rouge• Du Rouge au Pourpre• Du Vert au Bleu• Du Jaune au Vert au Bleu
+– brillance décroissante
Palettes divergentes
Mountaz Hascoët, Univ. Montpellier 50
• Pour représenter des données numériques– Deux échelles
séquentielles concaténées• Rouge – Vert• Rouge – Violet
– Spectre complet
• Rouge - Jaune - Bleu• Rouge - Bleu
HARMONIES ET CONTRASTES
Palettes génériques
Mountaz Hascoët, Univ. Montpellier 51
Harmonies (1/4)
• Définition– Ensemble de couleurs équilibrées ou assorties
• Harmonie de type 1– Déclinaison d’une couleur• Couleur (Hue)• Couleur+blanc – Nuance (Tint)• Couleur+gris – Ton (Tone)• Couleur+noir – Ombre (Shade)
• Harmonie de type 2–~dégradé– Principe de création:• modèle HSB • deux des composantes restent constantes (ex: S et B)• la troisième varie (ex: H)
Mountaz Hascoët, Univ. Montpellier 52
Harmonie (2/4)• Harmonie de type 3– Équilibre des forces– Prend en compte partiellement le contexte• Taille des surfaces colorées dans une composition
– Force d’une couleur (d’après Lyons et Moretti, 2010)• F(c) = Saturation(c) x Brillance(c) x Surface(c)• NB: d’autres définitions existent
– Valeurs de lumière établies par Goethe
– Harmonie de n couleurs c1, c2, … cn • pour tout i, j, F(ci) = F(cj)
Mountaz Hascoët, Univ. Montpellier53
Harmonies (3/4)
• Harmonies de type 4– Schémas théoriques construits à partir de la roue des couleurs–Multitude de schémas construits
• Définissent les relations entre couleurs• Par des relations d’angles sur la roue des couleurs• Permettent de générer toutes sortes d’harmonie par rotation du schéma
Mountaz Hascoët, Univ. Montpellier 54
Analogues Complémentaires Triade Complémentaire réparti
Harmonies (4/4)
• Schémas harmoniques de type 4 (suite)
Mountaz Hascoët, Univ. Montpellier 55
Rectangle Carré Triade Complémentaire réparti
Contrastes (1/4)
• Les sept contrastes d’Itten– Art de la Couleur, Johannes Itten– Peintre du début du 20ième siècle
• Lumière et ombre– Contraste de brillance ou, à défaut et le plus souvent
contraste de luminance
• Contraste de couleurs –Maximal entre trois couleurs primaires– Calcul possible mais controversé– Pour C1 and C2 deux couleurs définies en RGB par (r1,v1,b1)
et (r2,v2,b2) dans [0-255]3 : • d = |r1-r2| +|v1-v2|+|b1-b2| [6]
– NB: norme W3C ~ si d > 500 contraste couleur suffisant
Mountaz Hascoët, Univ. Montpellier 56
Contrastes (2/4)
• Contraste de température– Facile à calculer en HSB– Difficile à utiliser à bon escient
• Contraste de qualité– Qualité ~ saturation– Contraste de qualité = contraste Mat/brillant
• Contraste de quantité– Quantité ~ force de la couleur ~ valeur établie par Goethe ~
taille de la surface colorée– Valeurs de lumière établies par Goethe
– ->Dimensions des surfaces pour harmonie selon Goethe
Mountaz Hascoët, Univ. Montpellier 57
Chau
d
Froid
Jaune Orange Rouge Violet Bleu Vert9 8 6 3 4 6
Jaune Orange Rouge Violet Bleu Vert3 4 6 9 8 6
Contraste (3/4)
• Contraste simultané– Chaque couleur émise provoque simultanément la
perception de sa couleur opposée – Contraste simultané avec du gris ou du noir
• =>Un gris entouré d’une couleur forte est perçu dans la couleur complémentaire de la couleur qui l’entoure • Une cravate à rayure noire et rouge peut facilement paraître verte
et rouge.
– Contraste simultané entre couleurs• Deux couleurs presque complémentaires juxtaposées et
isoluminantes• Chaque couleur suggère l’autre
– Les couleurs suggérées se superposent aux couleurs émises – ~dissonance
• Effet scintillement, fatigue visuelle
Mountaz Hascoët, Univ. Montpellier 58
Contraste (4/4)
• Contraste simultané (suite)– Atténuation d’un contraste simultané
• Une couleur C1 et un gris en contraste simultané• Ajouter une touche de couleur complémentaire de
C1 dans le gris
– Accentuation d’un contraste simultané• Ajouter une touche de couleur analogue au
complémentaire de C1 dans le gris
• Contraste des complémentaires– Relation de deux couleurs dont le mélange
donne le gris de ton neutre
Mountaz Hascoët, Univ. Montpellier 59