Skip to content

Instantly share code, notes, and snippets.

@Qbelil

Qbelil/BCN_Demographics_perc_2013_family_Income.csv

Last active August 29, 2015 14:20
Show Gist options
  • Save Qbelil/63d0ba0355f0fa8c05a3 to your computer and use it in GitHub Desktop.
Save Qbelil/63d0ba0355f0fa8c05a3 to your computer and use it in GitHub Desktop.
Download ZIP
Exercise Module 5
Raw
BCN_Demographics_perc_2013_family_Income.csv
Any Districte Codibarri Ordre Barri total_pob anys_0a14 anys_0a14_perc anys_15a24 anys_15a24_perc anys_25a64 anys_25a64_perc anys_65_i_mes anys_65_i_mes_perc Renda_familiar
2013 1 1 1012013 el Raval 49622 6108 12.31 5208 10.50 32087 64.66 6219 12.53 60.3
2013 1 2 1022013 el Barri Gotic 16325 1376 8.43 1368 8.38 11192 68.56 2389 14.63 103.6
2013 1 3 1032013 la Barceloneta 15570 1464 9.40 1347 8.65 9657 62.02 3102 19.92 82.1
2013 1 4 1042013 Sant Pere - Santa Caterina i la Ribera 22817 2217 9.72 1884 8.26 15190 66.57 3526 15.45 91.2
2013 2 5 2052013 el Fort Pienc 31752 3697 11.64 2692 8.48 18707 58.92 6656 20.96 99.0
2013 2 6 2062013 la Sagrada Familia 51718 5338 10.32 4217 8.15 30681 59.32 11482 22.20 97.5
2013 2 7 2072013 la Dreta de l'Eixample 43433 5141 11.84 3616 8.33 25308 58.27 9368 21.57 165.7
2013 2 8 2082013 l'Antiga Esquerra de l'Eixample 41842 4521 10.80 3316 7.93 24793 59.25 9212 22.02 125.1
2013 2 9 2092013 la Nova Esquerra de l'Eixample 57816 6121 10.59 4984 8.62 33853 58.55 12858 22.24 108.6
2013 2 10 2102013 Sant Antoni 38290 3973 10.38 3038 7.93 22532 58.85 8747 22.84 102.5
2013 3 11 3112013 el Poble Sec - Parc Montjuic 41042 4721 11.50 3472 8.46 25644 62.48 7205 17.56 71.0
2013 3 12 3122013 la Marina del Prat Vermell - Zona Franca 1138 147 12.92 125 10.98 636 55.89 230 20.21 59.1
2013 3 13 3132013 la Marina de Port 30098 4290 14.25 3079 10.23 16889 56.11 5840 19.40 70.9
2013 3 14 3142013 la Font de la Guatlla 10294 1103 10.71 864 8.39 6096 59.22 2231 21.67 77.8
2013 3 15 3152013 Hostafrancs 15892 1718 10.81 1346 8.47 9836 61.89 2992 18.83 77.2
2013 3 16 3162013 la Bordeta 18446 2081 11.28 1631 8.84 10841 58.77 3893 21.10 71.4
2013 3 17 3172013 Sants - Badal 24339 2637 10.83 2128 8.74 14572 59.87 5002 20.55 76.6
2013 3 18 3182013 Sants 41104 4565 11.11 3443 8.38 24409 59.38 8687 21.13 82.6
2013 4 19 4192013 les Corts 46135 5312 11.51 4079 8.84 25713 55.73 11031 23.91 124.8
2013 4 20 4202013 la Maternitat i Sant Ramon 23653 2738 11.58 2057 8.70 13076 55.28 5782 24.45 118.7
2013 4 21 4212013 Pedralbes 11782 1779 15.10 1252 10.63 5920 50.25 2831 24.03 243.9
2013 5 22 5222013 Vallvidrera - el Tibidabo i les Planes 4491 866 19.28 441 9.82 2493 55.51 691 15.39 177.8
2013 5 23 5232013 Sarria 24587 4424 17.99 2506 10.19 12562 51.09 5095 20.72 196.1
2013 5 24 5242013 les Tres Torres 16140 2834 17.56 2012 12.47 7980 49.44 3314 20.53 224.0
2013 5 25 5252013 Sant Gervasi - la Bonanova 25234 3977 15.76 2679 10.62 13049 51.71 5529 21.91 189.6
2013 5 26 5262013 Sant Gervasi - Galvany 46620 6923 14.85 4754 10.20 24256 52.03 10687 22.92 195.6
2013 5 27 5272013 el Putxet i el Farro 28862 4053 14.04 2684 9.30 16168 56.02 5957 20.64 142.2
2013 6 28 6282013 Vallcarca i els Penitents 15479 2092 13.52 1267 8.19 8637 55.80 3483 22.50 103.9
2013 6 29 6292013 el Coll 7169 933 13.01 622 8.68 4197 58.54 1417 19.77 83.1
2013 6 30 6302013 la Salut 13208 1595 12.08 1161 8.79 7324 55.45 3128 23.68 113.5
2013 6 31 6312013 la Vila de Gracia 50714 5661 11.16 3413 6.73 31569 62.25 10071 19.86 109.5
2013 6 32 6322013 el Camp d'en Grassot i Gracia Nova 34406 3920 11.39 2779 8.08 19860 57.72 7847 22.81 101.0
2013 7 33 7332013 el Baix Guinardo 25673 2795 10.89 2138 8.33 14434 56.22 6306 24.56 83.6
2013 7 34 7342013 Can Baro 8916 1090 12.23 784 8.79 5016 56.26 2026 22.72 74.2
2013 7 35 7352013 el Guinardo 35792 4368 12.20 2940 8.21 20378 56.93 8106 22.65 86.4
2013 7 36 7362013 la Font d'en Fargues 9482 1391 14.67 808 8.52 5153 54.35 2130 22.46 108.6
2013 7 37 7372013 el Carmel 31847 4215 13.24 2755 8.65 17888 56.17 6989 21.95 54.4
2013 7 38 7382013 la Teixonera 11589 1479 12.76 1022 8.82 6639 57.29 2449 21.13 69.0
2013 7 39 7392013 Sant Genis dels Agudells 6914 819 11.85 560 8.10 3615 52.29 1920 27.77 74.8
2013 7 40 7402013 Montbau 5134 603 11.75 378 7.36 2471 48.13 1682 32.76 71.5
2013 7 41 7412013 la Vall d'Hebron 5543 662 11.94 491 8.86 2968 53.55 1422 25.65 87.7
2013 7 42 7422013 la Clota 503 72 14.31 42 8.35 281 55.86 108 21.47 85.1
2013 7 43 7432013 Horta 26547 3163 11.91 2241 8.44 14475 54.53 6668 25.12 83.1
2013 8 44 8442013 Vilapicina i la Torre Llobeta 25527 3036 11.89 2197 8.61 14098 55.23 6196 24.27 71.1
2013 8 45 8452013 Porta 24427 2873 11.76 1889 7.73 13350 54.65 6315 25.85 61.3
2013 8 46 8462013 el Turo de la Peira 15307 2011 13.14 1417 9.26 8061 52.66 3818 24.94 51.6
2013 8 47 8472013 Can Peguera 2272 303 13.34 242 10.65 1170 51.50 557 24.52 53.1
2013 8 48 8482013 la Guineueta 15110 1836 12.15 1185 7.84 7764 51.38 4325 28.62 54.5
2013 8 49 8492013 Canyelles 7097 826 11.64 644 9.07 3978 56.05 1649 23.24 57.0
2013 8 50 8502013 les Roquetes 15836 2375 15.00 1614 10.19 9053 57.17 2794 17.64 50.4
2013 8 51 8512013 Verdun 12296 1575 12.81 1044 8.49 6809 55.38 2868 23.32 55.6
2013 8 52 8522013 la Prosperitat 26320 3367 12.79 2166 8.23 14133 53.70 6654 25.28 56.3
2013 8 53 8532013 la Trinitat Nova 7483 1087 14.53 762 10.18 4161 55.61 1473 19.68 38.5
2013 8 54 8542013 Torre Baro 2205 373 16.92 264 11.97 1235 56.01 333 15.10 44.7
2013 8 55 8552013 Ciutat Meridiana 10527 1715 16.29 1173 11.14 5818 55.27 1821 17.30 43.2
2013 8 56 8562013 Vallbona 1330 234 17.59 114 8.57 737 55.41 245 18.42 41.7
2013 9 57 9572013 la Trinitat Vella 10418 1731 16.62 1194 11.46 6023 57.81 1470 14.11 53.5
2013 9 58 9582013 Baro de Viver 2438 410 16.82 274 11.24 1346 55.21 408 16.74 61.9
2013 9 59 9592013 el Bon Pastor 12760 2219 17.39 1077 8.44 7194 56.38 2270 17.79 71.8
2013 9 60 9602013 Sant Andreu 56285 7419 13.18 4576 8.13 32937 58.52 11353 20.17 79.3
2013 9 61 9612013 la Sagrera 28827 3348 11.61 2531 8.78 16681 57.87 6267 21.74 74.3
2013 9 62 9622013 el Congres i els Indians 14020 1755 12.52 1176 8.39 7637 54.47 3452 24.62 73.7
2013 9 63 9632013 Navas 21791 2543 11.67 1892 8.68 12219 56.07 5137 23.57 75.4
2013 10 64 10642013 el Camp de l'Arpa del Clot 38025 4128 10.86 3037 7.99 22328 58.72 8532 22.44 76.5
2013 10 65 10652013 el Clot 27154 3485 12.83 2476 9.12 16326 60.12 4867 17.92 76.9
2013 10 66 10662013 el Parc i la Llacuna del Poblenou 14515 1681 11.58 1255 8.65 8893 61.27 2686 18.50 93.7
2013 10 67 10672013 la Vila Olimpica del Poblenou 9367 1667 17.80 1071 11.43 5665 60.48 964 10.29 151.6
2013 10 68 10682013 el Poblenou 33176 5262 15.86 2382 7.18 19929 60.07 5603 16.89 89.6
2013 10 69 10692013 Diagonal Mar i el Front Maritim del Poblenou 13124 2549 19.42 731 5.57 7965 60.69 1879 14.32 150.1
2013 10 70 10702013 el Besos i el Maresme 23184 3189 13.76 2373 10.24 13320 57.45 4302 18.56 53.0
2013 10 71 10712013 Provenals del Poblenou 20160 2728 13.53 1915 9.50 11997 59.51 3520 17.46 76.1
2013 10 72 10722013 Sant Marti de Provenals 26040 3126 12.00 2062 7.92 14075 54.05 6777 26.03 66.2
2013 10 73 10732013 la Verneda i la Pau 29111 3532 12.13 2545 8.74 15549 53.41 7485 25.71 56.1
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exercise Module 5 -Scatterplot</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: Ghostwhite;
font-family: Helvetica bold, Arial bold, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
.key {
font-size: 12px;
margin: 10px 0 0 0;
}
svg {
background-color: Ghostwhite;
}
circle:hover {
fill: #339933;
opacity: 0.5;
}
.axis path,
.axis line {
fill: none;
stroke: gray;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 10px;
}
.y.axis path,
.y.axis line {
opacity: 1;
}
</style>
</head>
<body>
<h1>Barcelona family income 2013</h1>
<p>The family income in Barcelona by neighborhoods vs. the percentage of population between 25 to 64 years old</a></p>
<p class="key">Source: <a href="http://opendata.bcn.cat/opendata/es">OpenDataBCN</a> and own calculations. (Index RFD Barcelona = 100)</p>
</br>
<script>
var w = 600;
var h = 500;
var padding = [ 20, 30, 30, 100 ]; //Top, right, bottom, left
var paddingaxis = [ -10, 0 ]; //Top, bottom
var xScale = d3.scale.linear()
.range([ padding[3], w - padding[1] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
var xAxistop = d3.svg.axis() // top function axis
.scale(xScale)
.orient("top");
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(function(d) {
return d + "%";
});
var yAxisright = d3.svg.axis()
.scale(yScale)
.orient("right")
.tickFormat(function(d) {
return d + "%";
});
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("BCN_Demographics_perc_2013_family_Income.csv", function(data) {
/* això carrega les dades a la consola del navegador
console.log(data);
console.log(data.map(function(d) { return d.anys_25a64_perc; } ));
*/
data.sort(function(a, b) {
return d3.ascending(+a.Ordre, +b.Ordre);
});
xScale.domain([ 0,
d3.max(data, function(d) {
return +d.Renda_familiar;
}) +10
]);
yScale.domain([ d3.max(data, function(d) {
return +d.anys_25a64_perc;
}) +1
, d3.min(data, function(d) {
return +d.anys_25a64_perc;
}) -1
]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", function(d) {
return xScale(d.Renda_familiar)
})
.attr("cy", 0)
.attr("r", 0.1)
.attr("fill", "red")
.append("title")
.text(function(d) {
return d.Barri + " (" + d.Codibarri + ") " + " del Districte " + d.Districte + " té una renda familiar de " + d.Renda_familiar + " % i la franja de 25 a 64 anys és el " + d.anys_25a64_perc + "%";
});
// transitions
circles
.sort(function(a, b) {
return d3.ascending(+a.anys_25a64_perc, +b.anys_25a64_perc);
})
.transition()
.duration(3000)
.delay(function(d, i) {
return i * 50;
})
.attr("r",15)
.attr("cy", function(d) {
return yScale(d.anys_25a64_perc);
})
.attr("fill","steelblue")
.attr("opacity", 0.3);
// ejes
// hori es para desplazar el eje derecho
var hori = d3.max(data, function(d) {
return xScale(d.Renda_familiar)
}) +19 ;
svg.append("g") // Axis on the top of the chart
.attr("class", "x axis")
.attr("transform", "translate(0," + (paddingaxis[0] + padding[2]) + ")")
.call(xAxistop);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - paddingaxis[1] - padding[2]) + ")")
.call(xAxis)
.append("text")
.attr("x", w - 80)
.attr("y", -6)
.style("text-anchor", "end")
.text("Index RFD Barcelona = 100");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -25)
.attr("y", 7)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("% of population between 25 to 64 years old");
svg.append("g") // Axis on the right of the chart
.attr("class", "y axis")
.attr("transform", "translate(" + hori + ",0)")
.call(yAxisright);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment