rveciana/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## index.html
<!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>


## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>