Séptimo ejemplo del taller Mapas web interactivos con D3.js en el programa de las 9as Jornadas SIG Libre .
Primer ejemplo de cartografía usando D3js. Las partes comentadas son para ver los efectos de cambiar las proyecciones en el mapa final.
Séptimo ejemplo del taller Mapas web interactivos con D3.js en el programa de las 9as Jornadas SIG Libre .
Primer ejemplo de cartografía usando D3js. Las partes comentadas son para ver los efectos de cambiar las proyecciones en el mapa final.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.land { | |
fill: #ccc; | |
stroke: #fff; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/topojson.v0.min.js"></script> | |
<script> | |
var width = 960, | |
height = 500; | |
var projection = d3.geo.mercator(); | |
/* | |
var projection = d3.geo.orthographic() | |
.scale(250) | |
.translate([width / 2, height / 2]) | |
.clipAngle(90); | |
*/ | |
/* | |
var projection = d3.geo.azimuthalEquidistant() | |
.center([2.8, 41.9]);*/ | |
var path = d3.geo.path() | |
.projection(projection); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
d3.json("https://cdn.rawgit.com/mbostock/4090846/raw/8a7f176072d508218e120773943b595c998991be/world-50m.json", function(error, data) { | |
svg.append("path") | |
.attr("class", "land") | |
.datum(topojson.object(data, data.objects.land)) | |
.attr("d", path); | |
}); | |
</script> | |