Support d'intervention pour un atelier de géobidouille organisé dans le cadre d'un stage dataviz à l'INTD-CNAM

1. Cartographie numérique
LE WEB MAPPING POUR TOUS

2. Un atelier de géobidouille
pour s'initier à la représentation spatiale
de données et contenus numériques sur le web
en apprenant à fabriquer des applications cartographiques interactives sans
écrire une seule ligne de code (ou presque)
#1 Etat de l’art et
concepts de base
#2 Mise en pratique
et manipulations
de base
#3 Géovisualisation de
données
#4 Narration
cartographique

3. Introduction au web mapping
Hier Demain
Etat de l’art et concepts de base
Partie #1
?

4. Information
Données et contenus
géoréférencés
Géographie
Cartes et symbolisation
graphique
Web
Standards de fabrication
pour une diffusion en ligne
Web Mapping
SIG
ArcGIS, QGIS, etc
Cartographie numérique orientée Web
INTERNET

5. Anatomie simplifiée d’une carte web

6. Comme le corps humain, une web map est composée
de systèmes qui interagissent et se croisent
Cellules = Données (géographiques)
Système digestif = Styles Système circulatoire = Tuiles
O
Système nerveux = Serveurs

7. Google Maps Open Street Map
Des données stylisées, rendues sous forme de tuiles
par des serveurs, le tout visible dans un navigateur
2 exemples de cartes glissantes
* slippy map
Données contributives via
iD (web) ou JOSM (desktop)
Données contributives via
Google Map Maker (web)
Fermé depuis mai 2015

8. Les tuiles cartographiques
au cœur du fonctionnement d’une carte glissante
* map tiles, tileset
Grille de localisation des tuiles
en fonction du niveau de zoom,
puis colonne et ligne z/x/y
A chaque niveau de zoom (+/- 20)
le nombre de tuiles croit de
manière exponentielle
Les tuiles sont rendues sous la forme
d’images carrées de 256x256 pixels
à partir d’un serveur
Une pyramide d’images pour améliorer la réactivité et la fluidité
Ce modèle de tuilage (raster) est aujourd’hui le plus courant, mais le tuilage vectoriel, moins standardisé, arrive à grands pas !

9. Tile Map Service (TMS) : référence normative pour interroger un serveur de tuiles
Des images collées les unes aux autres o_0
http://d.tile.stamen.com/watercolor/13/4149/2818.jpg
Niveau de zoom (z)
Paire de localisation (x/y)Nom du serveur de tuiles
Format image

10. Sans surprise, une collection de tuiles est souvent
utilisée comme fond de carte pour créer une web map
* base layer, basemap
Qui fournit et où trouver des collections de tuiles ?
Bonus #1
Bonus #2
Et pour Google Maps ?

11. Les langages et outils de personnalisation de
tuiles diffèrent en fonction de l’environnement
Google Maps vs. Open Street Map
Mapstylr Mapbox Studio
Application web très simple à utiliser mais
qui assiste uniquement la production
d’un code en JSON à réinjecter dans
une web map utilisant l’API Google Maps
Logiciel à installer, très complet et puissant,
mais difficile à prendre en main (CartoCSS)
Import / export de données et hébergement
sur les serveurs de Mapbox
Successeur annoncé de TileMill

12. Les calques ou couches de données permettent d’afficher
des informations au-dessus du fond de carte
* data layers, content layers, feature layers
Types et formats standards des geodata
Rasters Vecteurs
Images référencées dans l’espace
et composées de pixels (données matricielles)
PNG, GeoTIFF, JPEG2000 … MBTiles
Objets géométriques (points, lignes et polygones)
référencés dans l’espace (données vectorielles)
SHP, KML, OSM XML, GeoJSON, GeoRSS, GPX … CSV
Dans une web map, rasters et vecteurs sont combinables (tuiles + couches de données vectorielles par exemple)
On peut ajouter des interactions avec les géométries vectorielles (ouverture d’une popup au clic par exemple)
De nombreux outils permettent de créer des geodata, de les nettoyer ou de les convertir (passer d’un format à un autre)
Les sources de données géographiques disponibles en ligne et réutilisables se démultiplient

