Skip to content

Instantly share code, notes, and snippets.

@numeroteca
Last active Jun 19, 2018
Embed
What would you like to do?
Small multiple maps with interactive regions. Euskadi school zones
license: gpl-3.0
height: 950
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>Small multiple maps</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<style>
html, body {
margin: 0;
padding: 0;
font-family: 'Dosis', sans-serif;
}
#container {
width: 100%;
max-width: 1120px;
margin: 0 auto;
}
#left {
float:left;
clear:left;
height:650px;
}
#maps {
width:960px
}
#pre {
width:960px
}
.map {
margin-top:0px;
border: 4px #FFF solid;
}
path:hover {
stroke-width:2px !important;
stroke:black !important;
cursor:pointer;
}
p {
margin:0 0 4px 0;
font-size:0.8em;
color:grey;
}
#tooltip {
height:10px;
}
.column {
width:250px;
float:left;
text-align:center;
font-size:1.3em;
color:grey;
}
.row {
height:182px;
text-align:right;
font-size:1.3em;
padding:50px 20px 0 0;
}
.column_init {
width:180px;
float:left;
}
h1 {
font-size:1.1em;
font-weight:bold;
}
</style>
</head>
<body>
<div id="container">
<h1>Comparativa redes pública y privada en Euskadi por zonas escolares</h1>
<div id="tooltip"></div>
<div id="pre">
<div class="column_init">
&nbsp;
</div>
<div class="column">
Pública
</div>
<div class="column">
Privada
</div>
<div class="column">
Todas
</div>
</div>
<div id="left" class="column_init">
<p class="row">
Becas material escolar
</p>
<p class="row">
Becas comedor
</p>
<p class="row">
Alumnado extranjero
</p>
</div>
<div id="maps">
</div>
</div>
<script>
// based in https://bost.ocks.org/mike/map/
// define alto y ancho de mapa
var mapWidth = 250;
var mapHeight = 190;
// Escala de color para becas
var color = d3.scaleLinear()
.domain([0, 72])
.range(['#fff','#053874'])
// Escala de color extranjeros
var color2 = d3.scaleLinear()
.domain([0, 38])
.range(['#fff','#053874'])
// Adds tooltip
var tooltip = d3.select("#tooltip")
.append("div")
.attr("class", "tooltip")
// Loads data
d3.json("limites-zonas-escolares-euskadi-con-variables-2014-15_simplify3.json", function(error, euskadi) {
// topojson creado con y simplificado con http://mapshaper.org/
if (error) return console.error(error);
// Variable con todos los datos
var subunits = topojson.feature(euskadi, euskadi.objects.barrios);
// Projection for Euskadi
var projection = d3.geoMercator()
.scale(8000) // zoom level
.center([-2.6,42.97]) // center of map
.translate([mapWidth / 2, mapHeight / 2]);
// Projection for Bilbao
/*
var projection = d3.geoMercator()
.scale(60000) // note change of zoom
.center([-2.9331,43.2521])
.translate([mapWidth / 2, mapHeight / 2]);
*/
var path = d3.geoPath()
.projection(projection);
// Código de small multiple basado en https://gist.github.com/tomgp/9386620
//var mapasdef = ["perc_bec_mat_escolar_pub","perc_bec_mat_escolar_priv","perc_material_m15",
// "perc_bec_comedor_pub","perc_bec_comedor_priv","perc_comedor_m16",
// "perc_alum_ext_publi","perc_alum_ext_priv","perc_alum_ext_todos"]
// Array to list variables to displa in map and dosplay name of variables
var mapasdef = [["Becas material escolar pública","perc_bec_mat_escolar_pub"],["Becas material escolar privada","perc_bec_mat_escolar_priv"],["Becas material escolar todos","perc_material_m15"],["Becas comedor pública","perc_bec_comedor_pub"],["Becas comedor privada","perc_bec_comedor_priv"],["Becas comedor todos ","perc_comedor_m16"],["Alumnado extranjero pública","perc_alum_ext_publi"],["Alumnado extranjero privada","perc_alum_ext_priv"],["Alumnado extranjero todos ","perc_alum_ext_todos"]]
// draw a map for each element of array
var dateJoin = d3.select('#maps').selectAll('div.map')
.data(mapasdef);
// creates divs that will contain the maps
var divs = dateJoin.enter()
.append('div')
.attr('id', function(d){ return 'map_'+d; })
.attr('class','map')
.style('float','left')
.style('width',mapWidth);
// Incluye el nombre de la variable
divs.append('p').text(function(d){ return d[0]; });
divs.select('p').append('span').text(" ")
var zonas = divs.append('svg').attr('width',mapWidth).attr('height',mapHeight);
zonas.each(function(key, i=1){
d3.select(this).selectAll('path')
.data(subunits.features)
.enter().append("path")
.attr("fill", function(d) { return i > 5 ? color2(d.properties[key[1]]) : color(d.properties[key[1]]); })
.attr("d", path)
.attr("stroke", "black")
.attr("stroke-width", "0.3px")
.on("mousemove", showTooltip) // AÑADIR EVENTO SHOW TOOLTIP
.on("mouseout", hideTooltip) // OCULTAR TOOLTIP
.attr('class', function(d) {
return "z" + d.properties.zona_id2
})
.on('mouseenter', function(d, i) { // selects patsh with same class in other maps and changes to wider troke
notify('.z' + d.properties.zona_id2, 'select');
d3.selectAll('.z' + d.properties.zona_id2).attr("stroke-width", "2px");
})
.on('mouseleave', function(d) {
notify('.z' + d.properties.zona_id2, 'unselect');
d3.selectAll('.z' + d.properties.zona_id2).attr("stroke-width", "0.3px");
})
.on('select', function(self) {
var geoData = self.data();
self.node().parentNode.parentNode.getElementsByTagName('span')[0].innerHTML = " <strong>" + geoData[0].properties[key[1]]+ "%</strong>";
})
.on('unselect', function(self) {
self.node().parentNode.parentNode.getElementsByTagName('span')[0].innerHTML = "";
});
// suma una unidad cada vez para ir mostrando las 9 variables especificadas en la matriz mapasdef
i += 1;
});
// Intearctivity from https://blog.webkid.io/multiple-maps-d3/
// Una función usada para "notificar" a los otros path que comparten class con el señalado por el cursor
function notify(selector, eventName) {
d3.selectAll(selector)._groups[0].forEach(function(el, i) {
var shape = d3.select(el);
shape.on(eventName)(shape);
});
}
function showTooltip(d) {
tooltip.html("<strong>" + d.properties.zona + "</strong>").style("opacity", 1)
}
function hideTooltip(d) {
// Hide tooltip
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