Skip to content
Related Articles

Related Articles

Improve Article

D3.js geoHyperelliptical() Function

  • Last Updated : 23 Sep, 2020

The JavaScript library D3.js gives dynamic, interactive data visualizations for web pages using HTML5, Scalable Vector Graphics, and Cascading Style Sheets.
The geoHyperelliptical() function in d3.js library is used to draw the pseudocylindrical, equal-area Goode homolosine projection.

Syntax:

d3.geoHyperelliptical( k, alpha ,gamma)

Parameters: This method accept three parameters as mentioned above and described below.

  • k: The exponent of the superellipse (or Lamé curve) that defines the shape of the meridians. The default value is 2.5 .
  • alpha: It governs the weight of the cylindrical projection that is averaged with the superellipse. The default Value is 0.
  • gamma: The aspect ratio. The default Value is 1.183136.

Return Value: This method creates Hyperelliptical projection from the given JSON data.

Example 1: The following example draws Hyperelliptical projection of world with center at (0,0) and 0 rotation.



HTML




<!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;">
        <svg width="700" height="400">
        </svg>
    </div>
  
    <script>
        var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");
  
        // Hyperelliptical projection
        // Center(0,0) and no rotation 
        var gfg = d3.geoHyperelliptical()
            .scale(width / 2.0 / Math.PI)
            .rotate([0, 0])
            .center([0, 0])
            .translate([width / 2, height / 2])
  
        // Loading the json data
        // Used json file stored at 
        // datageojson/master/world.json
        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", "seagreen")
                    .attr("d", d3.geoPath()
                        .projection(gfg)
                    )
                    .style("stroke", "#ffff")
            })
    </script>
</body>
  
</html>

Output:

Example 2: The following example draws Hyperelliptical projection of world after altering the center and rotation.

HTML




<!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;">
        <svg width="700" height="400"></svg>
    </div>
  
    <script>
  
        var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");
  
        // Hyperelliptical projection
        // Center(-10,-10) and 30 degree 
        // rotation with respect to Y axis
        var gfg = d3.geoHyperelliptical(
            k = 3.0, alpha = 2, gamma = 2)
            .scale(width / 2.0 / Math.PI)
            .rotate([30, 0])
            .center([-10, -10])
            .translate([width / 2, height / 2])
  
        // Loading the json data
        // Used json file stored at 
        // /janasayantan/datageojson/master/world.json
  
        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", "seagreen")
                    .attr("d", d3.geoPath()
                        .projection(gfg)
                    )
                    .style("stroke", "#ffff")
            })
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :