Skip to content

Instantly share code, notes, and snippets.

@Qbelil

Qbelil/BCN_family_Income_2008_2013.csv

Created May 5, 2015 08:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Qbelil/b799b093741b1138381c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Qbelil/b799b093741b1138381c to your computer and use it in GitHub Desktop.
Download ZIP
Module 6 - Barcelona Family Income Index
Raw
BCN_family_Income_2008_2013.csv
Districte Codibarri Ordre Barri 2008 2009 2010 2011 2012 2013
1 1 1012008 el Raval 62.6 62.0 62.0 65.0 65.4 60.3
1 2 1022008 el Barri Gotic 80.8 94.3 92.3 98.8 99.7 103.6
1 3 1032008 la Barceloneta 65.9 64.4 72.6 73.1 69.0 82.1
1 4 1042008 Sant Pere - Santa Caterina i la Ribera 81.8 88.8 91.2 86.1 89.3 91.2
2 5 2052008 el Fort Pienc 108.3 109.1 108.5 97.9 98.0 99.0
2 6 2062008 la Sagrada Familia 100.7 98.4 97.3 96.1 95.3 97.5
2 7 2072008 la Dreta de l'Eixample 138.0 143.6 144.1 151.7 150.1 165.7
2 8 2082008 l'Antiga Esquerra de l'Eixample 122.8 122.6 125.9 121.3 119.2 125.1
2 9 2092008 la Nova Esquerra de l'Eixample 116.6 114.3 115.2 107.7 105.9 108.6
2 10 2102008 Sant Antoni 102.9 99.5 95.4 95.9 94.8 102.5
3 11 3112008 el Poble Sec - Parc Montjuic 70.8 68.7 66.6 73.0 80.7 71.0
3 12 3122008 la Marina del Prat Vermell - Zona Franca 77.2 74.2 61.9 53.0 45.9 59.1
3 13 3132008 la Marina de Port 77.4 75.6 74.4 70.8 67.4 70.9
3 14 3142008 la Font de la Guatlla 91.7 87.2 82.4 74.6 69.7 77.8
3 15 3152008 Hostafrancs 82.5 81.7 77.9 76.1 72.1 77.2
3 16 3162008 la Bordeta 80.8 77.4 73.4 71.1 72.9 71.4
3 17 3172008 Sants - Badal 84.5 81.4 78.5 77.1 74.3 76.6
3 18 3182008 Sants 87.1 85.3 84.4 86.4 85.2 82.6
4 19 4192008 les Corts 131.7 128.9 131.7 126.9 129.6 124.8
4 20 4202008 la Maternitat i Sant Ramon 129.8 128.1 125.3 110.6 109.3 118.7
4 21 4212008 Pedralbes 194.7 198.3 208.4 246.0 240.7 243.9
5 22 5222008 Vallvidrera - el Tibidabo i les Planes 165.6 172.2 161.9 165.9 177.5 177.8
5 23 5232008 Sarria 172.4 176.1 177.8 180.7 189.8 196.1
5 24 5242008 les Tres Torres 214.7 222.6 225.8 216.4 215.0 224.0
5 25 5252008 Sant Gervasi - la Bonanova 177.5 184.5 189.5 190.7 187.9 189.6
5 26 5262008 Sant Gervasi - Galvany 187.1 195.1 201.1 177.7 176.0 195.6
5 27 5272008 el Putxet i el Farro 149.1 147.7 150.5 138.0 138.2 142.2
6 28 6282008 Vallcarca i els Penitents 111.9 111.9 104.9 114.4 113.7 103.9
6 29 6292008 el Coll 90.2 89.7 89.0 97.3 92.9 83.1
6 30 6302008 la Salut 111.0 110.1 111.7 109.8 117.4 113.5
6 31 6312008 la Vila de Gracia 100.7 98.8 102.8 106.4 102.6 109.5
6 32 6322008 el Camp d'en Grassot i Gracia Nova 102.6 101.7 100.0 98.2 98.6 101.0
7 33 7332008 el Baix Guinardo 96.4 92.8 94.9 89.9 85.3 83.6
7 34 7342008 Can Baro 83.7 81.9 75.3 74.4 81.4 74.2
7 35 7352008 el Guinardo 92.2 87.8 82.5 85.8 89.8 86.4
7 36 7362008 la Font d'en Fargues 107.7 107.7 104.4 97.0 107.5 108.6
7 37 7372008 el Carmel 69.3 64.9 65.8 62.4 58.5 54.4
7 38 7382008 la Teixonera 73.2 73.1 69.5 69.0 71.3 69.0
7 39 7392008 Sant Genis dels Agudells 86.8 80.5 81.4 81.2 79.6 74.8
7 40 7402008 Montbau 88.6 80.0 82.2 71.1 76.4 71.5
7 41 7412008 la Vall d'Hebron 98.0 98.0 93.0 89.1 90.3 87.7
7 42 7422008 la Clota 90.5 94.6 81.4 79.5 78.5 85.1
7 43 7432008 Horta 87.5 82.1 78.2 78.2 80.0 83.1
8 44 8442008 Vilapicina i la Torre Llobeta 81.7 80.1 80.4 72.3 71.7 71.1
8 45 8452008 Porta 74.2 70.2 70.7 63.9 60.5 61.3
8 46 8462008 el Turo de la Peira 65.0 57.8 54.0 58.6 56.4 51.6
8 47 8472008 Can Peguera 52.8 43.3 38.4 52.7 53.1 53.1
8 48 8482008 la Guineueta 82.0 76.9 71.5 58.9 56.1 54.5
8 49 8492008 Canyelles 75.4 70.9 75.4 70.2 61.1 57.0
8 50 8502008 les Roquetes 60.3 55.0 53.3 53.8 52.8 50.4
8 51 8512008 Verdun 61.9 57.2 55.0 53.3 49.5 55.6
8 52 8522008 la Prosperitat 72.5 66.7 61.5 61.3 60.0 56.3
8 53 8532008 la Trinitat Nova 52.5 51.5 45.8 40.3 38.9 38.5
8 54 8542008 Torre Baro 62.1 65.6 56.9 54.5 52.4 44.7
8 55 8552008 Ciutat Meridiana 58.8 53.9 49.7 39.9 37.5 43.2
8 56 8562008 Vallbona 59.6 61.2 48.2 53.2 52.6 41.7
9 57 9572008 la Trinitat Vella 76.4 69.9 58.1 49.4 52.2 53.5
9 58 9582008 Baro de Viver 49.9 44.3 39.4 50.8 52.4 61.9
9 59 9592008 el Bon Pastor 64.8 57.1 51.8 63.0 67.3 71.8
9 60 9602008 Sant Andreu 84.1 82.1 78.6 78.0 77.6 79.3
9 61 9612008 la Sagrera 85.3 81.2 80.4 76.7 72.9 74.3
9 62 9622008 el Congres i els Indians 83.6 78.6 76.0 72.9 72.3 73.7
9 63 9632008 Navas 91.0 86.9 81.4 74.8 77.0 75.4
10 64 10642008 el Camp de l'Arpa del Clot 92.4 89.2 84.6 82.3 81.2 76.5
10 65 10652008 el Clot 89.0 85.5 82.8 80.0 78.2 76.9
10 66 10662008 el Parc i la Llacuna del Poblenou 106.2 103.1 97.3 90.9 88.9 93.7
10 67 10672008 la Vila Olimpica del Poblenou 133.3 141.1 134.9 146.0 146.6 151.6
10 68 10682008 el Poblenou 93.6 86.5 86.3 89.2 89.8 89.6
10 69 10692008 Diagonal Mar i el Front Maritim del Poblenou 104.4 107.9 106.8 122.3 127.4 150.1
10 70 10702008 el Besos i el Maresme 61.1 53.7 53.6 52.9 52.4 53.0
10 71 10712008 Proven�als del Poblenou 85.1 82.4 77.1 84.3 80.4 76.1
10 72 10722008 Sant Marti de Proven�als 80.3 76.6 74.9 65.0 63.5 66.2
10 73 10732008 la Verneda i la Pau 74.3 67.8 68.4 61.8 56.8 56.1
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiple Lines - BCN Family Income Index</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
h2 {
font-size: 14px;
font-weight: bold;
margin: 0;
}
p {
font-size: 14px;
margin-top: 16px;
max-width: 600px;
margin: 0px;
}
svg {
background-color: white;
}
circle:hover {
fill: orange;
}
.key {
font-size: 12px;
margin: 8px;
}
g.districte path {
fill: "none";
stroke: red;
stroke-width: 3;
opacity: .6;
}
g.districte path:hover {
fill: "none";
stroke: darkred;
stroke-width: 5;
opacity: .9;
}
g.highlight path {
stroke: teal;
stroke-width: 2.5;
opacity: .6;
}
g.highlight path:hover {
stroke: teal;
stroke-width: 5;
opacity: .9;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
stroke-width: 1;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.leyenda1 {
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
fill: teal;
}
.leyenda2 {
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
fill: red;
}
</style>
</head>
<body>
<h1>The rich neighborhoods, now, they are more rich</h1>
<h2>The Barcelona Family Income index by neighborhoods during the crisis, 2008-2013</h2>
<br>
<p>As we can see, the economic crisis has increased the differences between the poor neighborhoods and the rich ones; we can say 'the rich, now, they are more rich'.</p>
<p>Please enjoy comparing the evolution of neighborhoods from districts 5 and 8.</p>
<br>
<p class="key">Source: <a href="http://opendata.bcn.cat/opendata/es">OpenDataBCN</a>. (Index RFD Barcelona = 100) -- --<a href="javascript:location.reload()" class="key">Click here to change the district</a> </p>
<script type="text/javascript">
//Dimensions and padding
var w = 600;
var h = 600;
var padding = [ 20, 10, 50, 60 ]; //Top, right, bottom, left
//Set up date formatting and years
var dateFormat = d3.time.format("%Y");
//Set up scales
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(6)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//Configure line generator
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.year));
})
.y(function(d) {
return yScale(+d.valor);
});
//Create the empty SVG image
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load data
d3.csv("BCN_family_Income_2008_2013.csv", function(data) {
//Data is loaded in, but we need to restructure it.
//Note that this is an array of objects. Each object
//contains two values, 'country' and 'emissions'.
//The 'emissions' value is itself an array, containing
//more objects, each one holding 'year' and 'amount' values.
//New array with all the years, for referencing later
var years = ["2008", "2009", "2010", "2011", "2012", "2013"];
//Create a new, empty array to hold our restructured dataset
var dataset = [];
//Loop once for each row in data
for (var i = 0; i < data.length; i++) {
//Create new object with this country's name and empty array
dataset[i] = {
nomBarri: data[i].Barri,
familyIndex: [],
Districte: data[i].Districte
};
//Loop through all the years
for (var j = 0; j < years.length; j++) {
// If value is not empty
if (data[i][years[j]]) {
//Add a new object to the emissions data array
//for this country
dataset[i].familyIndex.push({
year: years[j],
valor: data[i][years[j]],
millora: +data[i][years[j]] - +data[i][years[0]]
});
}
}
};
//Uncomment to log the original data to the console
//console.log(data);
//Uncomment to log the newly restructured dataset to the console
//console.log(dataset);
//console.log(dataset[0].Districte);
// console.log(dataset[i].familyIndex[5].valor);
// }
//Set scale domains
xScale.domain([
d3.min(years, function(d) {
return dateFormat.parse(d);
}),
d3.max(years, function(d) {
return dateFormat.parse(d);
})
]);
yScale.domain([
d3.max(dataset, function(d) {
return d3.max(d.familyIndex, function(d) {
return +d.valor;
});
}),
0
]);
//Make a group for each district and put the color green or red
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.attr("id", function(d) {
return d.Districte;
})
.classed("districte", function(d) {
if ( d.Districte == QueDistrito ) {
return true;
} else {
return false;
}
})
.classed("highlight", function(d) {
if (d.Districte == QueDistrito && d.familyIndex[5].millora > 0) {
return true;
} else {
return false;
}
});
//Append a title with the District name (so we get easy tooltips)
groups.append("title")
.text(function(d) {
return d.nomBarri + ", Districte " + d.Districte;
});
//Within each group, create a new line/path,
//binding just the index data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.familyIndex ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2)
.attr("opacity", .1);
//Leyendas de ejes
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis)
.append("text")
.attr("x", w - 80)
.attr("y", -6)
.style("text-anchor", "end")
.text("Years");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3]) + ",0)")
.call(yAxis)
.append("text")
.attr("x", 10)
.attr("y", 30)
.text("Index RFD Barcelona = 100");
//Leyendas
svg.append("text")
.attr("x",padding[3]+20)
.attr("y",h-padding[2] -20)
.text("Index 2013 > Index 2008")
.attr("class","leyenda1");
svg.append("text")
.attr("x",padding[3]+20)
.attr("y",h-padding[2] -5)
.text("Index 2013 < Index 2008")
.attr("class","leyenda2");
svg.append("text")
.attr("x",padding[3]+20)
.attr("y",h-padding[2] -38)
.text("Destacados los barrios del distrito " + QueDistrito)
.attr("class","key");
});
var QueDistrito = prompt("Choose a District (1-10):");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment