martgnz/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    A bubble map of the prison population in Catalonia. For the UPF Hacklab dataviz lab, an idea of @mpreki.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 12px;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}
path {
  fill: none;
  stroke: grey;
  stroke-width: 0.5px;
  pointer-events: none;
}
circle {
  stroke: black;
  stroke-width: 0.5px;
}
.over {
  stroke: black;
  stroke-width: 2px;
}
.d3-tip {
  line-height: 5px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  padding-bottom: 0;
}
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<script src="https://unpkg.com/d3-tip@0.7.1/index.js"></script>
<body>

<script>
var margin = { top: 20, right: 10, bottom: 20, left: 10 },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var projection = d3
  .geoMercator()
  .center([2.5, 41.6])
  .scale(9000);

var path = d3.geoPath().projection(projection);

var color = d3
  .scaleQuantize()
  .range(["rgb(254,232,200)", "rgb(253,187,132)", "rgb(227,74,51)"]);

var tip = d3
  .tip()
  .attr("class", "d3-tip")
  .offset([-10, 0])
  .html(function(d) {
    return (
      "<strong>" +
      d.nom +
      "</strong>" +
      "<p>" +
      d.municipi +
      "</p>" +
      "<p>Ocupació: " +
      d.ocupacio +
      " persones</p>"
    );
  });

var svg = d3
  .select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.call(tip);

var radius = d3
  .scalePow()
  .domain([0, 1540])
  .range([0, 30]);

d3.json("municipios.json", function(error, m) {
  if (error) return console.error(error);

  d3.csv("presons.csv", function(error, data) {
    color.domain([
      d3.min(data, function(d) {
        return d.ocupacio;
      }),
      d3.max(data, function(d) {
        return d.ocupacio;
      })
    ]);

    svg
      .append("path")
      .datum(topojson.mesh(m))
      .attr("d", path);

    svg
      .selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return projection([d.lon, d.lat])[0];
      })
      .attr("cy", function(d) {
        return projection([d.lon, d.lat])[1];
      })
      .attr("r", function(d) {
        return radius(d.ocupacio);
      })
      .on("mouseover", function(d) {
        tip.show(d);
        return d3.select(this).classed("over", true);
      })
      .on("mouseleave", function(d) {
        tip.hide(d);
        return d3.select(this).classed("over", false);
      })
      .style("fill", function(d) {
        var value = d.ocupacio;
        if (value) {
          return color(value);
        } else {
          return "#ccc";
        }
      });
  });
});
</script>
</body>

## municipios.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              municipios.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## presons.csv

          
            nom
            ocupacio
            capacitat
            any de construccio
            lat
            lon
            municipi
            provincia

            
              Centre Penitenciari Brians 2
              1540
              
              2007
              41.501344114050376
              1.823149199999989
              Sant Esteve Sesrovires
              Barcelona

            
              Centre Penitenciari Brians 1
              1292
              1500
              1991
              41.501344114050376
              1.823149199999989
              Sant Esteve Sesrovires
              Barcelona

            
              Centre Penitenciari d’Homes de Barcelona (La Model)
              1080
              
              1904
              41.38342541399222
              2.1453861999999617
              Barcelona
              Barcelona

            
              Centre Penitenciari de Dones de Barcelona (Wad-Ras)
              523
              
              1983
              41.392611213996716
              2.1956118000000515
              Barcelona
              Barcelona

            
              Centre Penitenciari Obert de Girona
              101
              173
              2014 - 2015
              42.006305414301856
              2.8236473499999875
              Girona
              Girona

            
              Centre Penitenciari Obert 1 de Barcelona
              147
              
              1991
              41.38342541399222
              2.1453861999999617
              Barcelona
              Barcelona

            
              Centre Penitenciari Obert 2 de Barcelona
              259
              
              1984
              41.453509214026774
              2.1914338999999927
              Barcelona
              Barcelona

            
              Centre Penitenciari de Tarragona
              294
              
              1950
              41.20004801390217
              1.60719789999996
              Tarragona
              Tarragona

            
              Centre Penitenciari Lledoners
              759
              750
              2008
              41.755551607289654
              1.7227161499999966
              Sant Joan de Vilatorrada
              Barcelona

            
              Centre Penitenciari de Ponent
              739
              
              1984
              41.624010414111105
              0.6077336500000001
              Lleida
              Lleida

            
              Centre Penitenciari Obert de Lleida
              168
              
              2008
              41.624010414111105
              0.6077336500000001
              Lleida
              Lleida

            
              Centre Penitenciari Puig de les Basses
              691
              1018
              2014
              42.29435180124225
              2.9370703374054363
              Figueres
              Girona

            
              Centre Penitenciari Quatre Camins
              1380
              
              1989
              41.593126064095784
              2.285750699999994
              Roca del Vallès
              Barcelona

            
              Centre Penitenciari de Joves
              261
              450
              2008
              41.593126064095784
              2.285750699999994
              La Roca del Vallès
              Barcelona

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-size: 12px;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	}
	path {
	fill: none;
	stroke: grey;
	stroke-width: 0.5px;
	pointer-events: none;
	}
	circle {
	stroke: black;
	stroke-width: 0.5px;
	}
	.over {
	stroke: black;
	stroke-width: 2px;
	}
	.d3-tip {
	line-height: 5px;
	padding: 10px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 2px;
	padding-bottom: 0;
	}
	.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.8);
	content: "\25BC";
	position: absolute;
	text-align: center;
	}
	.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	}
	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v3.min.js"></script>
	<script src="https://unpkg.com/d3-tip@0.7.1/index.js"></script>
	<body>

	<script>
	var margin = { top: 20, right: 10, bottom: 20, left: 10 },
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var projection = d3
	.geoMercator()
	.center([2.5, 41.6])
	.scale(9000);

	var path = d3.geoPath().projection(projection);

	var color = d3
	.scaleQuantize()
	.range(["rgb(254,232,200)", "rgb(253,187,132)", "rgb(227,74,51)"]);

	var tip = d3
	.tip()
	.attr("class", "d3-tip")
	.offset([-10, 0])
	.html(function(d) {
	return (
	"<strong>" +
	d.nom +
	"</strong>" +
	"<p>" +
	d.municipi +
	"</p>" +
	"<p>Ocupació: " +
	d.ocupacio +
	" persones</p>"
	);
	});

	var svg = d3
	.select("body")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.call(tip);

	var radius = d3
	.scalePow()
	.domain([0, 1540])
	.range([0, 30]);

	d3.json("municipios.json", function(error, m) {
	if (error) return console.error(error);

	d3.csv("presons.csv", function(error, data) {
	color.domain([
	d3.min(data, function(d) {
	return d.ocupacio;
	}),
	d3.max(data, function(d) {
	return d.ocupacio;
	})
	]);

	svg
	.append("path")
	.datum(topojson.mesh(m))
	.attr("d", path);

	svg
	.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d) {
	return projection([d.lon, d.lat])[0];
	})
	.attr("cy", function(d) {
	return projection([d.lon, d.lat])[1];
	})
	.attr("r", function(d) {
	return radius(d.ocupacio);
	})
	.on("mouseover", function(d) {
	tip.show(d);
	return d3.select(this).classed("over", true);
	})
	.on("mouseleave", function(d) {
	tip.hide(d);
	return d3.select(this).classed("over", false);
	})
	.style("fill", function(d) {
	var value = d.ocupacio;
	if (value) {
	return color(value);
	} else {
	return "#ccc";
	}
	});
	});
	});
	</script>
	</body>
nom	ocupacio	capacitat	any de construccio	lat	lon	municipi	provincia
Centre Penitenciari Brians 2	1540		2007	41.501344114050376	1.823149199999989	Sant Esteve Sesrovires	Barcelona
Centre Penitenciari Brians 1	1292	1500	1991	41.501344114050376	1.823149199999989	Sant Esteve Sesrovires	Barcelona
Centre Penitenciari d’Homes de Barcelona (La Model)	1080		1904	41.38342541399222	2.1453861999999617	Barcelona	Barcelona
Centre Penitenciari de Dones de Barcelona (Wad-Ras)	523		1983	41.392611213996716	2.1956118000000515	Barcelona	Barcelona
Centre Penitenciari Obert de Girona	101	173	2014 - 2015	42.006305414301856	2.8236473499999875	Girona	Girona
Centre Penitenciari Obert 1 de Barcelona	147		1991	41.38342541399222	2.1453861999999617	Barcelona	Barcelona
Centre Penitenciari Obert 2 de Barcelona	259		1984	41.453509214026774	2.1914338999999927	Barcelona	Barcelona
Centre Penitenciari de Tarragona	294		1950	41.20004801390217	1.60719789999996	Tarragona	Tarragona
Centre Penitenciari Lledoners	759	750	2008	41.755551607289654	1.7227161499999966	Sant Joan de Vilatorrada	Barcelona
Centre Penitenciari de Ponent	739		1984	41.624010414111105	0.6077336500000001	Lleida	Lleida
Centre Penitenciari Obert de Lleida	168		2008	41.624010414111105	0.6077336500000001	Lleida	Lleida
Centre Penitenciari Puig de les Basses	691	1018	2014	42.29435180124225	2.9370703374054363	Figueres	Girona
Centre Penitenciari Quatre Camins	1380		1989	41.593126064095784	2.285750699999994	Roca del Vallès	Barcelona
Centre Penitenciari de Joves	261	450	2008	41.593126064095784	2.285750699999994	La Roca del Vallès	Barcelona