Visualisation et Webmapping

Etienne Côme, @comeetie@mapstodon.space, ENTPE

8 Avril 2025

@comeetie

Chercheur Université Gustave Eiffel COSYS/GRETTIA
Statistiques, Données, Visualisation, Cartographie, Transports,…
R,JS,Python,Cpp,…

Trajectoire

Toujours aimé les cartes !

Trajectoire

Toujours aimé les cartes !

en voyage

Trajectoire

Toujours aimé les cartes !

ou dans les livres

Trajectoire

Pas de formation en carto/visualisation

Plus à l’aise avec un

qu’avec un .

Trajectoire

rencontre avec la Grammaire Graphique

et avec ggplot

Source : Tamara Munzner. Visualization Analysis and Design. A K Peters Visualization Series, CRC Press, 2014.

Trajectoire

découverte des possibilités offertes

par le js et d3

Trajectoire

découverte de la stack logicielle autour d’OSM

et des travaux de Stamen

Trajectoire

découverte de la stack logicielle autour d’OSM

donc de Mapbox

Trajectoire

découverte de la stack logicielle autour d’OSM

et de Leaflet

Trajectoire

découverte de la stack logicielle autour d’OSM

Il faut être 2

pour faire une carte/visualisation

Carte / Visualisation ?

Bruit divers !		Bruit sémantique		Bruit technique		Bruit sémantique
Source (Données)		Emetteur (Encodage)		Canal		Récepteur (Décodage)

Toutes les cartes/visualisations sont

fausses

mais certaines sont

utiles

mais certaines sont

utiles

mais certaines sont

utiles

Source : Nicolas Lambert

Source : Nicolas Lambert

Visualisation ?

“Transformation of the symbolic into the geometric”
[McCormick et al. 1987]

“… finding the artificial memory that best supports our natural means of perception.”
[Bertin 1967]

“The use of computer-generated, interactive, visual representations of data to amplify cognition.”
[Card, Mackinlay, & Shneiderman 1999]

Pourquoi visualiser ?

Intégrer l’humain dans la boucle

• Répondre a des questions ou trouver des questions ?
• Prendre des décisions
• Remettre les données dans leur contexte
• Amplifier la mémoire
• Calcul graphique
• Trouver des schémas, des patterns
• Présenter des arguments
• Inspirer

Pourquoi visualiser ?

Analyser :

• Développer et critiquer des hypothèses
• Découvrir des erreurs
• Trouver des patterns

Communiquer

• Partager et convaincre
• Collaborer et réviser

Anscombe quartet

g	mean_x	mean_y	sd_x	sd_y
1	9	7.500909	3.316625	2.031568
2	9	7.500909	3.316625	2.031657
3	9	7.500000	3.316625	2.030424
4	9	7.500909	3.316625	2.030578

Anscombe quartet

Cholera map (John Snow)

Visualiser

=

encoder dans des

variables graphiques

les données

Jacques Bertin

Variables graphiques

Bertin Jacques, Sémiologie graphique, Paris, Mouton/Gauthier-Villars, 1967.

Variables graphiques

Bertin Jacques, Sémiologie graphique, Paris, Mouton/Gauthier-Villars, 1967.

Source : Nicolas Lambert

Marques // variables graphiques

Marques :

Eléments de base du graphiques

Variables graphique (chanels) :

Ce qui va varier en fonctions des données

Variables graphiques

Variables graphiques

Toutes les variables graphiques ne se valent pas.

Variables graphiques

Choisir une variable graphique adapté aux type de la variable représenté

Variables graphiques

Ce qui est intéressant n’est pas toujours ce que l’on a au départ.

pré-attentive processing

Combien de 3 ?

1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686

pré-attentive processing

Combien de 3 ?

1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686

pré-attentive processing

pré-attentive processing

pré-attentive processing

library(ggplot2)
ggplot(mpg)+geom_point(aes(x=cty,y=hwy,color=class))+theme_bw()

