Simple canvas map

A series of blocks for the QGIS-and-d3 workshop at Medialab-Prado Madrid (02/19/2017).

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>

<div class="map"></div>

<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");

context.lineJoin = 'round';
  context.lineCap = 'round';

// 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, un bucle por cada municipio
    // 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 (path()) 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>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v1.min.js