D3 Examples - Comparación entre proyección mercator y mercator transversa para la Argentina

xxxxxxxxxx
 
<!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/2,
    height = 500;
​
var svg,
    projection,
    path,
    graticule;
​
d3.json("argentina_indec.json", function(error, json) {
​
  // Transverse Mercator
​
  svg = d3.select("body")
          .append("svg")
            .attr("width", width)
            .attr("height", height);
​
  projection = d3.geo.transverseMercator()
                     .center([2.5, -38.5])
                     .rotate([66, 0])
                     .scale((height * 56.5) / 33)
                     .translate([(width / 2), (height / 2)]);
​
  path = d3.geo.path()
               .projection(projection);
​
  graticule = d3.geo.graticule()
                    .extent([[-180,-90], [0,0]])
                    .step([3, 3]);
​
  svg.append("path")
     .datum(graticule)
       .attr("class", "graticule")
       .attr("d", path);
​
  svg.selectAll("text")
     .data(topojson.feature(json, json.objects.provincias).features)
     .enter()
        .append("path")
        .attr("d", path)
        .attr("class", "land");
​
  svg.append("text")
     .text("Transverse Mercator")
     .attr("x", 10)
     .attr("y", 25)
     .attr("fill", "blue")
     .attr("style","font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-style: normal");
​
  // Mercator
​
  svg = d3.select("body")
          .append("svg")
            .attr("width", width)
            .attr("height", height);
​
  projection = d3.geo.mercator()
                    // debe ajustarse 2° (-40.5 en lugar de -38.5) ya que el centro geografico
                    // esta desfasado por la deformacion del territorio cercano a los polos.
                     .center([2.5, -40.5])
                     .rotate([66, 0])
                    // tambien debe ajustarse la escala ya que la proyeccion mercator es mas larga
                     .scale((height * 43) / 33)
                     .translate([(width / 2), (height / 2)]);
​
  path = d3.geo.path()
               .projection(projection);
​
  graticule = d3.geo.graticule()
                    .extent([[-180,-90], [0,0]])
                    .step([3, 3]);
​
  svg.append("path")
     .datum(graticule)
       .attr("class", "graticule")
       .attr("d", path);
​
  svg.selectAll("text")
     .data(topojson.feature(json, json.objects.provincias).features)
     .enter()
        .append("path")
        .attr("d", path)
        .attr("class", "land");
​
  svg.append("text")
     .text("Mercator")
     .attr("x", 10)
     .attr("y", 25)
     .attr("fill", "blue")
     .attr("style","font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-style: normal");
​
​
});
​
d3.select(self.frameElement).style("height", height + "px");
​
</script>
</body>
</html>
​
    