Función D3.js geoAzimuthalEqualArea()

La función geoAzimuthalEqualArea() en d3.js se usa para dibujar la proyección de áreas iguales azimutales de Lambert a partir de los datos geojson proporcionados. Es una proyección que trata de mantener las características del terreno en sus tamaños relativos correctos mientras mantiene el sentido correcto de dirección desde el centro. El mundo aquí se proyecta sobre una superficie plana desde cualquier punto del globo.

Sintaxis:

d3.geoAzimuthalEqualArea()

Parámetros: este método no acepta ningún parámetro.

Valor devuelto: este método devuelve la proyección de áreas iguales acimutales.

Ejemplo 1: El siguiente ejemplo dibuja la proyección azimutal de áreas equivalentes de Lambert de América del Norte y América del Sur.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <script src="https://d3js.org/d3.v4.js">
    </script>
    <script src=
"https://d3js.org/d3-geo-projection.v2.min.js">
    </script>
</head>
  
<body>
    <div style="width:300px; 
              height:700px;">
        <center>
            <h4 style="color:green">
                AzimuthalEqualArea Projection
                of America
            </h4>
        </center>
        <svg width="400" height="300">
        </svg>
    </div>
    <script>
        var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");
  
        // AzimuthalEqualArea projection
        var gfg = d3.geoAzimuthalEqualArea()
            .scale(width / 1.5 / Math.PI)
            .translate([width / 2, height / 2]);
  
        // Loading the json data 
        d3.json("https://raw.githubusercontent.com/" +
            "janasayantan/datageojson/master/" +
            "america.json",
            function (data) {
  
                // Draw the map
                svg.append("g")
                    .selectAll("path")
                    .data(data.features)
                    .enter().append("path")
                    .attr("fill", "green")
                    .attr("d", d3.geoPath()
                        .projection(gfg)
                    )
                    .style("stroke", "#ffff")
            });
    </script>
</body>
  
</html>

Producción:

Ejemplo 2: El siguiente ejemplo dibuja la proyección azimutal de áreas equivalentes de Lambert de África.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <script src="https://d3js.org/d3.v4.js">
    </script>
    <script src=
"https://d3js.org/d3-geo-projection.v2.min.js">
    </script>
</head>
  
<body>
    <div style="width:600px;
              height:300px;">
        <center>
            <h4 style="color:green">
                AzimuthalEqualArea Projection
                of Africa
            </h4>
        </center>
        <svg width="600" height="300">
        </svg>
    </div>
    <script>
        var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");
  
        // AzimuthalEqualArea
        var gfg = d3.geoAzimuthalEqualArea()
            .scale(width / 1.5 / Math.PI)
            .translate([width / 2, height / 2]);
  
        // Loading the json data 
        d3.json("https://raw.githubusercontent.com/" +
            "janasayantan/datageojson/master/" +
            "geoAfrica.json",
            function (data) {
  
                // Draw the map
                svg.append("g")
                    .selectAll("path")
                    .data(data.features)
                    .enter().append("path")
                    .attr("fill", "olive")
                    .attr("d", d3.geoPath()
                        .projection(gfg)
                    )
                    .style("stroke", "#ffff")
            });
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por jana_sayantan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *