---
title: "Des données à l'image" 
subtitle: "quelques retours d'expériences de 10 années de datavisualiation"
author: "Etienne Côme, @comeetie.bsky.social,</br> Séminaire Quantitativisme réflexif, ISP"
date: "09/25/2025"
format: 
  revealjs:
    theme: [default, uge.scss]
title-slide-attributes:
  data-background-image: "./logo_univ_gustave_eiffel_rvb.svg"
  data-background-size: "25%"
  data-background-position: "bottom 50px right 100px"
---



## @comeetie

![](https://www.comeetie.fr/assets/img/portrait.png){ width=30% }

Chercheur Université Gustave Eiffel COSYS/GRETTIA </br>
Statistiques, Données, Visualisation, Cartographie, Transports,...</br>
R,JS,Python,Cpp,...
<script src="https://use.fontawesome.com/1d99d60fc5.js"></script>




##
<h2 class="r-fit-text mhead">Trajectoire</h2>
<h2 class="r-fit-text mhead">Toujours aimé les cartes !</h2>

## {background-image="./images/carte_routiere.jpg" background-opacity="0.4"}
<h2 class="r-fit-text mhead">Trajectoire</h2>
<h2 class="r-fit-text mhead">Toujours aimé les cartes !</h2>
<h2 class="r-fit-text mhead">en voyage</h2>



## {background-image="./images/Carte-de-la-Terre-du-Milieu-Rohan.jpg"  background-opacity="0.4"}
<h2 class="r-fit-text mhead">Trajectoire</h2>
<h2 class="r-fit-text mhead">Toujours aimé les cartes ! </h2>
<h2 class="r-fit-text mhead">ou dans les livres</h2>

##
<h2 class="r-fit-text mhead">Trajectoire</h2>
<h2 class="r-fit-text mhead">Pas de formation en carto/visualisation</h2>
<h2 class="r-fit-text mhead">Plus à l'aise avec un <i class="fa fa-keyboard-o" aria-hidden="true"></i></h2>
<h2 class="r-fit-text mhead">qu'avec un <i class="fa fa-paint-brush" aria-hidden="true"></i>.</h2>




## {background-image="./images/Gog2.jpg" background-opacity="0.2"}
<h2 class="r-fit-text mhead">Trajectoire</h2>
<h2 class="r-fit-text mhead">rencontre avec la Grammaire Graphique</h2>
<h2 class="r-fit-text mhead">et avec ggplot</h2>

## 
<img src="./images/marks_chanels.png" height="550px">

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

## {background-image="./images/d3.png" background-opacity="0.2"}
<h2 class="r-fit-text mhead">Trajectoire</h2>
<h2 class="r-fit-text mhead">découverte des possibilités offertes</h2>
<h2 class="r-fit-text mhead">par le js et d3</h2>



## {background-image="./images/stamen.png"  background-opacity="0.3"}
<h2 class="r-fit-text mhead">Trajectoire</h2>
<h2 class="r-fit-text mhead">découverte de la stack logicielle autour d'OSM</h2>
<h2 class="r-fit-text mhead">et des travaux de Stamen</h2>

## {background-image="./images/mapbox.png"  background-opacity="0.3"}
<h2 class="r-fit-text mhead">Trajectoire</h2>
<h2 class="r-fit-text mhead">découverte de la stack logicielle autour d'OSM</h2>
<h2 class="r-fit-text mhead">donc de Mapbox</h2>


## {background-image="./images/leaflet.png"  background-opacity="0.3"}
<h2 class="r-fit-text mhead">Trajectoire</h2>
<h2 class="r-fit-text mhead">découverte de la stack logicielle autour d'OSM</h2>
<h2 class="r-fit-text mhead">et de Leaflet</h2>

## {background-image="./images/cartevelo.png"  background-opacity="0.3"}
<h2 class="r-fit-text mhead">Trajectoire</h2>
<h2 class="r-fit-text mhead">découverte de la stack logicielle autour d'OSM</h2>


##
<h2 class="r-fit-text mhead">Il faut être 2</h2>
<h2 class="r-fit-text mhead">pour faire une carte/visualisation</h2>

##
<h2>Carte / Visualisation ?</h2>
<table style="font-size:0.6em">
<tr><td>Bruit divers !</td><td></td><td><i>Bruit sémantique</i></td><td></td><td><i>Bruit technique</i></td><td></td><td><i>Bruit sémantique</i></td><td></td><td></td><td></td></tr>
<tr><td>Source (Données)</td><td></td><td>Emetteur (Encodage)</td><td></td><td>Canal</td><td></td><td>Récepteur (Décodage)</td><td></td><td></td></tr>
<tr><td><i class="fa fa-database" aria-hidden="true"></i></td><td><i class="fa fa-arrow-right" aria-hidden="true"></i></td><td><i class="fa fa-user" aria-hidden="true"></i></td><td><i class="fa fa-arrow-right" aria-hidden="true"></i></td><td><i class="fa fa-photo" aria-hidden="true"></i></td><td><i class="fa fa-arrow-right" aria-hidden="true"></i></td><td><i class="fa fa-eye" aria-hidden="true"></i></td></tr>
</table>

##
<img src="./images/mapfailtweet.png" height="600px">

##
<h2 class="r-fit-text mhead">Toutes les cartes/visualisations sont</h2>
<h2 class="r-fit-text mhead">fausses</h2>

##
<img src="./images/pearl-harbor.jpeg" height="500px">

##
<h2 class="r-fit-text mhead">mais certaines sont</h2>
<h2 class="r-fit-text mhead">utiles</h2>

## {background-image="./images/jonsnow.jpg" height="500px" bacground-opacity="0.2"}
<h2 class="r-fit-text mhead">mais certaines sont</h2>
<h2 class="r-fit-text mhead">utiles</h2>


## {background-image="./images/posteminard.jpg"  bacground-opacity="0.2"}
<h2 class="r-fit-text mhead">mais certaines sont</h2>
<h2 class="r-fit-text mhead">utiles</h2>





## Visualisation ?
<link href="https://fonts.googleapis.com/css?family=Armata&display=swap" rel="stylesheet">
“Transformation of the symbolic into the geometric”</br>
[McCormick et al. 1987]

“... finding the artificial memory that best supports our
natural means of perception.” </br>
[Bertin 1967]

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



## Pourquoi visualiser ?
### Intégrer l'humain dans la boucle
<ul>
<li> Répondre a des questions ou trouver des questions ? 
<li> Prendre des décisions
<li> Remettre les données dans leur contexte
<li> Amplifier la mémoire
<li> Calcul graphique
<li> Trouver des schémas, des patterns
<li> Présenter des arguments
<li> Inspirer
</ul>

## Pourquoi visualiser ?

### Analyser :
<ul>
<li> Développer et critiquer des hypothèses
<li> Découvrir des erreurs
<li> Trouver des patterns
</ul>

### Communiquer
<ul>
<li> Partager et convaincre
<li> Collaborer et réviser
</ul>

##
<img src="images/carte-territoire.png" height="600px">

::: aside
Source : Nicolas Lambert
:::


##
<img src="images/fig02 - cube-01.png" height="600px">

::: aside
Source : Nicolas Lambert
:::



##
<img src="images/gundeaths.webp" height="600px">


##
<img src="images/mapmigr2.jpeg" height="600px">

##
<img src="images/mapmigr1.jpeg" height="600px">


## 
<h2 class="r-fit-text mhead">Angle / Cadrage</h2>

##
<img src="images/mapmigr3.jpg" height="600px">

## {background-image="./images/bati_lg.jpg" bacground-opacity="0.2"}
<h2 class="r-fit-text mhead">Angle / Cadrage</h2>


##
<h2 class="r-fit-text mhead" style="color:#338811 !important">Couleurs</h2>

## {background-image="./images/colors.jpg"  bacground-opacity="0.2"}
<h2 class="r-fit-text mhead">Couleurs</h2>

## {background-image="./images/atnight.png"}


##
<h2 class="r-fit-text mhead">Typographie</h2>


## {background-image="./images/thumbnail.svg"}

##
<h2 class="r-fit-text mhead">Titre, sources, ...</h2>


##
<h2 class="r-fit-text mhead">Un nombre infini de degrés de libertés</h2>

## {background-image="./images/leboncoin.png" background-opacity="0.2"}
<h2 class="r-fit-text mhead">Sortir des sentiers batus</h2>
<h2 class="r-fit-text mhead">pour stimuler l'intérêt du lecteur</h2>

## {background-image="./images/metro.png" background-opacity="0.2"}
<h2 class="r-fit-text mhead">Sortir des sentiers batus</h2>
<h2 class="r-fit-text mhead">pour stimuler l'intérêt du lecteur</h2>


##
<h2 class="r-fit-text mhead">Overview first</h2>
<h2 class="r-fit-text mhead">Zoom and filter</h2>
<h2 class="r-fit-text mhead">Then details-on-demand</h2>

::: aside
Ben Schneiderman
:::


## {background-image="./images/fp2019.png" bacground-opacity="0.2"}
<h2 class="r-fit-text mhead">Zoom $\Rightarrow$ Profondeur</h2>




## Francepixels, contexte {background-image="./images/feuilleimpotswhite2.jpg"}

<div style="background-color:#ffffffbb">
Retour en 2014 !

Données carroyées massives


::: {.incremental}
- derivées des feuilles d'impositions
- 200m x 200m pixels
- liimit du secret statistique (11 ménages)
:::

</div>

## {background-image="./images/insee2014v2.png"}

## {background-image="./images/inseeqgis.png"}


## Contexte

open data, mais :

::: {.incremental}
- fichier volumineux, format spécifique, problème de projection
- utilisable <span style="color:var(--alert-color)">dans la douleur</span>
- avec des logiciels spécialisés mapinfo / arcgis / qgis
::: 



## Une opportunité

La stack technique développée autour d'<span style="color:var(--alert-color)">OSM</span> 

- [openLayer](https://openlayers.org/)
- [leaflet](https://www.leaflet.org/), 
- [outils mapbox de l'époque (tilemill,...)](https://web.archive.org/web/20140605004029/https://www.mapbox.com/)

<span style="color:var(--alert-color)">$\Rightarrow$ allait permetre de renouveller la diffusion et les outils de visualiation de ce type de données statistiques</span>

##  Une opportunité

Pas le seul à noter cette opportunité </br>

Oliver O'Brien a proposé une approche similaire en 2015 avec data-shine (Uk)

![](./images/obrien.png){ width=80% }

## {background-image="./images/datshine.png"}




##  Details technique et choix

A cette époque <span style="color:var(--alert-color)">les tuiles vectorielles</span> arrivaient très doucement

- [http://mike.teczno.com/notes/postgreslessness-mapnik-vectiles.html](http://mike.teczno.com/notes/postgreslessness-mapnik-vectiles.html)
- [https://observablehq.com/@d3/vector-tiles](https://observablehq.com/@d3/vector-tiles)
- [https://gist.github.com/wboykinm/7393674](https://gist.github.com/wboykinm/7393674)

<span style="color:var(--alert-color)">$\Rightarrow$ Avantage massif pour les données statistiques</span>


##  Details technique et choix

A l'époque :

- R pour traiter les données et produires des tuiles geojson 
- leaflet pour les tuiles raster 
- d3 pour le rendu des tuiles vectorielles artisanale sur un canvas
- canvas invisible pour gérer l'interactivité 
- importance des détails (échelle de couleurs/fond de carte/labels/...)

[essayez ! c'est toujours en ligne](https://www.comeetie.fr/galerie/francepixels/#map/p65/vardefault/12/48.860/2.333)


## MAUP et aggregation mutli-échelle

Le <b>modifiable areal unit problem</b> <span style="color:var(--alert-color)">(MAUP)</span> est un biais lié à l’agrégation de données spatiales à des échelles différentes.

![](./images/MAUP-Scale-Effect-425x212.png){height=50%}


::: aside
[voir, https://gisgeography.com/maup-modifiable-areal-unit-problem/](https://gisgeography.com/maup-modifiable-areal-unit-problem/)
:::



## MAUP and multiscale aggregation

Le <b>modifiable areal unit problem</b> <span style="color:var(--alert-color)">(MAUP)</span> est un biais lié à l’agrégation de données spatiales à des échelles différentes.

<span style="color:var(--alert-color)">$\rightarrow$ agréger a différentes échelles et liés niveau d’agrégation et niveau de zoom.</span>

Résoud deux problèmes :

::: {.incremental}
- Taille des tuilles <span style="color:var(--alert-color)">!! elles doivent rester petites</span>
- MAUP <span style="color:var(--alert-color)">!! possibilité d'explorer différents niveau d'agrégation facilement</span>
:::


## {background-image="https://www.comeetie.fr/galerie/francepixels/assets/images/paris_vieux2.jpg"}


## Feedbacks and users

- INSEE
- Journalistes, sur des sujets spécifiques eg. ségregation / école / transports
- Urbanistes pour des diagnostics territoriaux
- Chercheur 
- Curieux ...

## Francepixels, evolutions

Les tuiles vectorielles sont devenues une technologie mature 

- MVT [specifications 1.0 and 2.0](https://mapbox.github.io/vector-tile-spec/)
- MBT et PMTiles 

accessible beaucoup plus facilement

- [postgis peut produire des tuiles vectorielles à la volée ](https://postgis.net/docs/ST_AsMVT.html)
- nouvelles librairies JS [mapbox-gl](https://www.mapbox.com/mapbox-gljs) -> [MapLibre](https://maplibre.org/projects/),...


## Francepixels, évolutions

Beaucoup plus simple à réaliser  maintenant :

- [pypixgrid](https://github.com/comeetie/pypixgrid) python script to export MVT tiles from postgis
- [aggregation mutliéchelle paramétrable](https://github.com/comeetie/pypixgrid/blob/main/exemples/insee/reunion/config_reunion.json)
- mapbox-gl / mapLibre 


## Francepixels successeurs 

::: {.incremental}
- [FrancePixels 2019](https://www.comeetie.fr/galerie/francepixels2019/)
- [FrancePixels Bati](https://www.comeetie.fr/galerie/francepixelsbati) IGN BD Topo 
- [FrancePixels 2023](https://www.comeetie.fr/galerie/francepixels2023bis) 
- [gridViz by @julgaf (eurostats)](https://eurostat.github.io/gridviz/) 
- [datashine successor](https://www.ons.gov.uk/census/maps/choropleth/identity/sexual-orientation/sexual-orientation-4a/lesbian-gay-bisexual-or-other-lgb)
- projet INSEE 
- ...
:::


## {background-image="./images/batiparis.png" background-opacity="0.3"}
<h2 class="r-fit-text mhead">Les détails ont leurs importances !</h2>

::: aside 
Andy Kirk, The little of visualisation design
:::


## {background-image="./images/pres2022.png" background-opacity="0.3"}
<h2 class="r-fit-text mhead">Faciliter l'interaction n'est pas aisé </h2>


##
<h2 class="r-fit-text mhead">Médiation</h2>
<h2 class="r-fit-text mhead">Algorithmique</h2>




## {background-image="./images/wind_lg.png" background-opacity="0.3"}
<h2 class="r-fit-text mhead">Médiation</h2>
<h2 class="r-fit-text mhead">Algorithmique</h2>
<h2 class="r-fit-text mhead">Matrices OD $\Rightarrow$ Champs vectoriels</h2>

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

## {background-image="./images/heartstone.png" background-opacity="0.3"}
<h2 class="r-fit-text mhead">Médiation</h2>
<h2 class="r-fit-text mhead">Algorithmique</h2>
<h2 class="r-fit-text mhead">Parties de cartes compétitives$\Rightarrow$Espace abstrait organisé</h2>

::: aside
WordEmbedding +t-SNE  
:::

## {background-image="./images/mapstodon.png" background-opacity="0.3"}
<h2 class="r-fit-text mhead">Médiation</h2>
<h2 class="r-fit-text mhead">Algorithmique</h2>
<h2 class="r-fit-text mhead">Relations d'abonnements$\Rightarrow$Espace abstrait organisé</h2>

::: aside
Construction de graphe + ForceAtlas + Louvain
:::


## Outils
<img src="./images/tools.png" height="550px">

::: aside
Source: Yan Holtz
:::



## Ressources

- <a href="https://transcarto.github.io/rflows/presentations/CartoFlux.html#1"> N. Lambert, Rhétorique et Carte de flux</a>
- <a href="https://neocarto.github.io/docs/slides/ENTPE/docs/">N. Lambert, Choisir une représentation cartographique </a>
- <a href="https://github.com/holtzy/Talk/blob/master/2023/R_in_Dataviz_universe.pdf"> Y. Holtz, R in the Dataviz univers</a>
- <a href="https://www.data-to-viz.com/">data-to-viz</a>
- <a href="https://r-graph-gallery.com/">r-graph-gallery</a>
- <a href="https://python-graph-gallery.com/">python-graph-gallery</a>

## 
<h2 class="r-fit-text mhead">Merci !</h2>
<h2 class="r-fit-text mhead">Questions / Discussion</h2>