13. Plusieurs méthodes, plus ou moins complexes, permettent
de récupérer des couches de données géographiques
Données publiques(Geo) Web Social OpenStreetMap
Plate-formes de
partage de contenus
et réseaux sociaux
Par exemple, extraire
un flux de photos
géolocalisées (GeoRSS)
à partir de Flickr
Les développeurs utilisent les interfaces de programmation (APIs) pour intégrer dynamiquement
des données tierces dans des applications hybrides (mashups cartographiques)
Portails opendata de l’Etat,
de collectivités locales
ou autres organismes publics
Par exemple, télécharger
un fichier de geodata
sur data.gouv.fr ou
sur iledefrance.data.fr
Base de données
géographiques
libre et ouverte
Par exemple, construire
une requête à partir
d’Overpass Turbo et
exporter son résultat
Différentes sources possibles

14. L’intégration web permet d’assembler tuiles et couches de
données au sein d’une interface cartographique interactive
* web stack, interactive web map, online web map creator
Comment créer une web map ?
Données
HTML CSS JAVASCRIPT
CalquesTuiles
Navigateur
Outils de création
pour développeurs
(programmation)
Librairies (Leaflet, OpenLayers, etc)
et APIs (Google Maps, ArcGIS, etc)
Outils de création
pour tous
(sans coder)
Applications et
services en ligne

15. Initiation au web mapping
Mise en pratique et manipulations de base
Partie #2

16. Le géocodage consiste à affecter des coordonnées
géographiques (longitude/latitude) à une adresse
* geocoding
Le géocodage inversé consiste à trouver l'adresse correspondant
(ou la plus proche) à des coordonnées XY
Comment géocoder des adresses ?
Bonus #2
Bonus #3
Le géocodeur CSV d’Etalab est un outil en ligne qui s’appuie sur Addok,
moteur de recherche open source de la Base Nationale d’Adresses (BAN)
Bonus #1

17. Outil d’édition de données en GeoJSON développé à partir de Mapbox.js
Simple et rapide, il permet de créer et publier des cartes web en WYSIWYG
Nécessite un compte Github pour sauvegarder et stocker les données
Comment éditer / visualiser les données d’une carte web ?
La création de couches de données géographiques
peut être facilitée par de nombreux outils d’édition en ligne
* online map creator
geojson.io

18. Convertir des Shapefile en GeoJSON
ou en TopoJSON et exporter
automatiquement vers Google Fusion
Tables
Convertir des geodata à partir et vers
de très nombreux formats (existe
depuis 2008)
Convertir des geodata (nombreux
formats supportés) en KML
Convertir des geodata (nombreux
formats supportés) en GeoJSON ou
transformer du GeoJSON en Shapefile
Simplifier des données GeoJSON en
les convertissant au format TopoJSON
Editer et simplifier des fichiers
Shapefile, GeoJSON, TopoJSON, et
plusieurs autres formats de données
Pour exploiter des geodata, on a souvent besoin de
réaliser diverses opérations de traitement
Kit applicatif pour la conversion de données géographiques
Ogre*
Shape Escape Geo Converter* KML Converter*
The DistilleryMap Shaper*

19. La géorectification consiste à déformer une image
pour corriger son alignement sur une carte
* map warping, image geo rectifying
Comment géoréférencer, rectifier et tuiler une image ?
Plate-forme développée en open source et déployée par
la Bibliothèque Publique de New York qui permet de géorectifier des images
D’autres méthodes, plus complexes, sont possibles mais cette plate-forme fournit un service tout en un
Map Warper

20. Comment créer ma première carte web ?
Google My Maps Mapbox Editor
Les outils d’édition cartographique en ligne proposent
des fonctionnalités plus ou moins avancées
ou
Nécessite un compte Google Nécessite un compte Mapbox

21. Comment créer une carte web plus évoluée ?
uMap
Nécessite un compte OpenStreetMap, Bitbucket, Github ou Twitter
Pour aller plus loin dans la personnalisation et les
fonctionnalités de vos cartes web

22. Visualisation cartographique interactive
* interactive geovisualisation
Visualiser des données avec des cartes web
Partie #3

