D3.js geoHomolosine() Function
Last Updated :
23 Sep, 2020
The JavaScript D3.js library gives dynamic and interactive data visualizations for web pages using HTML5, Scalable Vector Graphics, and Cascading Style Sheets.
The geoHomolosine() function in d3.js is used to draw the pseudocylindrical, equal-area Goode homolosine projection.
Syntax:
d3.geoHomolosine()
Parameters: This method does not accept any parameters.
Return Value: This method creates Homolosine projection from the given JSON data.
Example 1: The following example draws Homolosine 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");
// Homolosine projection
// Center(0, 0) and no rotation
var gfg = d3.geoHomolosine()
.scale(width / 1.8 / 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", "Black")
.attr("d", d3.geoPath()
.projection(gfg)
)
.style("stroke", "#ffff")
})
</ script >
</ body >
</ html >
|
Output: The following shows the Homolosine projection of World with no rotation and centered at (0, 0)
Example 2: The following example draws Homolosine 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");
// Homolosine projection
// Center(-10, -10) and 30 degree
// rotation w.r.t Y axis
var gfg = d3.geoHomolosine()
.scale(width / 1.8 / Math.PI)
.rotate([30, 0])
.center([-10, -10])
.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", "grey")
.attr("d", d3.geoPath()
.projection(gfg)
)
.style("stroke", "#ffff")
})
</ script >
</ body >
</ html >
|
Output: The following output shows Homolosine projection with 30 degree rotation with respect to Y axis and centered at (-10, -10)
Share your thoughts in the comments
Please Login to comment...