Skip to content

Instantly share code, notes, and snippets.

@numeroteca
Last active January 19, 2018 23:16
Show Gist options
  • Save numeroteca/33325b3234175c5450b856026c62a920 to your computer and use it in GitHub Desktop.
Save numeroteca/33325b3234175c5450b856026c62a920 to your computer and use it in GitHub Desktop.
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>
Loading
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