geraldo/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Choropleth: Population by neighbourhood in Barcelona

D3 map example showing population of neighbourhoods in Barcelona. Neighbourhoud polygons are loadad as topojson file, population is loadad as CSV file.

  
## barris_topo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              barris_topo.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.
      
    
## habitants_renda_2012.csv

          
            districte
            barri
            nom_barri
            habitants
            renda

            
              1
              1
              el Raval
              49844
              65.4

            
              1
              2
              el Barri Gòtic
              16754
              99.7

            
              1
              3
              la Barceloneta
              15745
              69.0

            
              1
              4
              Sant Pere-Santa Caterina i la Ribera
              22873
              89.3

            
              2
              5
              el Fort Pienc
              32225
              98.0

            
              2
              6
              la Sagrada Família
              52007
              95.3

            
              2
              7
              la Dreta de l'Eixample
              43436
              150.1

            
              2
              8
              l'Antiga Esquerra de l'Eixample
              41887
              119.2

            
              2
              9
              la Nova Esquerra de l'Eixample
              57760
              105.9

            
              2
              10
              Sant Antoni
              38277
              94.8

            
              3
              11
              el Poble Sec - AEI Parc de Montjuïc
              41380
              80.7

            
              3
              12
              la Marina del Prat Vermell - AEI Zona Franca
              1046
              45.9

            
              3
              13
              la Marina de Port
              30256
              67.4

            
              3
              14
              la Font de la Guatlla
              10236
              69.7

            
              3
              15
              Hostafrancs
              16094
              72.1

            
              3
              16
              la Bordeta
              18498
              72.9

            
              3
              17
              Sants - Badal
              24574
              74.3

            
              3
              18
              Sants
              41530
              85.2

            
              4
              19
              les Corts
              46698
              129.6

            
              4
              20
              la Maternitat i Sant Ramon
              23762
              109.3

            
              4
              21
              Pedralbes
              11778
              240.7

            
              5
              22
              Vallvidrera-el Tibidabo i les Planes
              4398
              177.5

            
              5
              23
              Sarrià
              24362
              189.8

            
              5
              24
              les Tres Torres
              16008
              215.0

            
              5
              25
              Sant Gervasi - la Bonanova
              24552
              187.9

            
              5
              26
              Sant Gervasi - Galvany
              46466
              176.0

            
              5
              27
              el Putxet i el Farró
              29618
              138.2

            
              6
              28
              Vallcarca i els Penitents
              15521
              113.7

            
              6
              29
              el Coll
              7222
              92.9

            
              6
              30
              la Salut
              13196
              117.4

            
              6
              31
              la Vila de Gràcia
              51025
              102.6

            
              6
              32
              el Camp d'en Grassot i Gràcia Nova
              34582
              98.6

            
              7
              33
              el Baix Guinardó
              25768
              85.3

            
              7
              34
              Can Baró
              8990
              81.4

            
              7
              35
              el Guinardó
              35697
              89.8

            
              7
              36
              la Font d'en Fargues
              9498
              107.5

            
              7
              37
              el Carmel
              32323
              58.5

            
              7
              38
              la Teixonera
              11410
              71.3

            
              7
              39
              Sant Genís dels Agudells
              6922
              79.6

            
              7
              40
              Montbau
              5090
              76.4

            
              7
              41
              la Vall d'Hebron
              5545
              90.3

            
              7
              42
              la Clota
              456
              78.5

            
              7
              43
              Horta
              26816
              80.0

            
              8
              44
              Vilapicina i la Torre Llobeta
              25584
              71.7

            
              8
              45
              Porta
              24772
              60.5

            
              8
              46
              el Turó de la Peira
              15428
              56.4

            
              8
              47
              Can Peguera
              2242
              53.1

            
              8
              48
              la Guineueta
              15143
              56.1

            
              8
              49
              Canyelles
              7144
              61.1

            
              8
              50
              les Roquetes
              16018
              52.8

            
              8
              51
              Verdun
              12407
              49.5

            
              8
              52
              la Prosperitat
              26515
              60.0

            
              8
              53
              la Trinitat Nova
              7692
              38.9

            
              8
              54
              Torre Baró
              2178
              52.4

            
              8
              55
              Ciutat Meridiana
              10709
              37.5

            
              8
              56
              Vallbona
              1329
              52.6

            
              9
              57
              la Trinitat Vella
              10487
              52.2

            
              9
              58
              Baró de Viver
              2393
              52.4

            
              9
              59
              el Bon Pastor
              12990
              67.3

            
              9
              60
              Sant Andreu
              56204
              77.6

            
              9
              61
              la Sagrera
              29038
              72.9

            
              9
              62
              el Congrés i els Indians
              14112
              72.3

            
              9
              63
              Navas
              21728
              77.0

            
              10
              64
              el Camp de l'Arpa del Clot
              38232
              81.2

            
              10
              65
              el Clot
              27201
              78.2

            
              10
              66
              el Parc i la Llacuna del Poblenou
              14147
              88.9

            
              10
              67
              la Vila Olímpica del Poblenou
              9322
              146.6

            
              10
              68
              el Poblenou
              32816
              89.8

            
              10
              69
              Diagonal Mar i el Front Marítim del Poblenou
              12701
              127.4

            
              10
              70
              el Besòs i el Maresme
              23732
              52.4

            
              10
              71
              Provençals del Poblenou
              19952
              80.4

            
              10
              72
              Sant Martí de Provençals
              26152
              63.5

            
              10
              73
              la Verneda i la Pau
              29201
              56.8

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

    svg {
        font: 10px sans-serif;
        display: inline;
    }

    .key path {
        display: none;
    }

    .key line {
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .key text {
        font-size: 10px;
    }
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

    //based on:
    //http://bl.ocks.org/mattparrilla/5724610

    // Set window height + width
    var width = 800,
        height = 600;

    var projection = d3.geo.mercator()
        .center([2.0785562,41.3948975])
        .scale(100000)
        .translate([width / 2, height / 2]);

    // Define path generator
    var path = d3.geo.path()
        .projection(projection);

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

    // Define scale to sort data values into color buckets
    var color = d3.scale.threshold()
        .domain([1000, 5000, 10000, 20000, 30000, 40000, 50000, 60000])
        .range(["#fff7ec","#fee8c8","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"]);

    // Legend Stuff
    var y = d3.scale.sqrt()
        .domain([0, 50000])
        .range([0,325]);

    var yAxis = d3.svg.axis()
        .scale(y)
        .tickValues(color.domain())
        .orient("right");

    // Load CSV
    d3.csv("habitants_renda_2012.csv", function(data) {

        // Load TopoJSON
        d3.json("barris_topo.json", function(error, vt) {

            for (var i = 0; i < data.length; i++) {
                var dataBarri = data[i].barri;
                var dataNom = data[i].nom_barri;
                var dataHabitants = parseFloat(data[i].habitants);
                var dataRenda = parseFloat(data[i].renda);

                for (var j = 0; j < vt.objects.barris_geo.geometries.length; j++) {
                    var jsonBarri = vt.objects.barris_geo.geometries[j].properties.codi;

                    if (dataBarri.toUpperCase() == jsonBarri) {
                        vt.objects.barris_geo.geometries[j].properties.habitants = dataHabitants;
                        vt.objects.barris_geo.geometries[j].properties.renda = dataRenda;
                        break;
                    }
                }
            }

            var bcn = topojson.feature(vt, vt.objects.barris_geo);

            svg.append("path")
                .datum(bcn)
                .attr("d", path)
                .style("stroke", "#777")
                .style("stroke-width", "1");


            var g = svg.append("g")
                .attr("class", "key")
                .attr("transform", "translate(50, 165)")
                .call(yAxis);

            g.selectAll("rect")
                .data(color.range().map(function(d, i) {
                    return {
                        y0: i ? y(color.domain()[i - 1]) : y.range()[0],
                        y1: i < color.domain().length ? y(color.domain()[i]) : y.range()[1],
                        z: d
                    };
                }))
                .enter().append("rect")
                    .attr("width", 8)
                    .attr("y", function(d) { return d.y0; })
                    .attr("height", function(d) { return d.y1 - d.y0; })
                    .style("fill", function(d) { return d.z; });


            svg.selectAll(".subunit")
                .data(topojson.feature(vt, vt.objects.barris_geo).features)
            .enter().append("path")
                .attr("d", path)
                .style("fill", function(d) {
                    var habitants = d.properties.habitants;

                    if (habitants) {
                        return color(habitants);
                    } else {
                        return "#ddd";
                    }
                })

                .on("mouseover", function(d) {
                    var xPosition = d3.mouse(this)[0];
                    var yPosition = d3.mouse(this)[1] - 30;

                    svg.append("text")
                        .attr("id", "tooltip")
                        .attr("x", xPosition)
                        .attr("y", yPosition)
                        .attr("text-anchor", "middle")
                        .attr("font-family", "sans-serif")
                        .attr("font-size", "11px")
                        .attr("font-weight", "bold")
                        .attr("fill", "black")
                        .html(d.properties.barri + "(" + d.properties.codi + "), Habitants: " + d.properties.habitants + ", Renda: " + d.properties.renda);

                    d3.select(this)
                    .style("fill", "#509e2f");
                })
                .on("mouseout", function(d) {
                    d3.select("#tooltip").remove();

                    d3.select(this)
                    .transition()
                    .duration(250)
                    .style("fill", function(d) {
                    var habitants = d.properties.habitants;

                    if (habitants) {
                        return color(habitants);
                    } else {
                        return "#ddd";
                    }
                });

            });

        });
    });


</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
districte	barri	nom_barri	habitants	renda
1	1	el Raval	49844	65.4
1	2	el Barri Gòtic	16754	99.7
1	3	la Barceloneta	15745	69.0
1	4	Sant Pere-Santa Caterina i la Ribera	22873	89.3
2	5	el Fort Pienc	32225	98.0
2	6	la Sagrada Família	52007	95.3
2	7	la Dreta de l'Eixample	43436	150.1
2	8	l'Antiga Esquerra de l'Eixample	41887	119.2
2	9	la Nova Esquerra de l'Eixample	57760	105.9
2	10	Sant Antoni	38277	94.8
3	11	el Poble Sec - AEI Parc de Montjuïc	41380	80.7
3	12	la Marina del Prat Vermell - AEI Zona Franca	1046	45.9
3	13	la Marina de Port	30256	67.4
3	14	la Font de la Guatlla	10236	69.7
3	15	Hostafrancs	16094	72.1
3	16	la Bordeta	18498	72.9
3	17	Sants - Badal	24574	74.3
3	18	Sants	41530	85.2
4	19	les Corts	46698	129.6
4	20	la Maternitat i Sant Ramon	23762	109.3
4	21	Pedralbes	11778	240.7
5	22	Vallvidrera-el Tibidabo i les Planes	4398	177.5
5	23	Sarrià	24362	189.8
5	24	les Tres Torres	16008	215.0
5	25	Sant Gervasi - la Bonanova	24552	187.9
5	26	Sant Gervasi - Galvany	46466	176.0
5	27	el Putxet i el Farró	29618	138.2
6	28	Vallcarca i els Penitents	15521	113.7
6	29	el Coll	7222	92.9
6	30	la Salut	13196	117.4
6	31	la Vila de Gràcia	51025	102.6
6	32	el Camp d'en Grassot i Gràcia Nova	34582	98.6
7	33	el Baix Guinardó	25768	85.3
7	34	Can Baró	8990	81.4
7	35	el Guinardó	35697	89.8
7	36	la Font d'en Fargues	9498	107.5
7	37	el Carmel	32323	58.5
7	38	la Teixonera	11410	71.3
7	39	Sant Genís dels Agudells	6922	79.6
7	40	Montbau	5090	76.4
7	41	la Vall d'Hebron	5545	90.3
7	42	la Clota	456	78.5
7	43	Horta	26816	80.0
8	44	Vilapicina i la Torre Llobeta	25584	71.7
8	45	Porta	24772	60.5
8	46	el Turó de la Peira	15428	56.4
8	47	Can Peguera	2242	53.1
8	48	la Guineueta	15143	56.1
8	49	Canyelles	7144	61.1
8	50	les Roquetes	16018	52.8
8	51	Verdun	12407	49.5
8	52	la Prosperitat	26515	60.0
8	53	la Trinitat Nova	7692	38.9
8	54	Torre Baró	2178	52.4
8	55	Ciutat Meridiana	10709	37.5
8	56	Vallbona	1329	52.6
9	57	la Trinitat Vella	10487	52.2
9	58	Baró de Viver	2393	52.4
9	59	el Bon Pastor	12990	67.3
9	60	Sant Andreu	56204	77.6
9	61	la Sagrera	29038	72.9
9	62	el Congrés i els Indians	14112	72.3
9	63	Navas	21728	77.0
10	64	el Camp de l'Arpa del Clot	38232	81.2
10	65	el Clot	27201	78.2
10	66	el Parc i la Llacuna del Poblenou	14147	88.9
10	67	la Vila Olímpica del Poblenou	9322	146.6
10	68	el Poblenou	32816	89.8
10	69	Diagonal Mar i el Front Marítim del Poblenou	12701	127.4
10	70	el Besòs i el Maresme	23732	52.4
10	71	Provençals del Poblenou	19952	80.4
10	72	Sant Martí de Provençals	26152	63.5
10	73	la Verneda i la Pau	29201	56.8
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	svg {
	font: 10px sans-serif;
	display: inline;
	}

	.key path {
	display: none;
	}

	.key line {
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.key text {
	font-size: 10px;
	}
	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>

	//based on:
	//http://bl.ocks.org/mattparrilla/5724610

	// Set window height + width
	var width = 800,
	height = 600;

	var projection = d3.geo.mercator()
	.center([2.0785562,41.3948975])
	.scale(100000)
	.translate([width / 2, height / 2]);

	// Define path generator
	var path = d3.geo.path()
	.projection(projection);

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

	// Define scale to sort data values into color buckets
	var color = d3.scale.threshold()
	.domain([1000, 5000, 10000, 20000, 30000, 40000, 50000, 60000])
	.range(["#fff7ec","#fee8c8","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"]);

	// Legend Stuff
	var y = d3.scale.sqrt()
	.domain([0, 50000])
	.range([0,325]);

	var yAxis = d3.svg.axis()
	.scale(y)
	.tickValues(color.domain())
	.orient("right");

	// Load CSV
	d3.csv("habitants_renda_2012.csv", function(data) {

	// Load TopoJSON
	d3.json("barris_topo.json", function(error, vt) {

	for (var i = 0; i < data.length; i++) {
	var dataBarri = data[i].barri;
	var dataNom = data[i].nom_barri;
	var dataHabitants = parseFloat(data[i].habitants);
	var dataRenda = parseFloat(data[i].renda);

	for (var j = 0; j < vt.objects.barris_geo.geometries.length; j++) {
	var jsonBarri = vt.objects.barris_geo.geometries[j].properties.codi;

	if (dataBarri.toUpperCase() == jsonBarri) {
	vt.objects.barris_geo.geometries[j].properties.habitants = dataHabitants;
	vt.objects.barris_geo.geometries[j].properties.renda = dataRenda;
	break;
	}
	}
	}

	var bcn = topojson.feature(vt, vt.objects.barris_geo);

	svg.append("path")
	.datum(bcn)
	.attr("d", path)
	.style("stroke", "#777")
	.style("stroke-width", "1");


	var g = svg.append("g")
	.attr("class", "key")
	.attr("transform", "translate(50, 165)")
	.call(yAxis);

	g.selectAll("rect")
	.data(color.range().map(function(d, i) {
	return {
	y0: i ? y(color.domain()[i - 1]) : y.range()[0],
	y1: i < color.domain().length ? y(color.domain()[i]) : y.range()[1],
	z: d
	};
	}))
	.enter().append("rect")
	.attr("width", 8)
	.attr("y", function(d) { return d.y0; })
	.attr("height", function(d) { return d.y1 - d.y0; })
	.style("fill", function(d) { return d.z; });


	svg.selectAll(".subunit")
	.data(topojson.feature(vt, vt.objects.barris_geo).features)
	.enter().append("path")
	.attr("d", path)
	.style("fill", function(d) {
	var habitants = d.properties.habitants;

	if (habitants) {
	return color(habitants);
	} else {
	return "#ddd";
	}
	})

	.on("mouseover", function(d) {
	var xPosition = d3.mouse(this)[0];
	var yPosition = d3.mouse(this)[1] - 30;

	svg.append("text")
	.attr("id", "tooltip")
	.attr("x", xPosition)
	.attr("y", yPosition)
	.attr("text-anchor", "middle")
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("font-weight", "bold")
	.attr("fill", "black")
	.html(d.properties.barri + "(" + d.properties.codi + "), Habitants: " + d.properties.habitants + ", Renda: " + d.properties.renda);

	d3.select(this)
	.style("fill", "#509e2f");
	})
	.on("mouseout", function(d) {
	d3.select("#tooltip").remove();

	d3.select(this)
	.transition()
	.duration(250)
	.style("fill", function(d) {
	var habitants = d.properties.habitants;

	if (habitants) {
	return color(habitants);
	} else {
	return "#ddd";
	}
	});

	});

	});
	});


	</script>