Noveno ejemplo del taller Mapas web interactivos con D3.js en el programa de las 9as Jornadas SIG Libre .
Dibuja el mismo mapa simple usado en el primer ejemplo, pero usando Canvas en lugar de SVG.
Noveno ejemplo del taller Mapas web interactivos con D3.js en el programa de las 9as Jornadas SIG Libre .
Dibuja el mismo mapa simple usado en el primer ejemplo, pero usando Canvas en lugar de SVG.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<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.orthographic() | |
.scale(250) | |
.translate([width / 2, height / 2]) | |
.clipAngle(90); | |
var canvas = d3.select("body").append("canvas") | |
.attr("width", width) | |
.attr("height", height); | |
var context = canvas.node().getContext("2d"); | |
var path = d3.geo.path() | |
.projection(projection) | |
.context(context); | |
d3.json("https://cdn.rawgit.com/mbostock/4090846/raw/8a7f176072d508218e120773943b595c998991be/world-50m.json", function(error, data) { | |
var land = topojson.object(data, data.objects.land); | |
context.strokeStyle = '#aaa'; | |
context.fillStyle = '#ccc'; | |
context.beginPath(); | |
path(land); | |
context.fill(); | |
context.beginPath(); | |
path(land); | |
context.stroke(); | |
}); | |
</script> | |