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.
<!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
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.
<!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
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: