Last active
January 19, 2018 23:16
-
-
Save numeroteca/33325b3234175c5450b856026c62a920 to your computer and use it in GitHub Desktop.
Simple map of Euskadi shchool zones with topojson and interactivity
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
| license: gpl-3.0 | |
| height: 500 | |
| scrolling: no | |
| border: no |
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> | |
| <html dir="ltr" lang="es-ES"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Single map</title> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://d3js.org/topojson.v1.min.js"></script> | |
| <style> | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| font-family:sans-serif; | |
| } | |
| path:hover { | |
| stroke-width:2px !important; | |
| stroke:black !important; | |
| cursor:pointer; | |
| } | |
| h1 { | |
| font-size:1em; | |
| } | |
| p { | |
| margin:0px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Porcentaje de extranjeros en escuela pública</h1> | |
| <script> | |
| // basado en https://bost.ocks.org/mike/map/ | |
| var width = 400, | |
| height = 350; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .style("background-color","#EFEFEF") | |
| var color = d3.scale.linear() | |
| .domain([0, 38]) | |
| .range(['#fff','#053874']) | |
| // Adds tooltip | |
| var tooltip = d3.select("body") | |
| .append("div") | |
| .attr("class", "tooltip") | |
| d3.json("limites-zonas-escolares-euskadi-con-variables-2014-15_simplify3.json", function(error, uk) { | |
| // topojson creado con y simplificado con http://mapshaper.org/ | |
| if (error) return console.error(error); | |
| // Variable con todos los datos | |
| var subunits = topojson.feature(uk, uk.objects.barrios); | |
| // Projection for Euskadi | |
| var projection = d3.geo.mercator() | |
| .scale(12000) | |
| .center([-2.6,42.9]) | |
| .translate([width / 2, height / 2]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| svg.append("path") | |
| .datum(subunits) | |
| .attr("d", path) | |
| .attr("stroke", "grey"); | |
| svg.selectAll(".subunit") | |
| .data(subunits.features) | |
| .enter().append("path") | |
| .attr("class", function(d) { return "subunit z" + d.properties.zona_id; }) | |
| .attr("fill", function(d) { return color(d.properties.perc_alum_ext_publi); }) | |
| .attr("d", path) | |
| .on("mousemove", showTooltip) // AÑADIR EVENTO SHOW TOOLTIP | |
| .on("mouseout", hideTooltip); // OCULTAR TOOLTIP | |
| // Función para motrar el tooltip | |
| function showTooltip(d) { | |
| tooltip.html("<div class='table-responsive'><strong>" + d.properties.zona + " " + d.properties.perc_alum_ext_publi + "%</strong> (zona " + d.properties.zona_id2 + ")</div>").style("opacity", 1) | |
| } | |
| // Función para ocultar el tooltip | |
| function hideTooltip(d) { | |
| tooltip.style("opacity", 0) | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment