visualisation de données spatiales · 2020-01-18 · articles : données spatiales generalized...
TRANSCRIPT
![Page 1: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/1.jpg)
Visualisation de Données spatiales
![Page 2: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/2.jpg)
Plan
● Articles
● Critique
● Cours
○ Données spatiales
○ Types de cartes
○ Projections
● Tuto D3 maps
2
![Page 3: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/3.jpg)
Articles : Données spatiales
● Generalized fisheye views Ganofsky et Denier
● Touching Transport - A Case Study on Visualizing Metropolitan Public Transit on Interactive Tabletop
Joual et Belande● Rendering Effective Route Maps: Improving Usability
Through Generalization Aubret et Moisson-Franckhauser
● Stenomaps: Shorthand for shapes Bettinelli et Jaunet
3
![Page 4: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/4.jpg)
Plan
● Articles
● Critique
● Cours
○ Données spatiales
○ Types de cartes
○ Projections
● Tuto D3 maps
4
![Page 5: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/5.jpg)
Critique
5
● À qui s’adresse la visualisation ?
-> 1 proposition
● À quelle question la visualisation
permet elle de répondre ?
-> 1 proposition
● Pourquoi (n’)aimez vous (pas)
cette visualisation ?
-> 2 raisons
● Quelles améliorations apporter ?
-> 3 propositions
![Page 6: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/6.jpg)
Waze 6
![Page 7: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/7.jpg)
https://hi.stamen.com/msnbc-hurricane-maps-are-live-54c304c9abc1#.89isxhqvj 7
![Page 8: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/8.jpg)
Kay, M., Kola, T., Hullman, J. R., & Munson, S. A. (2016, May). When (ish) is My Bus? User-centered Visualizations of Uncertainty in Everyday, Mobile Predictive Systems. In Proceedings of the 2016 CHI Conference on Human Factors in Computing Systems (pp. 5092-5103). ACM.
8
![Page 9: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/9.jpg)
9
![Page 10: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/10.jpg)
Extrait de : Agrawala, M., & Stolte, C. (200). Rendering effective route maps: improving usability through generalization. In Proceedings of the 28th annual conference on Computer graphics and interactive techniques (pp. 241-249). ACM. 10
![Page 11: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/11.jpg)
Extrait de : Agrawala, M., & Stolte, C. (200). Rendering effective route maps: improving usability through generalization. In Proceedings of the 28th annual conference on Computer graphics and interactive techniques (pp. 241-249). ACM. 11
![Page 12: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/12.jpg)
Plan
● Articles
● Critique
● Cours
○ Données spatiales
○ Types de cartes
○ Projections
● Tuto D3 maps
12
![Page 13: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/13.jpg)
Cours
● Données spatiales
● Types de cartes
● Projections
13
![Page 14: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/14.jpg)
Les données spatiales
Caractéristique principale : un mapping “direct”
Données géométriques
Munzner, 2014, Visualization Analysis and Design.
Champs scalaires Champs de vecteurs / tenseurs
14
![Page 15: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/15.jpg)
Les données spatiales
Géométrie:
● Données géographiques● Données dérivées
Munzner, 2014, Visualization Analysis and Design. 15
![Page 16: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/16.jpg)
Exemple : Carte cloroplèthe
Utilisation de la spatialité des donnéesLa tâche principale est de comprendre la distribution spatiale
Données● Géométrie / géographie● Table avec un attribut quantitatif par région
Codage● Utilisation de la géométrie pour délimiter des zones ● Couleur séquentielles pour les valeurs http://colorbrewer2.org/
16
![Page 17: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/17.jpg)
Les données spatiales
Champs scalaires :une valeur par cellule
● Isocontours● Rendu de volumes
17
![Page 18: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/18.jpg)
Exemple : isosurfaces
Données● Champ scalaire : 1 attribut quantitatif par cellule
Données dérivées● Géométrie de l’isosurface : isocontours calculés à partir
des valeurs scalaires
Tâche● Analyse de la structure spatiale 3D
18
![Page 19: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/19.jpg)
Les données spatiales
Champs de vecteurs ou de tenseurs Plusieurs valeurs par cellule
● Glyphes de flux● Geometries● Textures ● Propriétés
19
![Page 20: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/20.jpg)
Exemple : champ de vecteurs
Données● Champ scalaire : plusieurs attributs par cellule
Tâches● Identifier des points critiques en une position donnée● Prédire la position future d’un point● Comprendre un déplacement
http://vis.cs.brown.edu/results/images/Laidlaw-2001-QCE.011.html
http://hint.fm/wind/ 20
![Page 21: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/21.jpg)
Cartographie
21
![Page 22: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/22.jpg)
Carte choroplèthe
Carte figurative de l'instruction populaire de la France, par Charles Dupin, 1826.
https://fr.wikipedia.org/wiki/Carte_choropl%C3%A8the 22
![Page 23: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/23.jpg)
Carte de topographiquecontour
Pas de région prédéfinies
23
![Page 24: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/24.jpg)
Cartogrammes
Locations de vacances sur Le Bon Coin, ajusté par habitants
http://www.comeetie.fr/map_lbc.php 24
![Page 25: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/25.jpg)
Autres formes de cartogrammes
http://www.ncgia.ucsb.edu/projects/Cartogram_Central/types.html 25
![Page 27: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/27.jpg)
Carte symbolique
http://visionscarto.net/charles-joseph-minard-cinquante-cartes
27
![Page 28: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/28.jpg)
Carte de flux
http://visionscarto.net/charles-joseph-minard-cinquante-cartes
28
![Page 29: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/29.jpg)
Carte de flux animées
http://maps.tnc.org/migrations-in-motion/
29
![Page 30: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/30.jpg)
Projections
30
![Page 31: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/31.jpg)
Projection de Mercator
31
![Page 32: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/32.jpg)
Projection de Mercator avec indicateurs de déformation de Tissot.
32
![Page 33: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/33.jpg)
Problème de Mercator
Traditionnellement utilisée pour enseigner la géographie
Distortion d’aires en fonction de l’éloignement de l’équateur
Distortion minimisant le “Sud” : Afrique, Amérique du Sud, Océanie
33
![Page 34: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/34.jpg)
Projection de Peters
34
![Page 35: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/35.jpg)
Projection de Peters
35
![Page 36: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/36.jpg)
Projection de Winkel-Tripel
36
![Page 37: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/37.jpg)
Projection de Winkel-Tripel
37
![Page 38: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/38.jpg)
Déplier la Terre
http://www.win.tue.nl/~vanwijk/myriahedral/
http://www.bldgblog.com/2009/12/cracking-the-planet/
https://www.youtube.com/watch?v=b1xXTi1nFCo
38
![Page 39: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/39.jpg)
Déplier la Terre
http://teczno.com/faumaxion-II/
Projection dymaxion de Buckminster Fuller
39
![Page 41: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/41.jpg)
Conclusion
● Données spatiales
● Types de cartes
● Projections
41
![Page 42: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/42.jpg)
Visualizing MBTA Data
Visualisation du métro de Bostonhttp://mbtaviz.github.io/
Projet étudiant de M. Barry et B. Card (2014)
42
![Page 43: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/43.jpg)
Plan
● Articles
● Critique
● Cours
○ Données spatiales
○ Types de cartes
○ Projections
● Tuto D3 maps
43
![Page 44: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/44.jpg)
1. Charger un fond de carte
Attention on utilise d3.v4.js
Fichier de description des états américains :https://raw.githubusercontent.com/alignedleft/d3-book/master/chapter_12/us-states.json
http://blockbuilder.org/aurelient/5bb9210591eb86882612a2002faab698
http://blockbuilder.org/aurelient/4d81a04af78878f6ff2f3bf64a6229f0
44
<script> var width = 700, height = 580;
var svg = d3.select( "body" ) // creation du svg .append( "svg" ) // dans le dom
.attr( "width", width ) .attr( "height", height );
var projection = d3.geoAlbersUsa()// definition de .translate([width/2, height/2]) // la projection
var path = d3.geo.path() // mapping des donnees .projection(projection); // spatiales a la proj. // chargement des donnees d3.json("us-states.json", function(json) {
svg.selectAll("path") .data(json.features) .enter() .append("path") // “magie d3” : lien geojson .attr("d", path); // -> coordonnees ecran
}); </script>
![Page 45: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/45.jpg)
2. Mapping de données
1. Chargement des données2. Choix des couleurs
http://colorbrewer2.org/ https://bl.ocks.org/mbostock/5577023
3. Construction de la carte cloroplèthe
http://blockbuilder.org/aurelient/3bd4b19b6706617c1f4e4d53d3a5725e
45
<script> var width = 700, height = 580;
var svg = d3.select( "body" ).append( "svg" ) .attr( "width", width ) .attr( "height", height );
var g = svg.append( "g" ); var projection = d3.geoAlbersUsa() .translate([width/2, height/2]).scale([500]);
var path = d3.geoPath().projection(projection);
// On definit une echelle de couleur var color = d3.scale.quantize() .range(["rgb(237,248,233)", "rgb(186,228,179)", "rgb(116,196,118)", "rgb(49,163,84)", "rgb(0,109,44)"]); // Chargement des donnees d3.csv("us-ag-productivity-2004.csv", function(data) { //Set input domain for color scale color.domain([ d3.min(data, function(d) { return d.value; }), d3.max(data, function(d) { return d.value; }) ]); d3.json("us-states.json", function(json) {
![Page 46: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/46.jpg)
2. Mapping de données
1. Chargement des données2. Choix des couleurs
http://colorbrewer2.org/ https://bl.ocks.org/mbostock/5577023
3. Construction de la carte cloroplèthe
http://blockbuilder.org/aurelient/3bd4b19b6706617c1f4e4d53d3a5725e
46
<script> var width = 700, height = 580;
var svg = d3.select( "body" ).append( "svg" ) .attr( "width", width ) .attr( "height", height );
var g = svg.append( "g" ); var projection = d3.geoAlbersUsa() .translate([width/2, height/2]).scale([500]);
var path = d3.geoPath().projection(projection);
// On definit une echelle de couleur var color = d3.scaleQuantize() .range(["rgb(237,248,233)", "rgb(186,228,179)", "rgb(116,196,118)", "rgb(49,163,84)", "rgb(0,109,44)"]); // Chargement des donnees d3.csv("us-ag-productivity-2004.csv", function(data) { //Set input domain for color scale color.domain([ d3.min(data, function(d) { return d.value; }), d3.max(data, function(d) { return d.value; }) ]); d3.json("us-states.json", function(json) {
![Page 47: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/47.jpg)
2. Mapping de données
1. Chargement des données2. Choix des couleurs
http://colorbrewer2.org/ https://bl.ocks.org/mbostock/5577023
3. Construction de la carte cloroplèthe
http://blockbuilder.org/aurelient/3bd4b19b6706617c1f4e4d53d3a5725e
47
// Chargement des donneesd3.csv("us-ag-productivity-2004.csv", function(data) { (...) d3.json("us-states.json", function(json) { //On fusionne les donnees avec le GeoJSON for (var i = 0; i < data.length; i++) {
//Nom de l'etat var dataState = data[i].state; //Valeur associee a l'etat var dataValue = parseFloat(data[i].value);
//Recherche de l'etat dans le GeoJSON for (var j = 0; j < json.features.length; j++) { var jsonState = json.features[j].properties.name; if (dataState == jsonState) { //On injecte la valeur de l'Etat dans le json json.features[j].properties.value = dataValue;
//Pas besoin de chercher plus loin break; } } }(...)
![Page 48: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/48.jpg)
2. Mapping de données
1. Chargement des données2. Choix des couleurs
http://colorbrewer2.org/ https://bl.ocks.org/mbostock/5577023
3. Construction de la carte cloroplèthe
http://blockbuilder.org/aurelient/3bd4b19b6706617c1f4e4d53d3a5725e
48
// Chargement des donneesd3.csv("us-ag-productivity-2004.csv", function(data) {
//Set input domain for color scale ... d3.json("us-states.json", function(json) { ...
g.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path) .style("fill", function(d) { //on prend la valeur recuperee plus haut var value = d.properties.value;
if (value) { return color(value); } else { // si pas de valeur alors en gris return "#ccc"; } }); });});
![Page 49: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/49.jpg)
Un exemple à remprendre
49
![Page 50: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/50.jpg)
Exo à faire en TP
Adapté avec des données françaises : ● https://www.google.org/flutrends/about/data/flu/fr/data.txt
● https://raw.githubusercontent.com/gregoiredavid/france-geojson/maste
r/regions.geojson
Carte chloroplèthe(pas symbolique)
Slider temporel lié à la carte
50
![Page 51: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/51.jpg)
Références D3 cartographie
● Livre Interactive Data Visualization for the Web Chapter 12. Geomapping
● Données GeoJSON France : https://github.com/gregoiredavid/france-geojson/
● https://maptimeboston.github.io/d3-maptime/
● M. Bostock : Command Line Cartography
51
![Page 52: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/52.jpg)
Autres outils
Leaflet (Web)
Unfolding maps (Processing / Java)
Mapbox
Cartodb
52
![Page 53: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/53.jpg)
Représentations non spatiales
53
![Page 54: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/54.jpg)
http://www.ericson.net/content/2011/10/when-maps-shouldnt-be-maps/
54
![Page 55: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/55.jpg)
Critiques alternatives
55
![Page 56: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/56.jpg)
Carte d’Harvard ?
● http://www.cs171.org/2015/assets/slides/16-maps.pdf (slide 39)
56
![Page 57: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/57.jpg)
57
![Page 58: Visualisation de Données spatiales · 2020-01-18 · Articles : Données spatiales Generalized fisheye views Ganofsky et Denier Touching Transport - A Case Study on Visualizing Metropolitan](https://reader030.vdocuments.mx/reader030/viewer/2022041103/5f02c2c37e708231d405e0dc/html5/thumbnails/58.jpg)
https://medium.com/@hint_fm/design-and-redesign-4ab77206cf9#.3avyf29un 58