d3.js
Projections D3

Projections Mercator

Une projection de Mercator est l'une des projections les plus reconnaissables utilisées dans les cartes. Comme toutes les projections cartographiques, elle présente des distorsions et, pour un Mercator, la projection est particulièrement visible dans les régions polaires. C’est une projection cylindrique, les méridiens se déplacent verticalement et les latitudes sont horizontales.

L'échelle dépend de la taille de votre svg. Pour cet exemple, toutes les échelles utilisées ont un svg de 960 pixels de large sur 450 pixels de haut.

La carte ci-dessous montre un Indicatrix de Tissot pour une projection de Mercator, chaque cercle étant en réalité de la même taille mais la projection en montre évidemment plus que d'autres:

Cette distorsion est due au fait que la projection tente d’éviter un étirement unidimensionnel de la carte. Lorsque les méridiens commencent à fusionner aux pôles Nord et Sud, la distance entre eux commence à se rapprocher de zéro, mais la surface de la projection est rectangulaire (et non la carte, même si elle est rectangulaire) et ne permet pas de modifier la distance. entre les méridiens dans la projection. Cela étirerait les traits le long de l'axe x près des pôles, déformant leur forme. Pour contrer cela, un Mercator étire l'axe des y et on s'approche des pôles, ce qui rend les indicateurs circulaires.

La projection de la carte ci-dessus est essentiellement la projection par défaut de Mercator légèrement décalée:

var projection = d3.geoMercator()
    .scale(155)
    .center([0,40]) // Pan north 40 degrees
    .translate([width/2,height/2]);

Pour centrer la projection sur un point donné avec une latitude connue et une longitude connue, vous pouvez vous déplacer facilement vers ce point en spécifiant le centre:

var projection = d3.geoMercator()
    .center([longitude,latitude])

Cela vous ramènera à cette fonction (mais pas au zoom) sur la surface projetée (qui ressemble à la carte ci-dessus).

Les échelles devront être adaptées à la zone d'intérêt, les nombres plus grands équivalant à des caractéristiques plus importantes (degré de zoom plus élevé), les nombres plus petits au contraire. Faire un zoom arrière peut être un bon moyen de vous repérer pour voir où vos caractéristiques sont relatives au point sur lequel vous vous êtes concentré - si vous rencontrez des difficultés pour les trouver.

En raison de la nature de la projection de Mercator, les zones proches de l’équateur ou des basses latitudes feront de leur mieux avec ce type de projection, tandis que les zones polaires peuvent être très déformées. La distorsion est même le long de n'importe quelle ligne horizontale, de sorte que les zones larges mais pas grandes peuvent également être bonnes, tandis que les zones très différentes entre leurs extrémités nord et sud présentent davantage de distorsion visuelle.

Pour l'Inde, par exemple, nous pourrions utiliser:

var projection = d3.geoMercator()
    .scale(800)
    .center([77,21])
    .translate([width/2,height/2]);