23. La géovisualisation interactive est une étape dans la
longue histoire de la représentation spatiale de données
La campagne de Russie par Charles Minard (1869)
Localisation | Temps | Distance | Température | Nombre de survivants

24. Données séquentielles
Quantitatives / Continues
Données catégorielles
Qualitatives / Discrètes
Nominales
Catégories nommées
Sans ordre a priori
femmes | hommes
Ordinales
Catégories ordonnées
Classement
groupes d’âge
Relatives
Variables de taux
Rapport entre 2 valeurs
nb d’habitants / km2
Absolues
Variables de stock
Valeur concrète / brute
nb d’habitants
Pour représenter des données sur une carte, il est nécessaire
de prendre en compte la nature de ces données
Données séquentielles vs. données catégorielles

25. La forme * : variation du type de symbole
La taille * : variation de la surface du symbole
La couleur * : variation du % des 3 couleurs primaires
La valeur * : variation du % du noir et du blanc
La texture : variation de la nature du motif
Le grain : variation de résolution du motif sans variation de valeur
L’orientation : variation de l’angle du motif ou de la forme
Pour représenter des données sur une carte, on peut jouer
avec des variables de rendu graphique
7 variables visuelles pour la représentation cartographique
Bonus #1
Bonus #2
Bonus #3
Bonus #4

26. Utilisation de variables visuelles selon l’implantation et la nature des données
Pour représenter des données sur une carte, on cherche
à respecter des règles de sémiologie (carto)graphique
Objectif : construire une carte à la fois lisible et véhiculant l’information de façon correcte

27. Cas pratique : cherchez les erreurs sémiologiques ou
maladresses de représentation cartographique
Où sont les femmes en Ile-de-France ?
Pourcentage de femmes par commune
2011 – Source INSEE
Nombre de femmes par commune
2011 – Source INSEE

28. Parmi la multitude des modes de visualisation cartographique
possibles, on peut isoler 2 formes principales
Cartes choroplèthes vs. cartes par symboles
Par symbolesChoroplèthes
Dégradé de couleurs
Indicateur quantitatif
en valeurs relatives
Couleurs opposables
Indicateur qualitatif
en valeurs nom. ou ord.
Proportionnels
Indicateur quantitatif
en valeurs absolues
Ponctuels simples
Indicateur qualitatif
en valeurs nom. ou ord.
Les valeurs de l’indicateur
sont découpées en tranches
séparées par des seuils
Plusieurs méthodes de
découpage (discrétisation)
sont possibles
Les valeurs de l’indicateur
colorisent les entités
géographiques
Chaque couleur représente
et permet de séparer
les catégories
Les valeurs de l’indicateur
sont représentées par un
symbole dont la surface
est proportionnelle à
la valeur représentée
Les valeurs de l’indicateur
sont représentées par un
symbole dont la forme et/ou
la couleur varie selon
la catégorie

29. D’autres modes de représentation permettent d’interpoler
ou d’agréger des données pour faciliter leur visualisation
Carte de groupement
* cluster map
Carte de température
* heat map
Carte de carroyage
* bin map
Une carte de température (ou de chaleur)
permet de souligner la disparité spatiale
d'un indicateur quantitatif
en valeurs absolues à l'aide d'un
dégradé de couleurs allant du
froid au chaud
On repère ainsi en un coup d'œil
les zones à forte densité (les points chauds)
Une carte de groupement permet
de rassembler des symboles
ponctuels en grappes de
proximité et d’afficher le nombre
de points décomptés en fonction
du niveau de zoom
Elle permet de rendre plus digeste
une carte saturée de points
Une carte de carroyage permet
d’agréger et de symboliser
les données d’un indicateur
quantitatif en valeurs absolues dans
des formes, hexagonales ou carrées,
en faisant varier la couleur
comme on le ferait pour une
carte choroplèthe
(dégradé + tranches de décompte)

30. Cas particulier : la représentation spatiale
de données temporelles pour combiner espace et temps
Interaction AnimationClassique
Comment visualiser des données géotemporelles ?
AnamorphoseFiltre
Utiliser des variables
visuelles en traitant les
données temporelles
comme des données
qualitatives ordinales
Intégrer un élément
d’interface qui permette
de filtrer les données
représentées sur la carte
en fonction du temps
Lier représentation
spatiale et représentation
temporelle dans une
interface hybride
Déformer une
représentation spatiale en
fonction de distances
temporelles
(cartogramme)
Intégrer un lecteur
dynamique qui permette
d’afficher les données
spatiales en fonction de
jalons temporels
Bonus #2 Bonus #3Bonus #1 Bonus #4