Libraries basées sur la grammaire graphique

• ggplot (r)
• plot (js)
• vgplot (js)
• plotnine (python)

library(ggplot2)
ggplot(mpg)+geom_point(aes(x=cty,y=hwy,color=class))

Questions ? variables continues ? discrètes ? ordonnées ?
temporelles ?spatiales ?

Les grands classiques

Des catégories

et

une quantité pour chaque catégorie

le bar chart

le bar chart

m_cty = mpg %>% group_by(manufacturer) %>% summarize(mcty=mean(cty))
ggplot(data=m_cty)+
  geom_bar(aes(x=manufacturer,y=mcty),stat = 'identity')+
  scale_x_discrete("Manufacturer")+
  scale_y_continuous("Miles / Gallon (City conditions)")+theme_bw()

Ordre ?

m_cty_ordered = m_cty %>% arrange(desc(mcty)) %>% 
  mutate(manufacturer=factor(manufacturer,levels=manufacturer))
ggplot(data=m_cty_ordered)+
  geom_bar(aes(x=manufacturer,y=mcty),stat = 'identity')+
  scale_x_discrete("Manufacturer")+
  scale_y_continuous("Miles / Gallon (City conditions)")+theme_bw()

Horizontal ?

ggplot(data=m_cty_ordered)+
  geom_bar(aes(x=manufacturer,y=mcty),stat = 'identity')+
  scale_x_discrete("Manufacturer")+
  scale_y_continuous("Miles / Gallon (City conditions)")+
  coord_flip()+theme_bw()

Ordre naturel imposé par le temps

ggplot(data=st_tempstats_all.df,aes(x=time,y=nbbikes))+geom_point()+theme_bw()

Ordre naturel imposé par le temps

ggplot(data=st_tempstats_all.df,aes(x=time,y=nbbikes))+geom_line()+theme_bw()

Aspect ratio

ggplot(data=st_tempstats_all.df,aes(x=time,y=nbbikes))+geom_line()+theme_bw()

Aspect ratio

ggplot(data=st_tempstats_all.df,aes(x=time,y=nbbikes))+geom_line()+theme_bw()

Aspect ratio

ggplot(data=st_tempstats_all.df,aes(x=time,y=nbbikes))+geom_line()+theme_bw()

Aspect ratio, 45°

Heuristic: use the aspect ratio that results in an average line slope of 45°.

Cleveland, William S., Marylyn E. McGill, and Robert McGill. “The shape parameter of a two-variable graph.” Journal of the American Statistical Association 83.402 (1988): 289-300.

Aire + Echelle

ggplot(data=st_tempstats_all.df,aes(x=time,y=nbbikes),fill="#777777")+geom_area()+theme_bw()

Changement de point de vue

ggplot(data=st_tempstats_all.df,aes(x=time,y=max(nbbikes)-nbbikes),fill="#777777")+
  geom_area()+theme_bw()

Line charts superposés

ggplot(data=st_tempstats_sub.df)+
  geom_line(aes(x=time,y=nbbikes,group=id,color=factor(id)),linewidth=0.8)+theme_bw()

Small multiples

ggplot(data=st_tempstats_sub.df)+
  geom_line(aes(x=time,y=nbbikes,group=id,color=factor(id)),linewidth=0.8)+
  facet_grid(id ~ .)+theme_bw()

2 variables numériques

+ catégories

Scatter plot + colors

mpg_su = mpg %>% 
  filter(class %in% c('compact','suv','pickup','minivan')) 
ggplot(mpg_su)+geom_point(aes(x=cty,y=hwy,color=class))+theme_bw()

Scatter plot + symbols

mpg_su = mpg %>% 
  filter(class %in% c('compact','suv','pickup','minivan')) 
ggplot(mpg_su)+geom_point(aes(x=cty,y=hwy,shape=class))+theme_bw()

3 variables numériques (dont une >0)

+ catégories

Scatter plot + couleur + taille

