mirror of
https://github.com/medialab-prado/poblados-colonizacion-colonias-penitenciarias.git
synced 2024-12-26 04:21:23 +01:00
114 lines
3.1 KiB
HTML
114 lines
3.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title></title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- nuestro mapa se dibujará en este contenedor -->
|
||
|
|
<div class="map"></div>
|
||
|
|
|
||
|
|
<!-- cargamos las dos librerías que necesitamos-->
|
||
|
|
<script src="https://d3js.org/d3.v4.min.js"></script>
|
||
|
|
<script src="https://d3js.org/topojson.v1.min.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
// añadimos un elemento canvas a nuestro contenedor
|
||
|
|
var canvas = d3.select(".map").append("canvas");
|
||
|
|
|
||
|
|
// parametros necesarios poder referenciar al conenedor
|
||
|
|
context = canvas.node().getContext("2d"),
|
||
|
|
|
||
|
|
// función de d3 para poder crear mapas
|
||
|
|
path = d3.geoPath().projection(null).context(context);
|
||
|
|
|
||
|
|
// variables sobre el tamaño de nuestro mapa
|
||
|
|
var width = 960,
|
||
|
|
height = 500;
|
||
|
|
|
||
|
|
// las añadimos al canvas
|
||
|
|
canvas
|
||
|
|
.attr("width", width)
|
||
|
|
.attr("height", height)
|
||
|
|
.style("width", width + "px")
|
||
|
|
.style("height", height + "px");
|
||
|
|
|
||
|
|
context.lineJoin = 'round';
|
||
|
|
context.lineCap = 'round';
|
||
|
|
|
||
|
|
|
||
|
|
// con este método cargamos el json (!)
|
||
|
|
// d3 tiene métodos específicos como d3.csv, de.json, d3.tsv
|
||
|
|
// Con d3.queue podemos cargar varios archivos (csv's, mapas, jsons...)
|
||
|
|
// una vez cargado llamará a la función ready
|
||
|
|
d3.queue()
|
||
|
|
.defer(d3.json, "./map.json")
|
||
|
|
.await(ready);
|
||
|
|
|
||
|
|
// esta función recibe como parametro nuestro mapa
|
||
|
|
// para aclararnos la hemos llamado 'map' (podríamos llamarla como quisieramos)
|
||
|
|
function ready(error, map) {
|
||
|
|
if (error) throw error;
|
||
|
|
|
||
|
|
// variable que almacena todos los polígonos del mapa con topojson
|
||
|
|
var penales = topojson.feature(map, map.objects.penales).features
|
||
|
|
|
||
|
|
//vamos a utilizar un bucle for para iterar por todas las unidades del mapa, un bucle por cada municipio
|
||
|
|
// queremos conocer exactamente el valo de la tasa de paro en cada iteración
|
||
|
|
for (var i = 0; i < penales.length; i++) {
|
||
|
|
|
||
|
|
context.fillStyle = "black"
|
||
|
|
|
||
|
|
context.beginPath()
|
||
|
|
// pasamos al método de d3 (path()) arriba definido la unidad espacial correspondiente
|
||
|
|
path(penales[i]);
|
||
|
|
|
||
|
|
// la coloreamos
|
||
|
|
context.fill()
|
||
|
|
}
|
||
|
|
|
||
|
|
// estos pasos son similares para el dibujo
|
||
|
|
// de los contornos de los municipios
|
||
|
|
// esta vez no iteramos sino que los dibujamos todos de una vez
|
||
|
|
|
||
|
|
// color del contorno
|
||
|
|
context.strokeStyle = "white"
|
||
|
|
|
||
|
|
// una línea discontínua
|
||
|
|
context.setLineDash([1,3])
|
||
|
|
|
||
|
|
// grosor de línea
|
||
|
|
context.lineWidth = .9;
|
||
|
|
|
||
|
|
// pasamos a la función TODOS los polígonos
|
||
|
|
path(topojson.feature(map, map.objects.penales));
|
||
|
|
|
||
|
|
// dibujamos el contorno
|
||
|
|
context.stroke()
|
||
|
|
|
||
|
|
// reseteamos la línea discontínua
|
||
|
|
context.setLineDash([0])
|
||
|
|
// a partir de este momento cualquier línea será continua
|
||
|
|
|
||
|
|
// variable que almacena todos los entidades del mapa con topojson
|
||
|
|
var entidades = topojson.feature(map, map.objects.entidades).features
|
||
|
|
for (var i = 0; i < entidades.length; i++) {
|
||
|
|
|
||
|
|
context.beginPath()
|
||
|
|
// pasamos al método de d3 (path()) arriba definido la unidad espacial correspondiente
|
||
|
|
xy = entidades[i].geometry
|
||
|
|
|
||
|
|
path(entidades[i],path.pointRadius(1))
|
||
|
|
|
||
|
|
// la coloreamos
|
||
|
|
context.fillStyle = "green"
|
||
|
|
context.fill()
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|