Ce qui nous donne (encore une fois avec l'indicatrice de Tissot pour montrer la distorsion):

Cela a un faible niveau de distorsion, mais les cercles ont la même taille (vous pouvez voir un plus grand chevauchement entre les deux premières lignes que les deux dernières, de sorte que la distorsion est visible). Dans l'ensemble, la carte montre une forme familière pour l'Inde.

La distorsion dans la zone n’est pas linéaire, elle est fortement exagérée vers les pôles, donc le Canada avec des extrêmes nord et sud assez éloignés et une position assez proche des pôles signifie que la distorsion peut être insoutenable:

var projection = d3.geoMercator()
    .scale(225)
    .center([-95,69.75])
    .translate([width/2,height/2]);

Cette projection rend le Groenland aussi grand que le Canada, alors qu'en réalité, le Canada est près de cinq fois plus grand que le Groenland. C'est tout simplement parce que le Groenland est plus au nord que la majeure partie du Canada (désolé l'Ontario, il me semble avoir coupé une partie de votre extrémité sud).

Comme l'axe des y est considérablement étendu près des pôles dans un Mercator, cette projection utilise un point situé considérablement au nord du centre géographique du Canada. Si vous traitez des zones de haute latitude, vous devrez peut-être adapter votre point de centrage pour tenir compte de cet étirement.

Si vous avez besoin d'une projection Mercator pour les zones polaires, vous pouvez réduire la distorsion et utiliser une projection Mercator. Vous pouvez y parvenir en faisant tourner le globe. Si vous faites pivoter l'axe x sur le Mercator par défaut, il apparaît que vous le déplacez vers la gauche ou la droite (vous faites simplement tourner le globe dans le cylindre sur lequel vous projetez), mais si vous modifiez l'axe y tourner la terre sur le côté ou à un autre angle. Voici un Mercator avec une rotation de -90 degrés:

var projection = d3.geoMercator()
.scale(155)
.rotate([0,-90]);
.translate([width/2,height/2]);

Les points indicatrice sont aux mêmes endroits que la première carte ci-dessus. La distorsion augmente toujours à mesure que l'on atteint le haut ou le bas de la carte. Voici comment une carte Mercator par défaut apparaîtrait si la terre tournait autour d'un pôle Nord à [0,0] et un pôle Sud à [180,0], la rotation a fait pivoter le cylindre sur lequel nous projetons de 90 degrés par rapport à les pôles. Notez que les pôles ne présentent plus de distorsion insoutenable, ceci présente une méthode alternative pour projeter des zones proches des pôles sans trop de distorsion dans la zone.

En utilisant à nouveau le Canada comme exemple, nous pouvons faire pivoter la carte vers une coordonnée centrale, ce qui minimisera la distorsion dans la zone. Pour ce faire, nous pouvons retourner à un point de centrage, mais cela nécessite une étape supplémentaire. En nous centrant sur un élément, avec la rotation nous déplaçons la terre sous nous, nous avons donc besoin du négatif de notre coordonnée de centrage:

var projection = d3.geoMercator()
    .scale(500)
    .rotate([96,-64.15])
    .translate([width/2,height/2]);    

Notez que l'indicatrice de Tissot montre une faible distorsion dans la zone maintenant. Le facteur d'échelle est également beaucoup plus grand qu'avant, car ce Canada est maintenant à l'origine de la projection et le long du milieu de la carte, les caractéristiques sont plus petites que celles du haut ou du bas (voir première matrice ci-dessus). Nous n'avons pas besoin de centrer car le point central ou l'origine de cette projection est à [-96,64.15] , le centrage nous [-96,64.15] de ce point.

Projections Albers

Une projection d'Albers ou, plus exactement, une projection conique à surface égale d'Albers est une projection conique commune et une projection officielle d'un certain nombre de pays et d'organisations comme le bureau de recensement des États-Unis et la province de la Colombie-Britannique au Canada. Il préserve la zone au détriment des autres aspects de la carte, comme la forme, l'angle et la distance.

Les propriétés générales

La transformation générale est capturée dans le gif suivant:

(Basé sur le bloc de Mike Bostock)

La projection d'Albers minimise la distorsion autour de deux parallèles standard. Ces parallèles représentent l'endroit où la projection conique coupe la surface de la Terre.

Pour cet exemple, toutes les balances sont utilisées avec des dimensions en svg de 960 pixels de largeur sur 450 pixels de hauteur, l'échelle changera avec ces dimensions

La carte ci-dessous montre un Indicatrix de Tissot pour une projection d'Albers avec des parallèles standard de 10 et 20 degrés nord. Chaque cercle est en réalité de la même taille et de la même forme, mais la projection cartographique les déformera (pas la zone). Notez qu'à environ 10 à 20 degrés nord, les indicateurs sont plus arrondis qu'ailleurs:

Ceci a été créé avec la projection suivante:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,0])
    .rotate([0,0])
    .parallels([10,20])
    .translate([width/2,height/2]);

Si nous utilisons des parallèles à des altitudes plus élevées, le degré de formation d'arcs dans la projection augmente. Les images suivantes utilisent les parallèles de 50 et 60 degrés nord:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,70]) // shifted up so that the projection is more visible
    .rotate([0,0])
    .parallels([40,50])
    .translate([width/2,height/2]);

Si nous avions des parallèles négatifs (méridionaux), la carte devrait être concave vers le bas plutôt que vers le haut. Si un parallèle est nord et un sud, la carte sera concave vers le parallèle plus haut / plus extrême, si elle est à la même distance de l'équateur, la carte ne sera concave dans aucune direction.

Choisir Parallels

Comme les parallèles marquent les zones ayant le moins de distorsion, elles doivent être choisies en fonction de votre domaine d'intérêt. Si votre zone d'intérêt s'étend de 10 degrés nord à 20 degrés nord, alors choisir des parallèles de 13 et 17 minimisera la distorsion sur toute la carte (car la distorsion est minimisée de chaque côté de ces parallèles).

Les parallèles ne devraient pas être les limites nord et sud extrêmes de votre zone d'intérêt. Les parallèles peuvent tous deux avoir la même valeur si vous voulez seulement que la projection coupe une fois la surface de la terre.

Les références et définitions de projection incluent des données parallèles que vous pouvez utiliser pour recréer des projections standardisées.

Centrage et Rotation

Une fois les parallèles sélectionnés, la carte doit être positionnée de manière à aligner correctement la zone d'intérêt. Si vous utilisez simplement projection.center([x,y]) , la carte sera simplement déplacée vers le point sélectionné et aucune autre transformation n'aura lieu. Si la zone cible est la Russie, le panoramique ne serait peut-être pas idéal:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,50]) // Shifted up so the projection is more visible
    .rotate([0,0])
    .parallels([50,60])
    .translate([width/2,height/2]);

