Skip to content

Instantly share code, notes, and snippets.

@jkutianski

jkutianski/README.md

Last active August 15, 2019 21:38
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jkutianski/6532516 to your computer and use it in GitHub Desktop.
Save jkutianski/6532516 to your computer and use it in GitHub Desktop.
Download ZIP
Proyección Gauss Kruger Argentina en D3.js
Raw
README.md

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

Display the source blob
Display the rendered blob
Raw
argentina_indec.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!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="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment