D3.js geoAlbers() Function - GeeksforGeeks

14 Sep, 2020
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 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>
Output :
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?