Skip to content

Instantly share code, notes, and snippets.

@Qbelil

Qbelil/BCN_Demographics_2013_family_Income.csv

Created May 1, 2015 20:31
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save Qbelil/b268e66018e1962012b8 to your computer and use it in GitHub Desktop.
Download ZIP
Exercise Module 4
Raw
BCN_Demographics_2013_family_Income.csv
Any Districte Codibarri Ordre Barri 0-14_anys 15-24_anys 25-64_anys 65_anys_i_mes Renda_familiar
2013 01 01 01012013 el Raval 6108 5208 32087 6219 60.3
2013 01 02 01022013 el Barri Gotic 1376 1368 11192 2389 103.6
2013 01 03 01032013 la Barceloneta 1464 1347 9657 3102 82.1
2013 01 04 01042013 Sant Pere - Santa Caterina i la Ribera 2217 1884 15190 3526 91.2
2013 02 05 02052013 el Fort Pienc 3697 2692 18707 6656 99.0
2013 02 06 02062013 la Sagrada Familia 5338 4217 30681 11482 97.5
2013 02 07 02072013 la Dreta de l'Eixample 5141 3616 25308 9368 165.7
2013 02 08 02082013 l'Antiga Esquerra de l'Eixample 4521 3316 24793 9212 125.1
2013 02 09 02092013 la Nova Esquerra de l'Eixample 6121 4984 33853 12858 108.6
2013 02 10 02102013 Sant Antoni 3973 3038 22532 8747 102.5
2013 03 11 03112013 el Poble Sec - Parc Montjuic 4721 3472 25644 7205 71.0
2013 03 12 03122013 la Marina del Prat Vermell - Zona Franca 147 125 636 230 59.1
2013 03 13 03132013 la Marina de Port 4290 3079 16889 5840 70.9
2013 03 14 03142013 la Font de la Guatlla 1103 864 6096 2231 77.8
2013 03 15 03152013 Hostafrancs 1718 1346 9836 2992 77.2
2013 03 16 03162013 la Bordeta 2081 1631 10841 3893 71.4
2013 03 17 03172013 Sants - Badal 2637 2128 14572 5002 76.6
2013 03 18 03182013 Sants 4565 3443 24409 8687 82.6
2013 04 19 04192013 les Corts 5312 4079 25713 11031 124.8
2013 04 20 04202013 la Maternitat i Sant Ramon 2738 2057 13076 5782 118.7
2013 04 21 04212013 Pedralbes 1779 1252 5920 2831 243.9
2013 05 22 05222013 Vallvidrera - el Tibidabo i les Planes 866 441 2493 691 177.8
2013 05 23 05232013 Sarria 4424 2506 12562 5095 196.1
2013 05 24 05242013 les Tres Torres 2834 2012 7980 3314 224.0
2013 05 25 05252013 Sant Gervasi - la Bonanova 3977 2679 13049 5529 189.6
2013 05 26 05262013 Sant Gervasi - Galvany 6923 4754 24256 10687 195.6
2013 05 27 05272013 el Putxet i el Farro 4053 2684 16168 5957 142.2
2013 06 28 06282013 Vallcarca i els Penitents 2092 1267 8637 3483 103.9
2013 06 29 06292013 el Coll 933 622 4197 1417 83.1
2013 06 30 06302013 la Salut 1595 1161 7324 3128 113.5
2013 06 31 06312013 la Vila de Gracia 5661 3413 31569 10071 109.5
2013 06 32 06322013 el Camp d'en Grassot i Gracia Nova 3920 2779 19860 7847 101.0
2013 07 33 07332013 el Baix Guinardo 2795 2138 14434 6306 83.6
2013 07 34 07342013 Can Baro 1090 784 5016 2026 74.2
2013 07 35 07352013 el Guinardo 4368 2940 20378 8106 86.4
2013 07 36 07362013 la Font d'en Fargues 1391 808 5153 2130 108.6
2013 07 37 07372013 el Carmel 4215 2755 17888 6989 54.4
2013 07 38 07382013 la Teixonera 1479 1022 6639 2449 69.0
2013 07 39 07392013 Sant Genis dels Agudells 819 560 3615 1920 74.8
2013 07 40 07402013 Montbau 603 378 2471 1682 71.5
2013 07 41 07412013 la Vall d'Hebron 662 491 2968 1422 87.7
2013 07 42 07422013 la Clota 72 42 281 108 85.1
2013 07 43 07432013 Horta 3163 2241 14475 6668 83.1
2013 08 44 08442013 Vilapicina i la Torre Llobeta 3036 2197 14098 6196 71.1
2013 08 45 08452013 Porta 2873 1889 13350 6315 61.3
2013 08 46 08462013 el Turo de la Peira 2011 1417 8061 3818 51.6
2013 08 47 08472013 Can Peguera 303 242 1170 557 53.1
2013 08 48 08482013 la Guineueta 1836 1185 7764 4325 54.5
2013 08 49 08492013 Canyelles 826 644 3978 1649 57.0
2013 08 50 08502013 les Roquetes 2375 1614 9053 2794 50.4
2013 08 51 08512013 Verdun 1575 1044 6809 2868 55.6
2013 08 52 08522013 la Prosperitat 3367 2166 14133 6654 56.3
2013 08 53 08532013 la Trinitat Nova 1087 762 4161 1473 38.5
2013 08 54 08542013 Torre Baro 373 264 1235 333 44.7
2013 08 55 08552013 Ciutat Meridiana 1715 1173 5818 1821 43.2
2013 08 56 08562013 Vallbona 234 114 737 245 41.7
2013 09 57 09572013 la Trinitat Vella 1731 1194 6023 1470 53.5
2013 09 58 09582013 Baro de Viver 410 274 1346 408 61.9
2013 09 59 09592013 el Bon Pastor 2219 1077 7194 2270 71.8
2013 09 60 09602013 Sant Andreu 7419 4576 32937 11353 79.3
2013 09 61 09612013 la Sagrera 3348 2531 16681 6267 74.3
2013 09 62 09622013 el Congres i els Indians 1755 1176 7637 3452 73.7
2013 09 63 09632013 Navas 2543 1892 12219 5137 75.4
2013 10 64 10642013 el Camp de l'Arpa del Clot 4128 3037 22328 8532 76.5
2013 10 65 10652013 el Clot 3485 2476 16326 4867 76.9
2013 10 66 10662013 el Parc i la Llacuna del Poblenou 1681 1255 8893 2686 93.7
2013 10 67 10672013 la Vila Olimpica del Poblenou 1667 1071 5665 964 151.6
2013 10 68 10682013 el Poblenou 5262 2382 19929 5603 89.6
2013 10 69 10692013 Diagonal Mar i el Front Maritim del Poblenou 2549 731 7965 1879 150.1
2013 10 70 10702013 el Besos i el Maresme 3189 2373 13320 4302 53.0
2013 10 71 10712013 Proven�als del Poblenou 2728 1915 11997 3520 76.1
2013 10 72 10722013 Sant Marti de Proven�als 3126 2062 14075 6777 66.2
2013 10 73 10732013 la Verneda i la Pau 3532 2545 15549 7485 56.1
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exercise Module 4</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: 30px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
.key {
font-size: 12px;
margin: 10px 0 0 0;
}
svg {
background-color: Ghostwhite;
}
rect:hover {
fill: #339933;
}
.axis path,
.axis line {
fill: none;
stroke: #000000;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 10px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
form {width:125px;height:60px;border:1px solid #ccc;padding:10px;}
</style>
</head>
<body>
<h1>Barcelona family income by neighborhoods</h1>
<p>The 2013 family income in Barcelona neighborhoods </a></p>
<p class="key">Source: <a href="http://opendata.bcn.cat/opendata/es">OpenDataBCN</a>. The number after the name of the neighborhood is the district number. (Index RFD Barcelona = 100)</p>
<script>
var w = 680;
var h = 1000;
var padding = [ 20, 30, 30, 245 ]; //Top, right, bottom, left
var paddingaxis = [ 20, 30 ]; //Top, bottom
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.10);
var xAxistop = d3.svg.axis() // top function axis
.scale(widthScale)
.orient("top");
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("BCN_Demographics_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.Barri; } ));
*/
data.sort(function(a, b) {
return d3.ascending(a.Ordre, b.Ordre);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.Renda_familiar;
}) ]);
heightScale.domain(data.map(function(d) { return (d.Barri + ", " + d.Districte); } ));
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.Barri + ", " + d.Districte);
})
.attr("width", function(d) {
return widthScale(d.Renda_familiar);
})
.attr("height", heightScale.rangeBand())
.attr("fill", "steelblue")
.append("title")
.text(function(d) {
return d.Any + ", " + d.Barri + " (" + d.Codibarri + ") " + " del Districte " + d.Districte + " té una renda familiar de " + d.Renda_familiar + " % respecte la mitjana de Barcelona";
});
// Data text at the bottom of the bars
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d) {
return d.Renda_familiar;
})
.attr("x", function(d) {
return widthScale(d.Renda_familiar) + padding[3] + 5;
})
.attr("y", function(d) {
return heightScale(d.Barri + ", " + d.Districte) + 9;
})
.attr("font-family", "sans-serif")
.attr("font-size", "9px")
.attr("fill", "Lightgray");
// Axis on the top of the chart
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (paddingaxis[0] + padding[2]) + ")")
.call(xAxistop);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - paddingaxis[1] - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment