ramiroaznar · February 19, 2017 09:51
diff --git a/README.md b/README.md
diff --git a/data.csv b/data.csv
 id	name	desemprego
 420105	Lagoa	13.6
 420204	Nordeste	10.8
 420325	Ponta Delgada	12.0
 420406	Povoação	14.6
 420513	Ribeira Grande	14.3
 420605	Vila Franca do Campo	15.6

diff --git a/index.html b/index.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 = 300;

    // las añadimos al canvas
    canvas
    .attr("width", width)
    .attr("height", height)
    .style("width", width + "px")
    .style("height", height + "px")

    // establecemos una escala de color.
    // Dado que los datos son muy planos, he ajustado la escala al máximo.
    var color = d3.scaleThreshold()
    .domain([10.8, 12, 13.6, 14.3, 14.6, 15.6])
    .range(["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3"]);

    // 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 municipalities = topojson.feature(map, map.objects.municipalities).features

      //vamos a utilizar un bucle for para iterar por todas las unidades del mapa, una por cada una
      // queremos conocer exactamente el valo de la tasa de paro en cada iteración
      for (var i = 0; i < municipalities.length; i++) {

        // almacenamos en una variable el valor de la tasa de paro
        var desempleo = municipalities[i].properties.csv_desemp;

        // la asociamos al canvas con .fillStyle()
        context.fillStyle = color(desempleo)

        // indicamos que vamos a comenzar a dibujar un path o polígono
        context.beginPath()

        // pasamos al método de d3 arriba definido la unidad espacial correspondiente
        path(municipalities[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.municipalities));

      // dibujamos el contorno
      context.stroke()

      // reseteamos la línea discontínua
      context.setLineDash([0])
      // a partir de este momento cualquier línea será continua

      // dibujamos el contorno de la isla 
      context.strokeStyle = "rgb(0, 0, 0)";
      context.lineWidth = 0.3;
      context.beginPath()
      path(topojson.feature(map, map.objects.island));
      context.stroke()

    };
    </script>

  </body>
 </html>
diff --git a/map.json b/map.json
diff --git a/thumbnail.png b/thumbnail.png
	id name desemprego
	420105 Lagoa 13.6
	420204 Nordeste 10.8
	420325 Ponta Delgada 12.0
	420406 Povoação 14.6
	420513 Ribeira Grande 14.3
	420605 Vila Franca do Campo 15.6
	<!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 = 300;

	// las añadimos al canvas
	canvas
	.attr("width", width)
	.attr("height", height)
	.style("width", width + "px")
	.style("height", height + "px")

	// establecemos una escala de color.
	// Dado que los datos son muy planos, he ajustado la escala al máximo.
	var color = d3.scaleThreshold()
	.domain([10.8, 12, 13.6, 14.3, 14.6, 15.6])
	.range(["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3"]);

	// 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 municipalities = topojson.feature(map, map.objects.municipalities).features

	//vamos a utilizar un bucle for para iterar por todas las unidades del mapa, una por cada una
	// queremos conocer exactamente el valo de la tasa de paro en cada iteración
	for (var i = 0; i < municipalities.length; i++) {

	// almacenamos en una variable el valor de la tasa de paro
	var desempleo = municipalities[i].properties.csv_desemp;

	// la asociamos al canvas con .fillStyle()
	context.fillStyle = color(desempleo)

	// indicamos que vamos a comenzar a dibujar un path o polígono
	context.beginPath()

	// pasamos al método de d3 arriba definido la unidad espacial correspondiente
	path(municipalities[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.municipalities));

	// dibujamos el contorno
	context.stroke()

	// reseteamos la línea discontínua
	context.setLineDash([0])
	// a partir de este momento cualquier línea será continua

	// dibujamos el contorno de la isla
	context.strokeStyle = "rgb(0, 0, 0)";
	context.lineWidth = 0.3;
	context.beginPath()
	path(topojson.feature(map, map.objects.island));
	context.stroke()

	};
	</script>

	</body>
	</html>