Carte

[idris-maps]

Tu te répètes un peu avec les pathCreator. Tu n'as besoin de qu'une seule projection.

https://github.com/Soraya97/VisualDon/blob/7de001e762621af4f3c832d1dc2a85976d095b35/20200403/src/carte.js#L5

https://github.com/Soraya97/VisualDon/blob/7de001e762621af4f3c832d1dc2a85976d095b35/20200403/src/carte.js#L24

https://github.com/Soraya97/VisualDon/blob/7de001e762621af4f3c832d1dc2a85976d095b35/20200403/src/carte.js#L49

Ceci te suffit:

const projectX = x => (x - xMin) / (xMax - xMin) * WIDTH
const projectY = y => HEIGHT - (y - yMin) / (yMax - yMin) * HEIGHT

const projectionPoint = d3.geoTransform({
  point: function(x, y) {
    this.stream.point(projectX(x), projectY(y)) // utiliser les fonctions
  }
})

const pathCreator = d3.geoPath().projection(projectionPoint)

Tu peux utiliser projectX et projectY pour les points et pathCreator pour les polygones.

[Soraya97]

Tu te répètes un peu avec les pathCreator. Tu n'as besoin de qu'une seule projection.

https://github.com/Soraya97/VisualDon/blob/7de001e762621af4f3c832d1dc2a85976d095b35/20200403/src/carte.js#L5

https://github.com/Soraya97/VisualDon/blob/7de001e762621af4f3c832d1dc2a85976d095b35/20200403/src/carte.js#L24

https://github.com/Soraya97/VisualDon/blob/7de001e762621af4f3c832d1dc2a85976d095b35/20200403/src/carte.js#L49

Ceci te suffit:

const projectX = x => (x - xMin) / (xMax - xMin) * WIDTH
const projectY = y => HEIGHT - (y - yMin) / (yMax - yMin) * HEIGHT

const projectionPoint = d3.geoTransform({
  point: function(x, y) {
    this.stream.point(projectX(x), projectY(y)) // utiliser les fonctions
  }
})

const pathCreator = d3.geoPath().projection(projectionPoint)

Tu peux utiliser projectX et projectY pour les points et pathCreator pour les polygones.

Bonjour,

Je ne suis pas sûre de comprendre. J'ai une projection pour la carte et une projection pour le point (au-dessus du Lac Léman). Vous dites que la projection du point suffit pour tout afficher ?

[idris-maps]

Une projection est une fonction qui prends des coordonnées cartographiques et les convertis dans le système de coordonnées du <svg> à l'écran.

Tu as par exemple:

const mont = [2533555,1149818]

const montX = projectX(mont[0])
const montY = projectY(mont[1])

et plus bas tu as

svg.append('circle')
  .attr('cx', montX)
  .attr('cy', montY)

Tu dis en gros: Converti la valeur x de mont (2533555) en valeur cx pour placer le point.

Si tu as un moyen de projeter un point, tu peux aussi projeter plusieurs points (pour un polygone par exemple). Pour que d3 comprenne comment tu veux faire la projection, il faut lui expliquer. C'est ce que tu fais en définissant ta projection comme ça:

const projection = d3.geoTransform({
  point: function(x, y) {
    this.stream.point(projectX(x), projectY(y))
  }
})

Une fois que tu as une projection, tu peux projeter tout ce qui est définit dans le même système de coordonnées géographiques. Les données suisse.json et mont utilisent le même système de coordonnés géographiques. C'est un système suisse qui s'appelle LV95.