visualisation d'information (2) enjeux perceptifs
TRANSCRIPT
![Page 1: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/1.jpg)
CNAM - Département Informatique
RCP216 Inge!nierie de la fouille et de la visualisation de donné !es massives
Visualisation d'information (2)Enjeux perceptifsPierre Cubaud <[email protected]>
mai 2015
![Page 2: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/2.jpg)
Plan de l'exposé
1. Des données à la construction graphique2. La vision pré-attentive3. La couleur : perception4. La couleur : reproduction5. La lisibilité6. Choix des attributs graphiques
![Page 3: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/3.jpg)
1. Des données à la construction graphique
[Spence] p.26 (cf cours #1)
![Page 4: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/4.jpg)
Typologie des données
- (Q) quantitatives• cours de l'euro, température, date , altitude• op : égalité, classement, arithmétique
- (O) ordinales• ex: confort d'hôtels *,**,***,****• op: égalité, classement
- (N) nominales• ex: renault, peugeot, citroen, panhard• op: egalité
![Page 5: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/5.jpg)
Typologie des tables de données
1D discret : chiffre d'affaire semestriel1D continu : température mesurée
2D discret : 2D continu : une poutre (flèche/longueur)
3D discret : 3D continu : pression atmosphérique
nD : base de donnée
arbres : généalogie, hiérarchie de servicesgraphes : routage, plan de métro
![Page 6: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/6.jpg)
Typologie des graphiques
- Graphique = une surface plane à remplir
- 3 types de marques
points lignes(droite)
zone (area, surface)
et la 3D ?
![Page 7: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/7.jpg)
[Bertin] p.52
(courbes)
![Page 8: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/8.jpg)
[Bertin2] p. 29
![Page 9: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/9.jpg)
Un schéma raté…. [Tufte, Visual p.108]
![Page 10: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/10.jpg)
Un autre raté
http://fr.wikipedia.org/wiki/Portail:Tour_Eiffel
![Page 11: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/11.jpg)
efficacité ?
[Mackinlay] p.124
[Bertin] p.139
![Page 12: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/12.jpg)
!"#$%&%'(#)*+,-./(01/
!"#$%&'(#)*(#%*&'($)('*#%&#*!#&)"*'(%%*!($&&$#%%()#''*$#
combien de 2 ?
![Page 13: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/13.jpg)
#+
!"#$%&'(#!*(#%*&'($!('*#%&#*!#&!"*'(%%*!($&&$#%%(!#''*$#
combien de 2 ?
![Page 14: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/14.jpg)
[Ware]p.153
![Page 15: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/15.jpg)
#+
limite du procédé : la conjonction de codes
![Page 16: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/16.jpg)
Card, Moran, Newell"The psychology ofHuman-Computer interaction"1983
– 3 processeurs • Perceptif• Cognitif • Moteur
– Hie !rarchie de me!moire• Me!moire de travail (RAM) Me !moire sensorielle Me !moire court terme• Me!moire long terme
![Page 17: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/17.jpg)
Mémoire court terme
• Un« bloc notes » pour retrouver rapidement les informations• Temps de réponse rapide : 70ms mais décroît rapidement
• Capacité limitée : entre 5 et 9 items (chiffres, nombres, ...)
![Page 18: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/18.jpg)
Expérimentation : regardez la séquence suivante :
265384579268
Ensuite, écrivez le plus possible de chiffres (sansregarder ce slide !)
Combien sont justes ?
![Page 19: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/19.jpg)
Idem avec la séquence :
376 495 680 379
Ensuite, écrivez le plus possible de chiffres (sansregarder ce slide !)
Combien sont justes ?
![Page 20: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/20.jpg)
3. La couleur : perception
(un peu de physique : interaction matière-lumière)
![Page 21: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/21.jpg)
l'oeil
http://acces.ens-lyon.fr
7M cônes, 120M bâtonnets
wikipedia (en noir : bâtonnets)
![Page 22: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/22.jpg)
Inégale sensibilité des cônes
![Page 23: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/23.jpg)
http://wearecolorblind.com
8% des hommes et 1% des femmes ont une forme de daltonisme
![Page 24: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/24.jpg)
le modèle des couleurs opposées
(CIE LAB, YUV ...)
![Page 25: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/25.jpg)
Perception des contrastes
![Page 26: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/26.jpg)
c'est bien quatrefois le même gris
code Processing pour produire l'image
![Page 27: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/27.jpg)
Bandes de Mach
http://tecfa.unige.ch/tecfa/teaching/UVLibre/9900/bin26/mach.htm
![Page 28: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/28.jpg)
Ecrans illisibles
http://asprise.com
![Page 29: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/29.jpg)
Un autre
![Page 30: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/30.jpg)
un excellent site
![Page 31: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/31.jpg)
4. Production des couleurs
dosage additif(projection)
dosage soustractif(pigments)
synthèse trichromatique
![Page 32: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/32.jpg)
représentation TSL
A.R. Smith, conf. Siggraph'1978
HueSaturationValue
![Page 33: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/33.jpg)
Foley, van Dam. Fundamentalsof interactive computer graphics, 1983, p.615
conversion RGB-HSV
![Page 34: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/34.jpg)
diagramme CIE-xyz
à voir : http://www.cie.co.at/
![Page 35: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/35.jpg)
gamut d'un moniteur
0x
y
moniteur 1
moniteur 2
+ le blanc, défini par la température corps théorique5000K blanc rougeâtre "chaud"6500K blanc standard CIE D659300K blanc bleuté "froid"
![Page 36: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/36.jpg)
+ le calibrage (calibrage (gb : calibration)+ le transfert d'une machine à l'autre (profils ICC) Un bon tutoriel :
![Page 37: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/37.jpg)
5. La lisibilité
vidéo
saccades : ± 25 msfixations : ± 250 ms
![Page 38: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/38.jpg)
,-./00111234,5678.9:;7258<078=4690>?9@A5B9A9CD3
![Page 39: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/39.jpg)
L'oeil humain (bis)
(wikipedia)
acuité / angle de vue
![Page 40: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/40.jpg)
23
:
,! D7CE!0)FG,0:+GH+!
456%7++
!"#$
!%&"'
89:;
.5;CD3
D87;D3
69-893
"+A;C2+784+G+"I+G+"0#!J
"I+K+)I
$I++++E)!0)!+3;+8945CCL+K+*!MF
![Page 41: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/41.jpg)
Lire sur écran
Alain COUSIN. Restitution des images - Notions de base sur les écrans. Techniques de l'ingénieur E5650
![Page 42: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/42.jpg)
1998 : 150 dpi (IBM)2013 : 469 dpi (HTC One)
P. M. Alt, K. Noda. Increasing electronic display information content: An introduction. IBM J. of Res. & Dev. Volume 42, Numbers 3/4, 1998.
![Page 43: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/43.jpg)
N78;7O693+8P=C;9CC93+/
Classification de Bertin (1965)
<7;669
$769L8
=87;C
95L69L8
>8;9CD7=5C
?58A9
OLD+:L+<87.,;QL9+/
73354;7=5C:9+47DP<58;93
39694=5C:ILC9+47DP<58;9
45A.787;35C:I58:893
45A.787;35C:9+QL7C=DP3
R+S+T+U
V+N+R+S
V+N+R
V
6. Choix des attributs graphiques
![Page 44: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/44.jpg)
Attributs "modernes"
Saturation
Luminosité
Champs texturés
Flou
(Kosara et al., 2002)
+ clignotement + animation en général
+ Transparence
(Klebnikov et al, 2012)
![Page 45: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/45.jpg)
Expériences de Cleveland et McGill (Science, n°4716, 8/1985)
![Page 46: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/46.jpg)
J. Mackinlay, ACM Trans. on Graphics, 5(2), 1986
![Page 47: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/47.jpg)
Exemples avec les angles : camenberts (GB pie chart)
https://eagereyes.org/techniques/pie-charts
Variante "donut" A éviter encore plus : la version 3D
compareravec :
![Page 48: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/48.jpg)
Exemples avec les surface :bubble graphs
http://en.wikipedia.org/wiki/Bubble_chart
attention : surface ≠ rayonquid des labels ?
http://www.perceptualedge.com/blog/?p=1612
![Page 49: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/49.jpg)
La couleur pour le quantitatif ? ex. des cartes en "fausses couleur" [Ware]
spectre visible"rainbow"
valeur"greyscale"
bidirectionelrouge-vert
valeursur teinte
![Page 50: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/50.jpg)
Exemple de Matlab
Eviter : jet et hsv
![Page 51: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/51.jpg)
Bonne appli en ligne http://colorbrewer2.org/
![Page 52: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/52.jpg)
Bon conseil de Tufte : choisir des couleurs de la nature
![Page 53: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/53.jpg)
Encore beaucoup d'autres choses à voir :
- perception de l'espace- les formes- l'affordance- (...)
cf cours #1 dur mais trendy
![Page 54: Visualisation d'information (2) Enjeux perceptifs](https://reader036.vdocuments.site/reader036/viewer/2022062520/62b37564fb30ab061b6f4625/html5/thumbnails/54.jpg)