Related Articles

Related Articles

D3.js geoEckert2() Function
  • Last Updated : 23 Sep, 2020

D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards.

The geoEckert2() function in d3.js is used to draw the Eckert II projection which is an equal-area pseudocylindrical map projection. In the equatorial aspect, the network of longitude and latitude lines consists solely of straight lines, and the outer boundary has the distinctive shape of an elongated hexagon.

Syntax: 

d3.geoEckert2()

Parameters: This method does not accept any parameters.

Return Value: This method creates an Eckert2 projection from given JSON data.



Example 1: The following example makes Eckert2 projection of the world with the center at (0,0) and no rotation.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
  
<head
    <meta charset="UTF-8" /> 
    <meta name="viewport"
        content="width=device-width, 
                initial-scale=1.0"/>
    <script src=
        "https://d3js.org/d3.v4.js">
    </script>
  
    <script src=
    </script
</head
  
<body
    <div style="width:700px; height:600px;"
        <center
            <h3 style="color:grey"
                Eckart II Projection of World
            </h3>  
        </center>
  
        <svg width="700" height="550"
        </svg
    </div
      
    <script>
        var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");
  
        // Eckart2  projection
        var gfg = d3.geoEckert2()
            .scale(width / 1.5 / Math.PI)
            .rotate([0,0])
            .center([0,0])
            .translate([width / 2, height / 2])
  
        // Loading the json data
        d3.json("https://raw.githubusercontent.com/"
        + "janasayantan/datageojson/master/world.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>

chevron_right


Output:

Example 2: The following example makes Eckert II projection of the world with the center at (0,0) and rotating 45 degrees with respect to X-axis.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
  
<head
    <meta charset="UTF-8" /> 
    <meta name="viewport"
        content="width=device-width, 
                initial-scale=1.0"/>
    <script src=
        "https://d3js.org/d3.v4.js">
    </script>
    <script src=
    </script
</head
  
<body
    <div style="width:700px; height:600px;"
        <center
            <h3 style="color:grey"
                Eckart II Projection of World
            </h3>  
        </center>
          
        <svg width="700" height="550"
        </svg
    </div
      
    <script>
        var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");
  
        // Eckart2  projection
        // Center(0,0) and rotating 45 degree
        var gfg = d3.geoEckert2()
            .scale(width / 1.5 / Math.PI)
            .rotate([45,0])
            .center([0,0])
            .translate([width / 2, height / 2])
  
        // Loading the json data
        d3.json("https://raw.githubusercontent.com/"
        + "janasayantan/datageojson/master/world.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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :