A series of blocks for the QGIS-and-d3 workshop at Medialab-Prado Madrid (02/19/2017).
Last active
February 19, 2017 16:45
-
-
Save LuisSevillano/9ad9c025a1fd9e82df64203bb8969c3d to your computer and use it in GitHub Desktop.
Retina canvas map
This file contains hidden or 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 hidden or 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> | |
| <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") | |
| // ajustes necesarios para ofrecer una mayor | |
| // definición en nuestro mapa canvas | |
| 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") | |
| .await(ready); | |
| // hemos creado un objeto gracias al cual podremos | |
| // asignar unas propiedades de estilo en el caso de que | |
| // la entidad a representar sea un bosque o una zona residencial | |
| var landuseClasses = { | |
| forest : { | |
| fill: '#B2DF8A', | |
| stroke: '#33a02c' | |
| }, | |
| residential : { | |
| fill: '#87a5a6', | |
| stroke: '#3e979c' | |
| } | |
| } | |
| // mismo concepto para carreteras | |
| // todas tendrán el mismo color pero no así el mismo grosor | |
| var roadsWidthClasses = { | |
| primary : 0.8, | |
| secondary: 0.4, | |
| tertiary : 0.2, | |
| path : 0.1 | |
| } | |
| function ready(error, map) { | |
| if (error) throw error; | |
| 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++) { | |
| context.fillStyle = color(municipalities[i].properties.csv_desemp) | |
| 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