Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@numeroteca

numeroteca/.block

Last active June 19, 2018 11:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save numeroteca/bee12808cbcbcaebecf07307948320b0 to your computer and use it in GitHub Desktop.
Save numeroteca/bee12808cbcbcaebecf07307948320b0 to your computer and use it in GitHub Desktop.
Download ZIP
Small multiple maps with interactive regions in Bilbao school zones
Raw
.block
license: gpl-3.0
height: 950
scrolling: no
border: no
Raw
index.html
<!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 Bilbao 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>
Display the source blob
Display the rendered blob
Raw
limites-zonas-escolares-euskadi-con-variables-2014-15_simplify3.json
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