D3.js geoHyperelliptical() Function
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 =
</ 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
+ "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 =
</ 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
+ "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:
Last Updated :
23 Sep, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...