31. Bubble | Cluster | Heatmap | Markers
Comment créer ma première visualisation cartographique ?
Maps Data
Parmi les outils web d’édition cartographique,
certains permettent de générer des visualisations de données
Nécessite l’ouverture d’un compte utilisateur

32. Simple | Cluster | Choropleth | Category | Bubble | Intensity | Density | Torque | Torque Heat | Torque Category
CartoDB
Les modes de représentation proposés sont plus ou moins
étendus et paramétrables en fonction de l’outil utilisé
Comment accéder à des formes diversifiées de géovisualisation ?
Nécessite l’ouverture d’un compte utilisateur

33. Emplacement (un seul symbole) | Carte de densité | Type (symboles uniques) | Totaux et montants (Couleur) | Totaux et montants (Taille)
Ouvrir un compte pour développeur (moins de limitations)
Comment trouver un mode de visualisation adapté à mes données ?
En fonction de vos besoins,
il peut être nécessaire de changer d’outil
ArcGIS Online

34. Comment créer une application à partir d’une carte ArcGIS ?
En fonction de vos besoins,
il peut être nécessaire d’ajouter des fonctionnalités
Web AppBuilder
Une bibliothèque de composants (widgets) pour enrichir vos applications

35. Narration cartographique interactive
* interactive storymap
Raconter des histoires avec des cartes web
Partie #4

36. Trois exemples d’usages journalistiques
Slide Scroll Strip
Un récit cartographique (storymap) est un format narratif
interactif qui permet de lier des contenus multimédia
avec des représentations spatiales
Clermont la nuit
La Montagne
Les grands chantiers de
la Genève Internationale
Le Temps
Un Etat voyou le long
de deux rivières
The New York Times
Bonus #1 Bonus #2
Tout juste émergent, ce format s’appuie une grammaire narrative qui
reste à stabiliser. Plusieurs modèles de maquettes associés à des outils
d’édition web permettent néanmoins de faciliter leur production.

37. Comment créer mon premier récit cartographique ?
ou
StorymapJS Heganoo
Le modèle du « diaporama cartographique »
est le plus simple et rapide à mettre en oeuvre
Application open source (Knight Lab)
Personnalisation des tuiles (OSM)
2 versions possible : Map ou Gigapixel (Zoomify)
Nécessite un compte Google (accès Drive)
Service freemium (2 maps et 20 points/map)
Personnalisation des tuiles (Google Maps)
2 versions possibles : Map Slide ou Image Map Slide
Nécessite l’ouverture d’un compte
Bonus #1 Bonus #2

38. Story Maps
Story Maps propose un choix étendu de maquettes
applicatives pour composer des récits cartographiques
Nécessite un compte ArcGIS Online

39. Séquentiel
Série
Comparaison
Maquettes avec générateur d’application intégré
Map Tour Map Journal*
Onglets Accordéon Puces
Swipe Spyglass
Les maquettes les plus immédiatement et facilement
utilisables sont celles qui intègrent un générateur d’application

40. Odyssey est un projet open source développé par CartoDB
avec le soutien de la Knight Foundation
3 maquettes applicatives aujourd’hui disponibles
Utilisable avec des cartes web créées à partir de CartoDB
Syntaxe Markdown pour intégrer des contenus et interagir avec la carte

41. Principales sources web utilisées pour
confectionner ce support d’atelier
Crédits
Survey of the Best Online Mapping Tools - Toptal
Anatomy of a Web Map - Alan McConchie
Anatomy of a Web Map - Chase Gruber
Hello Web Maps - Joey Lee
Introduction libre à la cartographie - Mapschool
Play With Data - Jean Abbiateci
Manuel de Cartographie - Arctique
Thematic Cartography Guide - Axismaps
Aide Geoclip - emc3
Interfaces for Geotemporal Visualization - Nick Rabinowitz