ggplot(mpg_su)+geom_point(aes(x=cty,y=hwy,color=class,size=displ))+theme_bw()

! Echelles !

Taille : f(data) -> nb pixels

Couleurs : f(data) -> rgb

Taille des cercles

Rayon

Aire

Echelles de couleurs

palette + discrétisation + interpolation

https://colorbrewer2.org

Echelles de couleurs

palette + discrétisation

https://colorbrewer2.org

Echelles de couleurs

palette + discrétisation + interpolation

https://colorbrewer2.org

Eviter de faire des gradients en RGB.

graphiques + complexes

https://www.data-to-viz.com/

\(+\) de 3 variables

graphiques + complexes

https://www.data-to-viz.com/

Parallel Coordinates

graphiques + complexes

https://www.data-to-viz.com/

distributions multimodales

graphiques + complexes

https://www.data-to-viz.com/

Violin plot

Tufte

Data-ink ratio

Lying factor

Data-ink ratio

Lie Factor

\[\textrm{Lie factor} = \frac{\textrm{visual effect size}}{\textrm{data effect size}}\]

Lie factor :

\[\textrm{data effect size} = \frac{27.5 - 18}{18} \times 100 = 53 \%\]

Edward Tufte, The Visual Display of Quantitative Information, Cheshire, CT, Graphics Press, 2001, 2e éd. (1re éd. 1983)

Lie factor :

\[\textrm{visual effect size} = \frac{5.3 -0.6}{0.6} \times 100 = 783 \%\]

Edward Tufte, The Visual Display of Quantitative Information, Cheshire, CT, Graphics Press, 2001, 2e éd. (1re éd. 1983)

Lie factor :

\[\textrm{Lie factor} = \frac{783}{53} = 14.8\]

Edward Tufte, The Visual Display of Quantitative Information, Cheshire, CT, Graphics Press, 2001, 2e éd. (1re éd. 1983)

Lie factor : 9.4

Edward Tufte, The Visual Display of Quantitative Information, Cheshire, CT, Graphics Press, 2001, 2e éd. (1re éd. 1983)

Sachant que l’aire de la tranche “apple”” (en vert) est proportionelle à \(2.22\,cm^2\) et celle correspondant à rim (en bleue) est proportionelle à \(2.96\,cm^2\) calculer le lying factor ?

L’importance des détails

Source : Nicolas Lambert

Angle / Cadrage

Angle / Cadrage

Couleurs

Couleurs

Typographie

Titre, sources, …

Un nombre infini de degrés de libertés

Sortir des sentiers batus

pour stimuler l’intérêt du lecteur

Sortir des sentiers batus

pour stimuler l’intérêt du lecteur

Overview first

Zoom and filter

Then details-on-demand

Ben Schneiderman

Exemple de projets

https://www.comeetie.fr/#portfolio

Zoom \(\Rightarrow\) Profondeur

Les détails ont leurs importances !

Andy Kirk, The little of visualisation design

Faciliter l’interaction n’est pas aisé

Médiation

Algorithmique

Médiation

Algorithmique

Matrices OD \(\Rightarrow\) Champs vectoriels

Algorithme des années 80, Poisson potenial W. Tobler

Médiation

Algorithmique

Parties de cartes compétitives\(\Rightarrow\)Espace abstrait organisé

WordEmbedding +t-SNE

Médiation

Algorithmique

Relations d’abonnements\(\Rightarrow\)Espace abstrait organisé

Construction de graphe + ForceAtlas + Louvain

Outils

Source: Yan Holtz

Ressources

• data-to-viz
• r-graph-gallery
• python-graph-gallery
• N. Lambert, Rhétorique et Carte de flux
• N. Lambert, Choisir une représentation cartographique
• Y. Holtz, R in the Dataviz univers
• Fundamentals of Data Visualization
• https://www.rawgraphs.io/
• https://flourish.studio/

Merci !

Questions / Discussion