D3.js es una biblioteca de JavaScript para producir visualizaciones de datos dinámicas e interactivas en navegadores web. Hace uso de los estándares Scalable Vector Graphics, HTML5 y Cascading Style Sheets. La función geoEckert3() en d3.js se usa para dibujar la proyección Eckert III, que es una proyección pseudocilíndrica que no es ni conforme ni de área igual. Esta proyección fue presentada por Max Eckert en 1906 y se utiliza principalmente para mapas del mundo.
Sintaxis:
d3.geoEckert3()
Parámetros: este método no acepta ningún parámetro.
Devoluciones: este método crea una proyección Eckert3 a partir de datos JSON dados.
Ejemplo 1: El siguiente ejemplo hace una proyección Eckert3 del mundo con centro en (0, 0) y sin rotación.
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=
"https://d3js.org/d3-geo-projection.v2.min.js">
</script>
</head>
<body>
<div style="width:700px; height:600px;">
<center>
<h3 style="color:black">
Eckert III 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");
// geoEckert III projection
// Center(0, 0) and no rotation
var gfg = d3.geoEckert3()
.scale(width / 1.5 / Math.PI)
.rotate([-10, 0])
.center([0, -10])
.translate([width / 2, height / 2])
// Loading the json data
// Used json file stored at
// https://raw.githubusercontent.com/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", "black")
.attr("d", d3.geoPath()
.projection(gfg)
)
.style("stroke", "#ffff")
})
</script>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, haremos una proyección Eckert3 del mundo con centro en (20, 20) y girando 30 grados en sentido antihorario con respecto al eje y.
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=
"https://d3js.org/d3-geo-projection.v2.min.js">
</script>
</head>
<body>
<div style="width:700px; height:600px;">
<center>
<h3 style="color:black">
Eckert III Projection of World
</h3>
</center>
<svg width="700" height="400">
</svg>
</div>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// geoEckert III projection
// Center(20, 20) and rotating 30
// degree anti-clockwise
var gfg = d3.geoEckert3()
.scale(width / 1.5 / Math.PI)
.rotate([-30, 0])
.center([20, 20])
.translate([width / 2, height / 2])
// Loading the json data
// Used json file stored at
// https://raw.githubusercontent.com/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", "black")
.attr("d", d3.geoPath()
.projection(gfg)
)
.style("stroke", "#ffff")
})
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por jana_sayantan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA