ackuser/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Choropleth of spanish cities by population

Choropleth using D3.js - List of metropolitan areas in Spain
Information from Wikipedia

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.subunit-boundary {
  fill: none;
  stroke: #777;
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
}

.place,
.place-label {
  fill: red;
}

text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  pointer-events: none;
  text-transform: capitalize;
  font-weight: bold;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 18px;
  padding: 2px;
  font: 10px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}


.q0-9 { fill:rgb(247,251,255); }
.q1-9 { fill:rgb(222,235,247); }
.q2-9 { fill:rgb(198,219,239); }
.q3-9 { fill:rgb(158,202,225); }
.q4-9 { fill:rgb(107,174,214); }
.q5-9 { fill:rgb(66,146,198); }
.q6-9 { fill:rgb(33,113,181); }
.q7-9 { fill:rgb(8,81,156); }
.q8-9 { fill:rgb(8,48,107); }


.legend {
  display: table;
  margin: 0 auto;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
  height: 35px;
  width: 250px;
}
</style>
<body>
  <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="//d3js.org/queue.v1.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.10.0/d3-legend.min.js"></script>
  <script>

  var color = d3.scale.linear()
  .domain([0, .02, .05, .15])
  .range(["rgb(247,251,255)", "rgb(198,219,239)", "rgb(33,113,181)", "rgb(8,48,107)"])

  var rateByName = d3.map();

  var width = 960,
  height = 1160;

  var projection = d3.geo.mercator()
  .center([-10, 30])
  .scale(1800)
  .translate([width / 2, height / 2]);

  var path = d3.geo.path()
  .projection(projection)
  .pointRadius(2);

  d3.select("body").append("svg")
  .attr("class", "legend")

  var legend = d3.legend.color()
  .shapeHeight(10)
  .shapeWidth(50)
  .shapePadding(0)
  .labelOffset(5)
  .labelFormat(d3.format("%"))
  .orient("horizontal")
  .labelAlign("start")
  .scale(color)

  d3.select(".legend")
  .call(legend)


  var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

  // Define the div for the tooltip
  var div = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

  queue()
  .defer(d3.json, "spain.json")
  .defer(d3.tsv, "spain-provinces-population.tsv", function(d) {
    // console.log(d.Nombre + " " + d['Porcentaje_Población'])
    rateByName.set(d.Nombre, +d['Porcentaje_Población']);

  })
  .await(ready);

  function ready(error, spain){
    // console.log(map)
    var quantize = d3.scale.quantize()
    .domain([0, 5])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

    svg.selectAll(".subunit")
    .data(topojson.feature(spain, spain.objects.subunits).features)
    .enter().append("path")
    .attr("class", function(d) {
      return "subunit " + d.properties.name; })
      .attr("class", function(d) { return quantize(rateByName.get(d.properties.name)); })
      .attr("d", path)
      .on("mouseover", function(d) {
        console.log(d.properties.name)
        div.transition()
        .duration(200)
        .style("opacity", .9);
        div	.html(d.properties.name)
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
        div.transition()
        .duration(500)
        .style("opacity", 0);
      });

      svg.append("path")
      .datum(topojson.mesh(spain, spain.objects.subunits, function(a, b) { return a !== b; }))
      .attr("d", path)
      .attr("class", "subunit-boundary");
      svg.append("path")
      .datum(topojson.feature(spain, spain.objects.places))
      .attr("d", path)
      .attr("class", "place");

      svg.selectAll(".place-label")
      .data(topojson.feature(spain, spain.objects.places).features)
      .enter().append("text")
      .attr("class", "place-label")
      .attr("transform", function(d) {
        return "translate(" + projection(d.geometry.coordinates) + ")"; })
        .attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; })
        .attr("dy", ".15em")
        .style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; })
        .text(function(d) {
          // debugger
          // console.log(d.properties.NAME + " " + d.properties.POP_MAX)
          return d.properties.NAME; });
        };

        </script>

## spain-provinces-population.tsv
Nombre	Población	Porcentaje_Población	Densidad	Superficie	Porcentaje_superficie	Comunidad_Autónoma
Álava	321932	0.69	106	3037	0.6	País Vasco
Albacete	395007	0.85	26.46	14926	2.96	Castilla-La Mancha
Alicante	1 842963	3.97	316.82	5817	1.15 Comunidad Valenciana
Almería	690851	1.49	78.73	8775	1.74	Andalucía
Asturias	1041754	2.22	98.25	10603	2.10	Asturias
Ávila	165786	0.36	20.59	8050	1.60	Castilla y León
Badajoz	686032	1.48	31.52	21766	4.31	Extremadura
Barcelona	5427322	11.69	701.84	7733	1.53	Cataluña
Burgos	366900	0.78	26.17	14022	2.77	Castilla y León
Cáceres	405560	0.87	20.41	19868	3.94	Extremadura
Cádiz	1 248625	2.69	167.82	7440	1.47	Andalucía
Cantabria	588656	1.26	110.63	5321	1.05	Cantabria
Castellón	574906	1.24	86.63	6636	1.31	Comunidad Valenciana
Ciudad Real	514543	1.11	25.97	19813	3.93	Castilla-La Mancha
Córdoba	795718	1.71	57.78	13771	2.73	Andalucía
La Coruña	1128807	2.43	141.99	7950	1.58	Galicia
Cuenca	206653	0.44	12.06	17140	3.40	Castilla-La Mancha
Gerona	740537	1.59	125.32	5909	1.17	Cataluña
Granada	919329	1.98	72.69	12646	2.51	Andalucía
Guadalajara	254388	0.55	20.83	12214	2.41	Castilla-La Mancha
Gipuzkoa	707298	1.52	354.18	1997	0.39	País Vasco
Huelva	522216	1.12	51.57	10127	2.01	Andalucía
Huesca	221942	0.48	14.19	15636	3.10	Aragón
Baleares	1124 744	2.42	225.35	4991	0.99	Islas Baleares
Jaén	652253	1.40	48.33	13496	2.67	Andalucía
León	480209	1.03	30.82	15580	3.09	Castilla y León
Lérida	430655	0.93	35.38	12172	2.41	Cataluña
Lugo	338873	0.73	34.38	9856	1.95	Galicia
Madrid	6377364	13.73	794.48	8027	1.59	Comunidad de Madrid
Málaga	1632949	3.52	223.51	7306	1.45	Andalucía
Murcia	1463249	3.15	129.34	11313	2.24	Región de Murcia
Navarra	636638	1.37	61.27	10391	2.05	Navarra
Orense	318739	0.69	43.82	7273	1.44	Galicia
Palencia	165782	0.36	20.59	8052	1.60	Castilla y León
Las Palmas	1106779	2.38	272.27	4065	0.81	Canarias
Pontevedra	948496	2.04	211.09	4494	0.89	Galicia
La Rioja	319002	0.68	62.16	5045	0.99	La Rioja
Salamanca	342045	0.74	27.70	12349	2.45	Castilla y León
Santa Cruz de Tenerife	1021868	2.20	302.24	3381	0.67	Canarias
Segovia	158085	0.34	22.84	6920	1.35	Castilla y León
Sevilla	1939625	4.17	138.19	14036	2.78	Andalucía
Soria	92221	0.2	111.77	10306	2.04	Castilla y León
Tarragona	792619	1.71	125.77	6302	1.25	Cataluña
Teruel	137838	0.30	9.31	14809	2.96	Aragón
Toledo	699136	1.49	45.49	15369	3.04	Castilla-La Mancha
Valencia	2521681	5.43	233.34	10807	2.14	Comunidad Valenciana
Valladolid	527508	1.14	65.04	8110	1.61	Castilla y León
Bizkaia	1151905	2.46	519.58	2217	0.44	País Vasco
Zamora	184238	0.40	17.45	10561	2.09	Castilla y León
Zaragoza	960111	2.05	55.58	17274	3.41	Aragón
Ceuta	84726	0.18	4 579.78	18.5		Ceuta
Melilla	84621	0.18	6 315.00	13.4		Melilla

## spain.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              spain.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.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.subunit-boundary {
	fill: none;
	stroke: #777;
	stroke-dasharray: 2,2;
	stroke-linejoin: round;
	}

	.place,
	.place-label {
	fill: red;
	}

	text {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 10px;
	pointer-events: none;
	text-transform: capitalize;
	font-weight: bold;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 60px;
	height: 18px;
	padding: 2px;
	font: 10px sans-serif;
	background: lightsteelblue;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}


	.q0-9 { fill:rgb(247,251,255); }
	.q1-9 { fill:rgb(222,235,247); }
	.q2-9 { fill:rgb(198,219,239); }
	.q3-9 { fill:rgb(158,202,225); }
	.q4-9 { fill:rgb(107,174,214); }
	.q5-9 { fill:rgb(66,146,198); }
	.q6-9 { fill:rgb(33,113,181); }
	.q7-9 { fill:rgb(8,81,156); }
	.q8-9 { fill:rgb(8,48,107); }


	.legend {
	display: table;
	margin: 0 auto;
	font-family: "Helvetica Neue", sans-serif;
	font-size: 12px;
	height: 35px;
	width: 250px;
	}
	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="//d3js.org/queue.v1.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.10.0/d3-legend.min.js"></script>
	<script>

	var color = d3.scale.linear()
	.domain([0, .02, .05, .15])
	.range(["rgb(247,251,255)", "rgb(198,219,239)", "rgb(33,113,181)", "rgb(8,48,107)"])

	var rateByName = d3.map();

	var width = 960,
	height = 1160;

	var projection = d3.geo.mercator()
	.center([-10, 30])
	.scale(1800)
	.translate([width / 2, height / 2]);

	var path = d3.geo.path()
	.projection(projection)
	.pointRadius(2);

	d3.select("body").append("svg")
	.attr("class", "legend")

	var legend = d3.legend.color()
	.shapeHeight(10)
	.shapeWidth(50)
	.shapePadding(0)
	.labelOffset(5)
	.labelFormat(d3.format("%"))
	.orient("horizontal")
	.labelAlign("start")
	.scale(color)

	d3.select(".legend")
	.call(legend)


	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	// Define the div for the tooltip
	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	queue()
	.defer(d3.json, "spain.json")
	.defer(d3.tsv, "spain-provinces-population.tsv", function(d) {
	// console.log(d.Nombre + " " + d['Porcentaje_Población'])
	rateByName.set(d.Nombre, +d['Porcentaje_Población']);

	})
	.await(ready);

	function ready(error, spain){
	// console.log(map)
	var quantize = d3.scale.quantize()
	.domain([0, 5])
	.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

	svg.selectAll(".subunit")
	.data(topojson.feature(spain, spain.objects.subunits).features)
	.enter().append("path")
	.attr("class", function(d) {
	return "subunit " + d.properties.name; })
	.attr("class", function(d) { return quantize(rateByName.get(d.properties.name)); })
	.attr("d", path)
	.on("mouseover", function(d) {
	console.log(d.properties.name)
	div.transition()
	.duration(200)
	.style("opacity", .9);
	div .html(d.properties.name)
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 28) + "px");
	})
	.on("mouseout", function(d) {
	div.transition()
	.duration(500)
	.style("opacity", 0);
	});

	svg.append("path")
	.datum(topojson.mesh(spain, spain.objects.subunits, function(a, b) { return a !== b; }))
	.attr("d", path)
	.attr("class", "subunit-boundary");
	svg.append("path")
	.datum(topojson.feature(spain, spain.objects.places))
	.attr("d", path)
	.attr("class", "place");

	svg.selectAll(".place-label")
	.data(topojson.feature(spain, spain.objects.places).features)
	.enter().append("text")
	.attr("class", "place-label")
	.attr("transform", function(d) {
	return "translate(" + projection(d.geometry.coordinates) + ")"; })
	.attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; })
	.attr("dy", ".15em")
	.style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; })
	.text(function(d) {
	// debugger
	// console.log(d.properties.NAME + " " + d.properties.POP_MAX)
	return d.properties.NAME; });
	};

	</script>
	Nombre Población Porcentaje_Población Densidad Superficie Porcentaje_superficie Comunidad_Autónoma
	Álava 321932 0.69 106 3037 0.6 País Vasco
	Albacete 395007 0.85 26.46 14926 2.96 Castilla-La Mancha
	Alicante 1 842963 3.97 316.82 5817 1.15 Comunidad Valenciana
	Almería 690851 1.49 78.73 8775 1.74 Andalucía
	Asturias 1041754 2.22 98.25 10603 2.10 Asturias
	Ávila 165786 0.36 20.59 8050 1.60 Castilla y León
	Badajoz 686032 1.48 31.52 21766 4.31 Extremadura
	Barcelona 5427322 11.69 701.84 7733 1.53 Cataluña
	Burgos 366900 0.78 26.17 14022 2.77 Castilla y León
	Cáceres 405560 0.87 20.41 19868 3.94 Extremadura
	Cádiz 1 248625 2.69 167.82 7440 1.47 Andalucía
	Cantabria 588656 1.26 110.63 5321 1.05 Cantabria
	Castellón 574906 1.24 86.63 6636 1.31 Comunidad Valenciana
	Ciudad Real 514543 1.11 25.97 19813 3.93 Castilla-La Mancha
	Córdoba 795718 1.71 57.78 13771 2.73 Andalucía
	La Coruña 1128807 2.43 141.99 7950 1.58 Galicia
	Cuenca 206653 0.44 12.06 17140 3.40 Castilla-La Mancha
	Gerona 740537 1.59 125.32 5909 1.17 Cataluña
	Granada 919329 1.98 72.69 12646 2.51 Andalucía
	Guadalajara 254388 0.55 20.83 12214 2.41 Castilla-La Mancha
	Gipuzkoa 707298 1.52 354.18 1997 0.39 País Vasco
	Huelva 522216 1.12 51.57 10127 2.01 Andalucía
	Huesca 221942 0.48 14.19 15636 3.10 Aragón
	Baleares 1124 744 2.42 225.35 4991 0.99 Islas Baleares
	Jaén 652253 1.40 48.33 13496 2.67 Andalucía
	León 480209 1.03 30.82 15580 3.09 Castilla y León
	Lérida 430655 0.93 35.38 12172 2.41 Cataluña
	Lugo 338873 0.73 34.38 9856 1.95 Galicia
	Madrid 6377364 13.73 794.48 8027 1.59 Comunidad de Madrid
	Málaga 1632949 3.52 223.51 7306 1.45 Andalucía
	Murcia 1463249 3.15 129.34 11313 2.24 Región de Murcia
	Navarra 636638 1.37 61.27 10391 2.05 Navarra
	Orense 318739 0.69 43.82 7273 1.44 Galicia
	Palencia 165782 0.36 20.59 8052 1.60 Castilla y León
	Las Palmas 1106779 2.38 272.27 4065 0.81 Canarias
	Pontevedra 948496 2.04 211.09 4494 0.89 Galicia
	La Rioja 319002 0.68 62.16 5045 0.99 La Rioja
	Salamanca 342045 0.74 27.70 12349 2.45 Castilla y León
	Santa Cruz de Tenerife 1021868 2.20 302.24 3381 0.67 Canarias
	Segovia 158085 0.34 22.84 6920 1.35 Castilla y León
	Sevilla 1939625 4.17 138.19 14036 2.78 Andalucía
	Soria 92221 0.2 111.77 10306 2.04 Castilla y León
	Tarragona 792619 1.71 125.77 6302 1.25 Cataluña
	Teruel 137838 0.30 9.31 14809 2.96 Aragón
	Toledo 699136 1.49 45.49 15369 3.04 Castilla-La Mancha
	Valencia 2521681 5.43 233.34 10807 2.14 Comunidad Valenciana
	Valladolid 527508 1.14 65.04 8110 1.61 Castilla y León
	Bizkaia 1151905 2.46 519.58 2217 0.44 País Vasco
	Zamora 184238 0.40 17.45 10561 2.09 Castilla y León
	Zaragoza 960111 2.05 55.58 17274 3.41 Aragón
	Ceuta 84726 0.18 4 579.78 18.5 Ceuta
	Melilla 84621 0.18 6 315.00 13.4 Melilla