(Géo)-visualisation et interactions quelques exemples

Géoviz,
16 Octobre 2018

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.

Webmapping

= Cartographie

+ Web

Webmapping

= Cartographie

+ interaction

Webmapping

= Cartographie

+ zoom

Interaction

Overview and Explore

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

Interaction, haut niveau

Towards the Understanding of Interaction in Information Visualization

Filtrer

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

Filtrage, batiparis

Filtrage, hearthstone

Selection

Insee poc

Hearthstone

Abstraire/Détailler

Ajuster le niveau d'abstraction

zoom géométrique

zoom sémantique

zoom sémantique, hearthstone + details on demand

zoom sémantique, batiparis

zoom sémantique, france pixel + details on demand

Connection/Relation

linking and brushing

Historique

Extraction

Encodage

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 :

• :onclick,onmouseover, onchange,...
• :onkeypress,...
• :ontouchstart,ontouchend,...

Formulaire :

• textinput, radiobutton, checkbox ...

Interaction, bas niveau

Interaction, bas niveau

Interaction, haut niveau Grammaire

Vega-Lite: A Grammar of Interactive Graphics

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

• Exploration, remise en forme : R, python, ligne de commande
• Stockage : postgres/postgis, mongo,
• Visualisation : d3, mapbox-gl, leaflet

Chaine de traitement

Manipulation de données :

• dplyr, tidyr, sf ...

Graphique exploratoire :

• ggplot, ggmap, cartography ...

Export :

• simple fichiers json,geojson

Chaine de traitement

Stockage + avancé

• postgres/postgis
• elastic-search
• cron pour la récupération automatique

Chaine de traitement

Visualisation js

• D3
• mapbox-gl//deck.gl
• leaflet

Conclusion

• Interaction, ouvre de très nombreuse possibilités
• -> La création d'une grammaire n'est pas une chose aisé
• Intérêt des outils non limités en terme de possibilités graphique et interactive d3, js

Merci de votre attention !