jkutianski/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Con el fin de reducir las deformaciones en el sentido Este-Oeste a valores insensibles a los usos cartográficos de precisión, Krüger redujo el ancho de las fajas a 3° de longitud (1° 30’ a la izquierda y 1° 30’ a la derecha del meridiano central de cada faja)y para esos meridianos centrales eligió aquellos cuyos números de grados son múltiples de 3° de longitud.
En el caso de la República Argentina, los meridianos centrales tienen los siguientes valores: -72°, -69°, -66°, -63°, -60°,-57° y -54°.

  
## 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: blue;
  stroke-opacity: .5;
  stroke-width: .5px;
}

.zone {
  fill: none;
  stroke: red;
  stroke-opacity: .5;
  stroke-width: 1px;
  stroke-dasharray: 3, 3;
}

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

.labels {
  fill: black;
  stroke: blue;
  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 map = svg.append("g")
             .attr("id", "map"),
    meridians = svg.append("g")
                   .attr("id", "meridians"),
    zones = svg.append("g")
               .attr("id", "zones"),
    labels = svg.append("g")
                .attr("id", "labels");

var graticule = d3.geo.graticule()
                      .extent([[-72.5,-55], [-53.5,-24]])
                      .step([3, 0]);

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

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

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

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

  labels.selectAll("text")
    .data([-72, -69, -66, -63, -60, -57, -54])
    .enter()
      .append("text")
        .attr("class", "labels")
        .text(function (d) {
          return d + "°";
        })
        .attr("x", function (d,i) {
          return width/2 - (36 * 3.5) + 42 * i;
        })
        .attr("y", "25");

  zones.append("path")
       .datum(graticule.extent([[-72.5,-55], [-50.5,-22]]))
          .attr("class", "zone")
          .attr("d", path.projection(projection.rotate([64.5, 0])));

});

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

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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.graticule {
	fill: none;
	stroke: blue;
	stroke-opacity: .5;
	stroke-width: .5px;
	}

	.zone {
	fill: none;
	stroke: red;
	stroke-opacity: .5;
	stroke-width: 1px;
	stroke-dasharray: 3, 3;
	}

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

	.labels {
	fill: black;
	stroke: blue;
	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 map = svg.append("g")
	.attr("id", "map"),
	meridians = svg.append("g")
	.attr("id", "meridians"),
	zones = svg.append("g")
	.attr("id", "zones"),
	labels = svg.append("g")
	.attr("id", "labels");

	var graticule = d3.geo.graticule()
	.extent([[-72.5,-55], [-53.5,-24]])
	.step([3, 0]);

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

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

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

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

	labels.selectAll("text")
	.data([-72, -69, -66, -63, -60, -57, -54])
	.enter()
	.append("text")
	.attr("class", "labels")
	.text(function (d) {
	return d + "°";
	})
	.attr("x", function (d,i) {
	return width/2 - (36 * 3.5) + 42 * i;
	})
	.attr("y", "25");

	zones.append("path")
	.datum(graticule.extent([[-72.5,-55], [-50.5,-22]]))
	.attr("class", "zone")
	.attr("d", path.projection(projection.rotate([64.5, 0])));

	});

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

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