D3.js - Géographies
Les coordonnées géospatiales sont souvent utilisées pour les données météorologiques ou démographiques. D3.js nous donne trois outils pour les données géographiques -
Paths - Ils produisent les pixels finaux.
Projections - Ils transforment les coordonnées de la sphère en coordonnées cartésiennes et
Streams - Ils accélèrent les choses.
Avant d'apprendre ce que sont les géographies dans D3.js, nous devons comprendre les deux termes suivants -
- D3 Geo Path et
- Projections
Examinons ces deux termes en détail.
Chemin géographique D3
C'est un générateur de chemin géographique. GeoJSON génère une chaîne de données de chemin SVG ou rend le chemin vers un canevas. Un canevas est recommandé pour les projections dynamiques ou interactives afin d'améliorer les performances. Pour générer un générateur de données D3 Geo Path, vous pouvez appeler la fonction suivante.
d3.geo.path()Ici le d3.geo.path() La fonction de générateur de chemin nous permet de sélectionner la projection cartographique que nous voulons utiliser pour la traduction des coordonnées géographiques en coordonnées cartésiennes.
Par exemple, si nous voulons afficher les détails de la carte de l'Inde, nous pouvons définir un chemin comme indiqué ci-dessous.
var path = d3.geo.path()
svg.append("path")
.attr("d", path(states))Les projections
Les projections transforment la géométrie polygonale sphérique en géométrie polygonale plane. D3 fournit les implémentations de projection suivantes.
Azimuthal - Les projections azimutales projettent la sphère directement sur un plan.
Composite - Composite se compose de plusieurs projections qui sont composées dans un seul écran.
Conic - Projette la sphère sur un cône puis déroulez le cône sur le plan.
Cylindrical - Les projections cylindriques projettent la sphère sur un cylindre contenant, puis déroulent le cylindre sur le plan.
Pour créer une nouvelle projection, vous pouvez utiliser la fonction suivante.
d3.geoProjection(project)Il construit une nouvelle projection à partir du projet de projection brute spécifié. La fonction de projet prend la longitude et la latitude d'un point donné en radians. Vous pouvez appliquer la projection suivante dans votre code.
var width = 400
var height = 400
var projection = d3.geo.orthographic()
var projections = d3.geo.equirectangular()
var project = d3.geo.gnomonic()
var p = d3.geo.mercator()
var pro = d3.geo.transverseMercator()
.scale(100)
.rotate([100,0,0])
.translate([width/2, height/2])
.clipAngle(45);Ici, nous pouvons appliquer l'une des projections ci-dessus. Discutons brièvement de chacune de ces projections.
d3.geo.orthographic()- la projection orthographique est une projection azimutale apte à afficher un seul hémisphère; le point de perspective est à l'infini.
d3.geo.gnomonic() - La projection gnomonique est une projection azimutale qui projette de grands cercles sous forme de lignes droites.
d3.geo.equirectangular()- L'équirectangulaire est la projection géographique la plus simple possible. La fonction d'identité. Il n'est ni à surface égale ni conforme, mais il est parfois utilisé pour les données raster.
d3.geo.mercator() - La projection Spherical Mercator est couramment utilisée par les bibliothèques de cartographie en mosaïque.
d3.geo.transverseMercator() - La projection transversale de Mercator.
Exemple de travail
Créons la carte de l'Inde dans cet exemple. Pour ce faire, nous devons suivre les étapes suivantes.
Step 1 - Apply styles - Ajoutons des styles dans la carte en utilisant le code ci-dessous.
<style>
path {
stroke: white;
stroke-width: 0.5px;
fill: grey;
}
.stateTN { fill: red; }
.stateAP { fill: blue; }
.stateMP{ fill: green; }
</style>Ici, nous avons appliqué des couleurs particulières pour les états TN, AP et MP.
Step 2 - Include topojson script - TopoJSON est une extension de GeoJSON qui code la topologie, qui est définie ci-dessous.
<script src = "http://d3js.org/topojson.v0.min.js"></script>Nous pouvons inclure ce script dans notre codage.
Step 3 - Define variables - Ajoutez des variables dans votre script, en utilisant le code ci-dessous.
var width = 600;
var height = 400;
var projection = d3.geo.mercator()
.center([78, 22])
.scale(680)
.translate([width / 2, height / 2]);Ici, la largeur SVG est de 600 et la hauteur de 400. L'écran est un espace à deux dimensions et nous essayons de présenter un objet en trois dimensions. Ainsi, nous pouvons gravement déformer la taille / forme du terrain en utilisant led3.geo.mercator() fonction.
Le centre est spécifié [78, 22], cela définit le centre de la projection à l'emplacement spécifié comme un tableau à deux éléments de longitude et de latitude en degrés et renvoie la projection.
Ici, la carte a été centrée sur 78 degrés ouest et 22 degrés nord.
L'échelle est spécifiée comme 680, cela définit le facteur d'échelle de la projection sur la valeur spécifiée. Si l'échelle n'est pas spécifiée, elle renvoie le facteur d'échelle actuel, qui est par défaut de 150. Il est important de noter que les facteurs d'échelle ne sont pas cohérents entre les projections.
Step 4 - Append SVG - Maintenant, ajoutez les attributs SVG.
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);Step 5 - Create path - La partie suivante du code crée un nouveau générateur de chemin géographique.
var path = d3.geo.path()
.projection(projection);Ici, le générateur de chemin (d3.geo.path ()) est utilisé pour spécifier un type de projection (.projection), qui a été défini précédemment comme une projection Mercator à l'aide de la projection variable.
Step 6 - Generate data - indiatopo.json - Ce fichier contient tellement d'enregistrements, que nous pouvons facilement télécharger à partir de la pièce jointe suivante.
Télécharger indiatopo.json file
Une fois le fichier téléchargé, nous pouvons l'ajouter à notre emplacement D3. L'exemple de format est illustré ci-dessous.
{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......
........................................Step 7 - Draw map - Maintenant, lisez les données du indiatopo.json fichier et dessinez la carte.
d3.json("indiatopo.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.states)
.geometries)
.enter()
.append("path")
.attr("class", function(d) { return "state" + d.id; })
.attr("d", path)
});Ici, nous allons charger le fichier TopoJSON avec les coordonnées de la carte de l'Inde (indiatopo.json). Ensuite, nous déclarons que nous allons agir sur tous les éléments de chemin dans le graphique. Il est défini comme, g.selectAll («chemin»). Nous allons ensuite extraire les données qui définissent les pays du fichier TopoJSON.
.data(topojson.object(topology, topology.objects.states)
.geometries)Enfin, nous l'ajouterons aux données que nous allons afficher à l'aide du .enter() méthode, puis nous ajoutons ces données en tant qu'éléments de chemin à l'aide du .append(“path”) méthode.