Undécimo ejemplo del taller Mapas web interactivos con D3.js en el programa de las 9as Jornadas SIG Libre .
Dibuja un mapa de burbujas a partir de los datos de los conflictos bélicos actuales. Datos de la Wikipedia.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.country {
fill: #ccc;
stroke: #777;
}
.conflicto {
fill-opacity: .5;
stroke: #f00;
fill: #f00;
stroke-width: .5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var conflictos = [{'nombre': 'Guerra de Afganistán', 'victimas': 56000, 'longitud': 69.094806,'latitud': 34.516575},
{'nombre': 'Boko Haram', 'victimas': 22000, 'longitud': 12.317462,'latitud': 9.005609},
{'nombre': 'Guerra de Siria', 'victimas': 200000, 'longitud': 33.533214,'latitud': 36.311602},
{'nombre': 'Guerra de Irak', 'victimas': 35800, 'longitud': 44.463458,'latitud': 33.294783},
{'nombre': 'Guerra de Sudán del Sur', 'victimas': 50000, 'longitud': 31.609454,'latitud': 4.796585}];
var radius = d3.scale.sqrt()
.domain([0, 200000])
.range([0, 15]);
var width = 960,
height = 500;
var projection = d3.geo.orthographic()
.scale(250)
.translate([width / 2, height / 2])
.clipAngle(90)
.rotate([-30,0]);
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", "country")
.datum(topojson.object(data, data.objects.countries))
.attr("d", path);
svg.selectAll(".conflicto")
.data(conflictos)
.enter()
.append("circle")
.attr("class","conflicto")
.attr("r", function(d){return radius(d.victimas);})
.attr("cx", function(d){ return projection([d.longitud, d.latitud])[0];})
.attr("cy", function(d){ return projection([d.longitud, d.latitud])[1];});
});
</script>