D3 Examples - Assign data from csv to a canvas map

xxxxxxxxxx
 
<!DOCTYPE html>
<div class="map">
​
</div>
​
<!-- I M P O R T A N T E -->
<!-- Este mapa es igual a colored-retina -->
<!-- En este caso vamos a asociar los datos del csv aquí -->
<!-- en lugar de leerlos directamente del json (anterior shapefile) -->
​
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
​
var canvas = d3.select(".map").append("canvas");
context = canvas.node().getContext("2d"),
path = d3.geoPath().projection(null).context(context);
​
context.lineJoin = 'round';
context.lineCap = 'round';
​
var width = 960,
height = 600;
​
canvas
.attr("width", width)
.attr("height", 600)
.style("width", width + "px")
.style("height", 600 + "px")
​
if (window.devicePixelRatio > 1) {
  var devicePixelRatio = window.devicePixelRatio || 1;
  var backingStoreRatio = context.webkitBackingStorePixelRatio ||
  context.backingStorePixelRatio || 1;
  var ratio = devicePixelRatio / backingStoreRatio;
  canvas
  .attr('width', width * ratio)
  .attr('height', height * ratio)
  .style('width', width + 'px')
  .style('height', height + 'px');
  context.scale(ratio, ratio);
}
​
​
var color = d3.scaleThreshold()
.domain([12, 13.6, 15.3, 16.5, 17, 17.3])
.range(["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"]);
​
d3.queue()
.defer(d3.json, "map.json")
.defer(d3.csv, "data.csv")
.await(ready);
​
var landuseClasses = {
  forest : {
    fill: '#B2DF8A',
    stroke: '#33a02c'
  },
  residential : {
    fill: '#87a5a6',
    stroke: '#3e979c'
  }
}
​
var roadsWidthClasses = {
  primary : 0.8,
  secondary: 0.4,
  tertiary : 0.2,
  path : 0.1
}
​
function ready(error, map, csv) {
  if (error) throw error;
​
  // creamos un array vacio
  var data = [];
​
  // iteramos a lo largo del csv
  for (var i = 0; i < csv.length; i++) {
​
    // mediante esta asignación podremos
    // acceder al valor de cada municipio mediante su id
    data[csv[i].id] = csv[i];
​
  }
​
  var landuse = topojson.feature(map, map.objects.landuse).features
  var municipalities = topojson.feature(map, map.objects.municipalities).features
  var roads = topojson.feature(map, map.objects.roads).features
​
  context.lineWidth = .3;
​
  // landuse
  for (var i = 0; i < landuse.length; i++) {
    var fclass = landuse[i].properties.fclass;
    context.strokeStyle = landuseClasses[fclass].stroke;
    context.fillStyle = landuseClasses[fclass].fill;
    context.beginPath()
    path(landuse[i]);
    context.fill()
    context.stroke()
  }
​
  //municipios
  for (var i = 0; i < municipalities.length; i++) {
​
    // creamos una variable con el código del municipio del json (anteriormente shapefile)
    var cod_muni = municipalities[i].properties.DICOFRE; // DICOFREC es el código de municipio
​
    // nueva variable en la que guardamos el valor del desempleo en cada iteración
    // accedemos a este valor a través del código del municipio que hemos guardado en cod_muni
    // guardamos el valor de la propiedad desemprego
    var desempleo = data[cod_muni].desemprego
​
    context.fillStyle = color(desempleo)
    context.beginPath()
    path(municipalities[i]);
    context.globalAlpha = 0.3;
    context.fill()
    //context.stroke()
  }
  context.globalAlpha = 1;
​
  // roads
  for (var i = 0; i < roads.length; i++) {
    var fclass = roads[i].properties.fclass;
    context.strokeStyle = 'rgba(32, 32, 32,.2)';
    context.lineWidth = roadsWidthClasses[fclass];
    context.beginPath()
    path(roads[i]);
    //context.fill()
    context.stroke()
  }
​
  context.strokeStyle = "black"
  context.setLineDash([1,3])
  context.lineWidth = .2;
  path(topojson.feature(map, map.objects.municipalities));
  context.stroke()
  context.setLineDash([0])
​
  //island border
  context.strokeStyle = "rgb(0, 0, 0)";
  context.lineWidth = 0.3;
  context.beginPath()
  path(topojson.feature(map, map.objects.island));
  context.stroke()
​
};
</script>
​
    