A series of blocks for the QGIS-and-d3 workshop at Medialab-Prado Madrid (02/19/2017).
Last active
February 19, 2017 16:46
-
-
Save LuisSevillano/3fe490c429b59f79aa83b0ddc78ca08c to your computer and use it in GitHub Desktop.
Assign data from csv to a canvas map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| border: none | |
| height: 400 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment