jkutianski/README.md

## README.md

      
    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.

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:


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.

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:

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


## argentina_indec.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              argentina_indec.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## 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>

## lat.png

      
    Raw
  

              lat.png
            
          
## long.png

      
    Raw
  

              long.png
            
          
## scale.png

      
    Raw
  

              scale.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## tmercvsmerc.png

      
    Raw
  

              tmercvsmerc.png
            
          
## zones.png

      
    Raw
  

              zones.png
	<!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>