Webmapping

avec leaflet et autres

DU DataViz

Cartographie

Visualisation + Géographie

Carte et dataviz

Charles-Joseph Minard

Carte et dataviz

Charles Dupin

Carte et dataviz

John Snow

Semiologie graphique

Variables graphiques, marques

Variables graphiques, marques

Couleurs

! importance de la discrétisation

! importance de l'échelle

Taille des cercles : échelle aire ou rayon ?

Rayon

Aire

Webmapping

Cartographie + Web

+ interaction

+ zoom

Pyramide de tuile

Différents composants

Différents formats

Pour continuer l'exploration

• http://fr.slideshare.net/loichay/le-web-mapping-pour-tous
• http://maptime.io/anatomy-of-a-web-map
• http://maptimeboston.github.io/web-maps-101
• http://slides.com/cpgruber/maptime-cape-cod-webmaps/

Quelques exemples de projets

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

Point techno

• Data : scrapping + contours departements osm
• Techno : js + d3
• Traitements : cartograme

Quelques exemples de projets

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

Point techno

• Data : données insee
• Techno : leaflet + js + d3 + underscore
• Traitements : tuiles vectorielles (R) !

Quelques exemples de projets

http://vlsstats.ifsttar.fr/atNight/

Point techno

• Data : velib
• Techno : leaflet + heatmap canvas
• Traitements : aggregation (R) + heatmap

Quelques exemples de projets

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

Point techno

• Data : velib
• Techno : d3
• Traitements : aggregation (R) + heatmap

Quelques exemples de projets

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

Point techno

• Data : open data apur (shapefile)
• Techno : mapbox-gl-js + mapbox studio + js
• Traitements : mapbox studio

Quelques exemples de projets

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

Point techno

• Data : insee
• Techno : d3
• Traitements : aggregation (R)

Overview + details // focus + context ?

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

Point techno

• Data : ile de france mobilité
• Techno : d3
• Traitements : aggregation (R)

Outils

Leaflet

• Leafletjs.com
• ex : basicmap.html
• http://lyzidiamond.com/leaflet/#40

Mapbox-gl-js

• https://www.mapbox.com/mapbox-gl-js/api/
• https://www.mapbox.com/mapbox-gl-js/examples/
• https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/

Kepler-gl

• https://kepler.gl/