Le méridien central d'une projection d'Albers est vertical et nous devons faire pivoter la terre sous la projection pour changer le méridien central. La rotation pour la projection d'Alber est la méthode de centrage d'une projection sur l'axe des x (ou par la longitude). Et comme la Terre tourne sous la projection, nous utilisons le négatif de la longitude que nous voulons centrer. Pour la Russie, cela pourrait être d'environ 100 degrés Est, alors nous tournerons le globe à 100 degrés dans l'autre sens.

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,60])
    .rotate([-100,0])
    .parallels([50,60])

Maintenant, nous pouvons nous déplacer de haut en bas et les caractéristiques le long et près du méridien central seront debout. Si vous .center() sur l'axe des x, votre centrage sera relatif au méridien central défini par la rotation . Pour la Russie, nous pourrions vouloir aller un peu plus au nord et zoomer un peu:

var projection = d3.geoAlbers()
    .scale(500)
    .center([0,65])
    .rotate([-100,0])
    .parallels([50,60])

Pour une fonctionnalité comme la Russie, la voûte de la carte signifie que les extrémités du pays seront étendues autour du poteau, ce qui signifie que le point de centrage ne sera peut-être pas le centroïde de votre équipement. nord ou sud que d'habitude.

Avec les Tissots Indicatrix, on peut voir un aplatissement près du pôle lui-même, mais cette forme est assez vraie dans toute la zone d'intérêt (rappelez-vous que pour la taille de la Russie, la distorsion est plutôt minime:

Paramètres par défaut

Contrairement à la plupart des autres projections, la projection d3.geoAlbers comprend des paramètres par défaut qui ne sont pas .rotate ([0,0]) et .center ([0,0]), la projection par défaut est centrée et pivotée pour les États-Unis. Cela est également vrai pour .parallels() . Donc, si l'un de ces éléments n'est pas défini, les valeurs par défaut seront nulles.

Résumé

Une projection d'Albers est généralement définie avec les paramètres suivants:

var projection = d3.geoAlbers()
    .rotate([-x,0])
    .center([0,y])
    .parallels([a,b]);

Où a et b égalent les deux parallèles.

Projections Equidistantes Azimutales

Les propriétés générales:

Une projection équidistante azimutale est mieux reconnue lorsqu'elle est utilisée dans les zones polaires. Il est utilisé dans l' emblème de l' ONU . Du point central, l'angle et la distance sont préservés. Mais la projection faussera la forme et la surface pour y parvenir, en particulier lorsque l'on s'éloigne du centre. De même, la distance et l'angle ne sont pas vrais dans des endroits autres que le centre. La projection se situe dans la catégorie azimutale (plutôt que cylindrique (Mercator) ou conique (Albers). Cette projection projette la terre comme un disque:

(Basé sur le bloc de Mike Bostock. Centré sur le pôle Nord, Ignorer l'artefact triangulaire au-dessus de l'image une fois plié )

L'échelle dépend de la taille de votre svg, pour cet exemple, toutes les échelles utilisées se situent dans un svg de 960 pixels de large sur 450 pixels de haut (et l'écran est découpé pour un carré si nécessaire) - sauf indication contraire.

La carte ci-dessous montre un Indicatrix de Tissot pour une projection équidistante azimutale:

Ceci a été créé avec la projection suivante:

var projection = d3.geoAzimuthalEquidistant()
   .scale(70)
   .center([0,0])
   .rotate([0,0])
   .translate([width/2,height/2]);

Centrage et Rotation:

Le centrage consiste simplement à effectuer un panoramique sur une carte, mais pas à modifier sa composition globale. Centrer un azimutal équidistant sur le pôle Nord tout en laissant les autres paramètres inchangés ou à zéro déplacera le pôle nord au centre de l'écran - mais ne changera pas la carte ci-dessus.

Pour centrer correctement une zone, vous devez la faire pivoter. Comme pour toute rotation de d3, il est préférable de penser que la terre se déplace sous la projection, donc la rotation de la terre de -90 degrés sous la carte sur l'axe des y placera le pôle nord au centre:

var projection = d3.geoAzimuthalEquidistant()
   .scale(70)
   .center([0,0])
   .rotate([0,-90])
   .translate([width/2,height/2]);

De même, la rotation sur l'axe des x se comporte de la même manière. Par exemple, pour faire pivoter la carte de manière à ce que l'Arctique canadien soit en position verticale, tout en centrant sur le pôle nord, nous pouvons utiliser une projection comme celle-ci:

var projection = d3.geoAzimuthalEquidistant()
    .scale(400)
    .center([0,0])
    .rotate([100,-90])
    .translate([width/2,height/2]);

Cette carte utilisait un svg 600x600

Dans l'ensemble, cette simplicité rend l'équation azimutale plus facile à définir, il suffit d'utiliser la rotation. Une projection typique ressemblera à:

var projection = d3.geoProjection()
   .center([0,0])
   .rotate([-x,-y])
   .scale(k)
   .translate([width/2,height/2]);