D3.js geoAlbers() Function

Last Updated : 28 Jun, 2022

The geoAlbers() function in d3.js is used to draw the Albers equal-area conic projection. Albers projection which is named after Heinrich C. Albers is a conic, equal-area map projection that uses two standard parallels. The scale and shape are not preserved and the distortion is minimal between the standard parallels. It draws a geoAlbers projection from geojson data.

Syntax:

 d3.geoAlbers()

Parameters: This method does not accept any parameters.

Return Values This method returns the visual Albers equal-area conic projection.

Example 1: The following example makes projection of Asia Continent.

HTML

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport"
        content="width=device-width, 
                initial-scale=1.0"/>     
</head> 
 
<body> 
    <div style="width:700px; height:700px;"> 
        <center>      
   
            <h4 style="color:green" font ='bold'> 
            geoAlbers Projection of Asia
            </h4>   
        </center>
         
        <svg width="700" height="500"> 
        </svg> 
    </div> 
    <script src="https://d3js.org/d3.v4.js">
    </script>
    <script src="
    https://d3js.org/d3-geo-projection.v2.min.js">
   </script>
    <script>
 
    var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
 
   // geoAlbers projection
   var gfg = d3.geoAlbers()
    .scale(width / 1.5 / Math.PI)
    .translate([width / 2, height / 2])
 
   // Loading the json data
   d3.json("https://raw.githubusercontent.com/
   janasayantan/datageojson/master/geoasia.json", 
    function(data){
 
    // Draw the map
    svg.append("g")
         .selectAll("path")
         .data(data.features)
         .enter().append("path")
         .attr("fill", "black")
         .attr("d", d3.geoPath()
          .projection(gfg)
          )
      .style("stroke", "#ffff")
})
 
</script>
</body> 
 
</html>

Output :

Example 2: The following example shows the projection of World.

HTML

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport"
        content="width=device-width, 
                initial-scale=1.0"/> 
</head> 
   
<body> 
    <div style="width:700px; height:700px;"> 
        <center>      
   
            <h3 style="color:green" font ='bold'> 
            geoAlbers Projection of World
            </h3>
   
        </center>        
        <svg width="700" height="500"> 
        </svg> 
    </div> 
    <script src="https://d3js.org/d3.v4.js">
    </script>
    <script src="https://d3js.org/
    d3-geo-projection.v2.min.js">
    </script>
    <script>
 
    var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
 
    // geoAlbers projection
    var gfg = d3.geoAlbers()
    .scale(width / 1.5 / Math.PI)
    .translate([width / 2, height / 2])
 
    // Loading the json data
    d3.json("https://raw.githubusercontent.com/
    janasayantan/datageojson/master/geoworld%20.json",
    function(data)
   {
    // Draw the map
    svg.append("g")
        .selectAll("path")
        .data(data.features)
        .enter().append("path")
            .attr("fill", "grey")
            .attr("d", d3.geoPath()
            .projection(gfg)
            )
        .style("stroke", "#ffff")
   })
 
</script>
</body>
</html>