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 geoEckert4() en d3.js se usa para dibujar la proyección Eckert IV, que es una proyección de mapa pseudocilíndrica de áreas iguales. La longitud de las líneas polares es la mitad de la del ecuador, y las líneas de longitud son semi elipses o porciones de elipses.
Sintaxis:
d3.geoEckert4()
Parámetros: este método no acepta ningún parámetro.
Valor de retorno: este método crea una proyección Eckert4 a partir de datos JSON dados.
Ejemplo 1: El siguiente ejemplo hace una proyección Eckert4 del mundo con el 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;">
<svg width="700" height="550">
</svg>
</div>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// geoEckert Iv projection
// Center(0,0) and no rotation
var gfg = d3.geoEckert4()
.scale(width / 1.5 / Math.PI)
.rotate([0,0])
.center([0,0])
.translate([width / 2, height / 2])
// Loading the json data
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", "GREY")
.attr("d", d3.geoPath()
.projection(gfg)
).style("stroke", "#ffff")
})
</script>
</body>
</html>
Salida :
Proyección Eckert IV con centro (0,0) y rotación 0
Ejemplo 2: El siguiente ejemplo hace una proyección Eckert4 del mundo con el centro en (0,0) y una rotación de 20 grados en el sentido de las agujas del reloj.
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 IV 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 IV projection
// Center(0,0) and rotating 20
// degree clockwise
var gfg = d3.geoEckert4()
.scale(width / 1.5 / Math.PI)
.rotate([20,0])
.center([0,0])
.translate([width / 2, height / 2])
// Loading the json data
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", "GREY")
.attr("d", d3.geoPath()
.projection(gfg)
).style("stroke", "#ffff")
})
</script>
</body>
</html>
Producción:
Proyección Eckert IV con rotació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