La biblioteca de JavaScript D3.js ofrece visualizaciones de datos interactivas para páginas web utilizando HTML5, gráficos vectoriales escalables y hojas de estilo en cascada. La función geoCollignon() en d3.js se usa para dibujar la proyección pseudocilíndrica de áreas iguales de collignon. Esta proyección se utiliza en las áreas polares de la proyección HEALPix .
Sintaxis:
d3.geoCollignon()
Parámetros: este método no acepta ningún parámetro.
Devoluciones: este método crea una proyección de Collignon a partir de datos JSON dados.
Ejemplo 1: El siguiente ejemplo hace una proyección de Collignon 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;">
<svg width="700" height="550">
</svg>
</div>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Collignon projection
// Center(0, 0) and no rotation
var gfg = d3.geoCollignon()
.scale(width / 1.5 / Math.PI)
.rotate([0, 0])
.center([0, 0])
.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", "BurlyWood")
.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