(Géo)-visualisation et interactions quelques exemples

Géoviz,
16 Octobre 2018

Etienne Côme COSYS/GRETTIA
Ifsttar

Etienne Côme

Ifsttar, recherche appliquée

données urbaines, données transport

apprentissage semi,non-supervisé, modèles génératifs

et pseudo cartographe à temps partiel

Informatique

Statistique / Analyse de données

Visualisation

Cartographie

Plus à l'aise avec un

qu'avec un .


Pas de formation spécifique en cartographie.

Découverte de R (+ggplot) et de D3

http://www.comeetie.fr/galerie/velib/

osm / stamen / mapbox / mapzen

Webmapping

= Cartographie

+ Web

Webmapping

= Cartographie

+ interaction

Webmapping

= Cartographie

+ zoom

Interaction

Overview and Explore

overview first, zoom and filter, then details on-demand

B. Schneiderman

Interaction, haut niveau

Towards the Understanding of Interaction in Information Visualization

Ana Figueiras,2015

Filtrer

Montre moi uniquement les données qui m'intéressent

Filtrage, batiparis

Filtrage, hearthstone

Selection

Marquer et suivre les données qui m'intéressent

Insee poc

Hearthstone

Abstraire/Détailler

Ajuster le niveau d'abstraction

zoom géométrique

https://bl.ocks.org/mbostock/3680958

zoom sémantique

https://bl.ocks.org/mbostock/3680958

zoom sémantique, hearthstone + details on demand

zoom sémantique, batiparis

zoom sémantique, france pixel + details on demand

Connection/Relation

Montrer les relations entre données Linking // brushing

linking and brushing

https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

Relations

http://www.comeetie.fr/galerie/velib/

Historique

permettre de retracer les étapes de l'exploration

historique, france pixel

Extraction

Extraire les données qui m'intéressent

Encodage

Donner le choix sur le mode de représentation ou la quantité encodée

Insee poc

Participation/Collaboration

Gamification

Overview + details // focus + context ?

http://www.comeetie.fr/galerie/sankeystif/#stations/Gare de l'Est (Verdun)/32

Interaction, bas niveau

Evènements :

Formulaire :

Interaction, bas niveau

! importance des indices visuels conventions UI/UX Compréhension implicite de l'interface vs apprentissage

Interaction, bas niveau

! importance des détails (over/voronoi)
! importance des détails (over/voronoi + indice visuel + occlusion/z-index)

Interaction, haut niveau Grammaire

Vega-Lite: A Grammar of Interactive Graphics

Arvind Satyanarayan, Dominik Moritz, Kanit Wongsuphasawat, and Jeffrey Heer

Grammaire vega lite

interaction = selection

=(name, type{point,list,interval}, predicate, domain|range, event, init, transforms, resolve)

+

encodage conditionel

Exemple brush

"select": {
 "region": {"type": "interval"}
},

...
 "color": [
 {"if": "region", ...}
 ]
...

Exemple zoom,avancé

"select": {
 "region": {
 "type": "interval",
 "on": "[mousedown[event.shiftKey], mouseup] > mousemove"
 },
 "grid": {
 "type": "interval", "init": {"scales": true}, "zoom": true
 "translate": "[mousedown[!event.shiftKey], mouseup] > mousemove"
 }
}, ...

Ne couvre pas l'ensemble des possibilités vues précedement

En couvre tout de même un certains nombre

Chaine de traitement

Chaine de traitement

Exploration R:

Manipulation de données :

Graphique exploratoire :

Export :

Chaine de traitement

Stockage + avancé

Chaine de traitement

Visualisation js

Conclusion

Merci de votre attention !

@comeetie, http://www.comeetie.fr, http://www.ifsttar.fr