Proyección Gauss Kruger Argentina en D3.js

Para la Argentina la proyección oficial es la Gauss-Kruger, y esta difiere bastante de la proyección Mercator que es normalmente utilizada en mapas digitales. Si queremos desplegar el territorio argentino de manera de lograr una representación armoniosa que conserve las formas y áreas, lo recomendable es usa Gauss-Kruger.

Transverse Mercator vs Mercator

En D3.js no esta soportada esta proyeccion pero se puede optar por la proyección Mercator transversa d3.geo.transverseMercator() que es la base para la definición de la referencia cartográfica Gauss-Kruger. Esta proyección está definida dentro del plugin d3.geo.projection.js por lo que deberá ser cargado junto con d3.js.

Para poder calcular los parámetros necesarios para aplicar esta proyección es necesario calcular el centro geográfico de la Argentina continental, que está comprendida entre los paralelos de 22° y 55° de latitud sur y los meridianos de 53° y 74° de longitud oeste.

Para esto utilizaremos la siguiente formula:

lat = ((-55°) - (-22°)) / 2 + (-22°) = -38.5°

long = -(((-74) - (-53)) /2 + (-53)) = 63.5

La Argentina esta dividida en 7 fajas de 3° de ancho. La faja 3 que corresponde al meridiano de 66° es la utilizada en el caso de querer representar todo el territorio Argentino.

Fajas Gauss Kruger Argentina

Para poder centrar el mapa es necesario moverlo 2.5° que es la diferencia entre el meridiano 66° y la longitud del centro geografico.

Dados estos valores podremos definir la ubicación del centro geográfico en la proyección con .center([2.5, -38.5]) y .rotate([66, 0]).

Para la escala he ajustado empíricamente la siguiente formula:

56.5 * map.height / ((-55) - (-22))

la cual se aplica en D3.js con el siguiente comando .scale((56.5 * map.height) / 33).

Universal Transverse Mercator

<!DOCTYPE html>
<meta charset="utf-8">
<style>
 
.graticule {
  fill: none;
  stroke: black;
  stroke-opacity: .5;
  stroke-width: .5px;
}

.land {
  fill: gray;
  stroke: white;
  stroke-width: .5px;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
    height = 500;

var projection = d3.geo.transverseMercator()
                       .center([2.5, -38.5])
                       .rotate([66, 0])
                       .scale((height * 56.5) / 33)
                       .translate([(width / 2), (height / 2)]);

var svg = d3.select("body")
            .append("svg")
              .attr("width", width)
              .attr("height", height);

var path = d3.geo.path()
                 .projection(projection);

var graticule = d3.geo.graticule()
                      .extent([[-180,-90], [0,0]])
                      .step([6, 6]);

svg.append("path")
   .datum(graticule)
     .attr("class", "graticule")
     .attr("d", path);

d3.json("argentina_indec.json", function(error, json) {

svg.selectAll("text")
     .data(topojson.feature(json, json.objects.provincias).features)
     .enter()
        .append("path")
        .attr("d", path)
        .attr("class", "land");

});

d3.select(self.frameElement).style("height", height + "px");

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/d3.geo.projection.v0.min.js

https://d3js.org/topojson.v1.min.js