Skip to content

Instantly share code, notes, and snippets.

@numeroteca
Last active Jan 19, 2018
Embed
What would you like to do?
Simple map of Euskadi shchool zones with topojson and interactivity
license: gpl-3.0
height: 500
scrolling: no
border: no
<!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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment