26 | A brief journey into the evolution of adult education around the world
27 |
28 |
29 | by Carla Solis Uehara and Luis Eduardo San Martin
30 |
31 |
32 |
33 |
34 |
35 |
The spotlight of education has usually been put on children's education. Nevertheless, the ones that are currently part of the workforce and delivering the productive needs of the economy are the current adult population. How well suited and prepared is this workforce?
36 |
37 |
Education is the pilar for building the skills we will need in life. Although we really don't know yet what the future demands for skills will be, the basic set of skills will always come first. The world is currently in an education crisis, where going to school is not the same as learning. This is true for children who are curently in the school, but moreso, for adults who are part of the workforce and have, supposedly, consolidated their skills by then. This project aims to overview the education trends that have been achieved by the countries around the world, from 1950 to 2010. We will look at the evolution and the major gaps that are still missing. For this purpose, adult population is hereafter defined as population aged 25 or more. All the data we used come from the Barro-Lee Educational Attainment Dataset.
38 |
39 |
40 |
Education levels in adult population
41 |
In 1950, more than 50% of the world's adult population did not even start primary education, and less than 15% of them had an education level greater than primary. 60 years after, the panorama has changed: More than 60% of the world's adult population has at least started secondary. But is this enough? Tertiary education (also known as higher education) has increased only to mean a little more than 10% of the total population. More important, as we will look afterwards, is that the distribution of attainment is different depending on the place.
42 |
43 |
44 |
45 |
46 |
47 |
There have been many significative changes like the shift in demographic trends: Adult population has almost tripled from 1950 to 2010: This means going from 1.3 billion people to almost 4 bilion. Proportionately, this also means much more educated people than before. Humanity had never seen this size of educated people ever. Does this necessarily mean that there will be enough accumulated human capital to solve the world's problems? Does this mean more agency and rights for more people?
48 |
49 |
50 |
51 |
52 |
53 |
The evolution of countries and regions
54 |
All countries have univocally augmented their mean year of education. The biggest changes happened since the decade of 1980, especially in countries with large populations such as China and Russia. Regarding regions, East Asia and the Pacific, and Central Europe and Central Asia have had the biggest improvements. Countries from Sub-Saharan Africa, on the other hand, have only had modest increases compared to their initial situations, with the notable exception of Botswana.
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
Remaining gaps
72 |
Despite this progress, there is still much to be done to close the remaining gaps in educational attainment. As noted previously, the advancement in education during the period 1960-2010 for countries of Sub-Saharan Africa has been slim. Even in 2010, there is a cluster of countries in the Sahel region with more than 60% of the population with no educational attainments. In terms of secondary education completion, the gap is universal access is largely significant: most countries still have more than 60% of the population with incomplete secondary education.
73 |
Education levels by gender also exhibit a pressing gap that has largely remained constant in Sub-Saharan Africa, North Africa and the Middle East, and South Asia; where most countries have a female-male gap of more than 15 percentage points (pp) in population with no education by gender. Importantly, the gender gap in secondary education completion has increased almost universally from 1960-2010, even in countries considered advanced economies like Canada or France. This stylized fact brings to light a complex issue countries face when seeking to achieve increased educational attainments: universal access to improved education levels usually benefits males first.
74 |
75 |
76 |
77 |
78 | 1950
79 |
80 |
81 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
Visit our Github Painting: El camión, by Frida Kahlo.
101 |
102 |
103 |
104 |
105 |
106 |
107 |
--------------------------------------------------------------------------------
/data/years_education.csv:
--------------------------------------------------------------------------------
1 | ,country,1950,1955,1960,1965,1970,1975,1980,1985,1990,1995,2000,2005,2010,region_code,1950_p,1955_p,1960_p,1965_p,1970_p,1975_p,1980_p,1985_p,1990_p,1995_p,2000_p,2005_p,2010_p
2 | 0,Afghanistan,0.13,0.18,0.22,0.29,0.35,0.62,0.78,1.16,1.49,1.86,2.16,2.6,3.23,South Asia,3122,3448,3831,4272,4785,5380,5618,5049,5206,7229,8171,10242,12284
3 | 1,Albania,2.31,2.59,2.32,2.91,3.31,3.98,4.95,6.75,7.83,7.82,9.32,9.69,9.85,Europe and Central Asia,512,574,650,747,854,964,1142,1330,1571,1608,1622,1704,1832
4 | 2,Algeria,0.9,0.9,0.72,0.64,0.78,1.18,1.72,2.51,3.38,4.17,4.84,5.16,5.98,Middle East and North Africa,3609,3882,4097,4215,4684,5424,6549,7703,9245,11101,13184,15689,18599
5 | 3,Argentina,4.6,4.99,5.32,5.6,5.92,6.43,6.72,7.45,7.88,8.34,8.55,9.26,9.48,Latin America and the Caribbean,8768,9874,10900,11848,12805,13954,14990,16122,17296,18533,20007,21905,23710
6 | 4,Armenia,7.36,7.48,7.61,8.1,8.34,8.75,9.19,9.58,10.08,10.44,10.81,10.8,10.87,Europe and Central Asia,593,711,832,1000,1101,1245,1440,1684,1907,1797,1745,1786,1879
7 | 5,Australia,7.87,8.05,8.26,8.53,9.35,10.04,10.79,11.02,11.2,11.31,11.26,11.54,11.77,Advanced Economies,4837,5327,5742,6242,6834,7494,8382,9297,10445,11351,12409,13384,14424
8 | 6,Austria,6.42,6.18,5.94,6.93,7.63,7.98,8.2,8.41,8.64,8.87,9.04,9.48,9.89,Advanced Economies,4406,4459,4453,4529,4636,4719,4759,4901,5208,5617,5806,5949,6119
9 | 7,Bahrain,0.91,1.0,1.1,1.31,1.88,2.71,4.12,5.25,6.1,6.66,7.12,6.87,6.79,Middle East and North Africa,44,52,60,62,76,93,153,215,257,311,370,421,470
10 | 8,Bangladesh,0.9,0.9,0.91,1.08,1.16,1.18,1.97,2.4,2.84,3.29,3.69,4.19,4.91,South Asia,18480,19546,20882,22451,24392,26670,30251,34737,40320,46854,54386,62769,72630
11 | 9,Barbados,4.54,4.73,4.93,6.15,7.83,7.11,6.29,7.35,8.08,8.71,8.68,9.19,9.32,Latin America and the Caribbean,104,108,108,105,103,117,121,131,146,155,169,176,187
12 | 10,Belgium,6.52,6.86,6.97,7.0,7.19,7.52,8.05,8.58,9.1,9.78,10.2,10.67,10.78,Advanced Economies,5554,5742,5884,5933,5935,6097,6297,6488,6768,7023,7265,7428,7569
13 | 11,Belize,6.71,6.96,7.07,7.44,7.22,7.47,7.08,7.35,8.22,9.13,10.1,10.84,11.59,Latin America and the Caribbean,29,31,37,38,40,42,47,57,65,80,94,113,135
14 | 12,Benin,0.33,0.4,0.47,0.61,0.63,0.64,0.65,1.09,1.62,2.15,2.57,2.91,3.3,Sub-Saharan Africa,964,939,940,975,1036,1146,1314,1535,1776,2150,2497,2977,3595
15 | 13,Bolivia,1.8,2.08,2.52,2.78,3.27,3.65,4.47,5.36,6.41,7.11,7.44,7.69,7.77,Latin America and the Caribbean,1066,1183,1304,1449,1603,1799,2046,2316,2625,2986,3432,3903,4437
16 | 14,Botswana,1.28,1.29,1.3,1.32,1.34,2.21,2.29,3.9,5.52,6.71,7.61,8.28,8.87,Sub-Saharan Africa,163,178,188,207,231,268,322,395,481,580,666,670,668
17 | 15,Brazil,1.96,2.18,2.49,2.77,3.09,2.82,2.93,3.59,4.04,4.84,5.78,6.75,7.66,Latin America and the Caribbean,21122,24687,28077,32264,36766,42543,49764,57977,67758,77485,87733,99139,111561
18 | 16,Brunei,1.72,1.99,2.29,2.64,3.46,4.28,6.1,6.63,7.51,8.06,8.29,8.48,8.77,East Asia and the Pacific,22,28,34,41,52,64,77,97,120,143,168,196,227
19 | 17,Bulgaria,3.12,3.42,4.23,4.3,5.5,6.16,7.21,8.17,8.44,9.05,9.35,10.45,11.45,Europe and Central Asia,3937,4266,4646,4933,5183,5480,5648,5842,5710,5619,5595,5603,5563
20 | 18,Burundi,0.23,0.27,0.38,0.53,0.67,0.87,1.09,1.32,1.44,1.59,1.84,2.28,2.68,Sub-Saharan Africa,984,1039,1108,1176,1256,1239,1415,1736,2026,2111,2061,2449,3118
21 | 19,Cambodia,0.24,0.45,0.67,0.92,1.24,1.64,2.11,2.52,2.69,2.95,3.22,3.52,4.1,East Asia and the Pacific,1669,1858,2079,2339,2626,2713,2530,2964,3605,4356,5063,5448,6693
22 | 20,Cameroon,0.5,0.61,0.82,0.98,1.29,1.56,2.12,2.79,3.47,4.15,4.84,5.47,5.96,Sub-Saharan Africa,1860,2014,2193,2401,2652,2940,3303,3691,4213,4806,5433,6091,6901
23 | 21,Canada,7.39,7.75,8.06,8.32,8.66,9.18,9.84,9.83,10.28,10.63,10.98,12.22,12.56,Advanced Economies,7472,8420,9294,9956,11130,12547,14099,15822,17906,19341,20702,22247,23793
24 | 22,CAR,0.33,0.36,0.41,0.47,0.57,0.75,1.02,1.49,2.06,2.43,2.86,3.26,3.57,Sub-Saharan Africa,604,632,667,717,780,828,916,1048,1145,1284,1390,1452,1561
25 | 23,Chile,4.69,4.89,5.0,5.3,5.8,6.0,6.4,7.23,8.02,8.4,8.75,9.41,9.71,Latin America and the Caribbean,2746,3012,3301,3609,4011,4461,5039,5828,6762,7713,8639,9455,10369
26 | 24,China,0.65,1.09,1.55,2.22,2.77,3.48,4.16,4.78,5.34,6.22,7.0,7.34,7.53,East Asia and the Pacific,267376,278134,296041,315190,342431,383913,449196,508243,584120,676038,759352,816727,872099
27 | 25,Hong Kong,3.76,3.97,4.43,4.74,5.15,5.68,6.73,7.64,8.55,8.75,8.8,10.71,11.02,East Asia and the Pacific,929,1202,1461,1617,1706,2096,2612,3127,3582,4086,4601,5108,5578
28 | 26,Macao,3.06,3.19,3.26,3.46,3.62,4.19,4.67,5.06,5.46,5.89,6.52,7.13,8.09,East Asia and the Pacific,96,88,80,85,95,107,131,168,219,251,282,306,338
29 | 27,Colombia,2.24,2.52,2.78,3.08,3.38,3.86,4.26,4.79,5.46,6.09,6.5,6.69,8.45,Latin America and the Caribbean,4885,5459,6120,6858,7787,9058,10693,12675,15088,17741,20307,23116,25968
30 | 28,Congo,0.4,0.42,0.58,0.71,1.15,1.52,2.45,3.24,4.39,5.06,5.44,5.62,5.67,Sub-Saharan Africa,333,365,403,447,503,573,650,747,862,995,1159,1322,1502
31 | 29,Costa Rica,3.51,3.55,3.69,3.85,3.62,4.49,5.31,6.04,6.72,7.17,7.46,7.95,7.84,Latin America and the Caribbean,428,471,522,585,659,763,926,1139,1388,1651,1928,2243,2580
32 | 30,Cote dIvoire,0.43,0.48,0.53,0.63,0.76,0.94,1.29,1.69,2.04,2.5,3.25,3.74,4.22,Sub-Saharan Africa,935,1115,1343,1618,1998,2437,3079,3838,4567,5253,5986,6571,7502
33 | 31,Croatia,5.45,5.84,6.12,6.45,6.74,7.41,7.85,8.32,8.68,9.31,9.88,10.58,11.42,Europe and Central Asia,2103,2212,2329,2421,2502,2640,2785,2907,2983,3165,3117,3245,3327
34 | 32,Cuba,3.44,3.58,3.85,4.32,4.83,5.59,6.02,6.99,7.74,8.39,8.8,9.18,9.65,Latin America and the Caribbean,2763,3028,3301,3567,3861,4278,4709,5110,5866,6608,7272,7530,7784
35 | 33,Cyprus,3.1,3.7,4.37,4.74,5.08,5.94,6.72,7.69,8.7,9.21,9.68,8.99,11.11,Middle East and North Africa,236,261,268,276,314,326,346,372,403,441,487,540,592
36 | 34,Czech Republic,8.07,8.22,8.08,8.88,9.56,9.85,10.23,10.46,10.88,12.07,12.91,13.08,13.16,Europe and Central Asia,5436,5650,5802,5832,6014,6243,6484,6506,6574,6697,7017,7379,7553
37 | 35,DRC,0.32,0.41,0.51,0.65,0.82,1.02,1.28,1.65,2.25,2.92,3.29,3.48,3.61,Sub-Saharan Africa,4568,5048,5692,6459,7453,8564,9833,11175,12864,15061,16542,18862,21866
38 | 36,Denmark,5.39,4.19,4.56,5.01,5.79,6.45,7.31,8.02,8.96,9.91,10.73,11.19,11.53,Advanced Economies,2560,2664,2740,2835,2991,3172,3288,3381,3500,3622,3738,3812,3842
39 | 37,Dominican Rep.,2.4,2.41,2.41,2.62,3.04,3.45,3.97,4.51,5.14,5.78,6.31,6.69,7.46,Latin America and the Caribbean,823,962,1136,1330,1555,1812,2054,2531,3004,3515,4035,4548,5072
40 | 38,Ecuador,2.38,2.62,2.97,3.44,3.87,4.27,5.39,5.85,6.44,6.71,6.76,7.02,7.44,Latin America and the Caribbean,1450,1568,1737,1953,2204,2518,2973,3517,4174,4914,5613,6376,7228
41 | 39,Egypt,0.49,0.55,0.69,0.79,1.03,1.3,2.06,2.97,3.51,4.05,4.75,5.61,6.55,Middle East and North Africa,8956,10028,11190,12475,13777,15254,17196,19598,22600,25590,29173,33753,39193
42 | 40,El Salvador,1.4,1.56,1.67,1.95,2.28,2.63,3.05,3.4,3.72,4.58,5.73,6.67,7.66,Latin America and the Caribbean,731,817,928,1055,1240,1441,1623,1766,1961,2276,2712,3222,3680
43 | 41,Estonia,6.11,6.36,6.6,6.96,7.25,7.88,8.32,8.84,9.31,10.49,11.74,12.08,12.48,Europe and Central Asia,625,682,751,811,860,900,933,971,1015,953,922,916,933
44 | 42,Fiji,2.96,3.28,3.85,4.35,4.68,5.11,5.95,6.75,8.37,9.79,9.61,9.17,9.58,East Asia and the Pacific,98,111,130,155,184,217,247,287,313,344,375,415,457
45 | 43,Finland,3.82,3.93,4.04,4.69,5.4,6.33,7.39,7.33,7.46,8.63,9.32,9.8,10.21,Advanced Economies,2170,2304,2407,2493,2599,2854,3044,3222,3372,3504,3577,3685,3792
46 | 44,France,4.31,4.43,4.1,4.49,4.96,5.47,5.96,6.61,7.33,8.54,9.53,10.05,10.64,Advanced Economies,25976,26838,27972,29211,29853,31622,33349,34983,36731,39018,40546,41792,43012
47 | 45,Gabon,0.43,0.44,0.52,0.66,1.0,1.38,2.36,3.25,4.32,5.22,6.15,6.92,7.57,Sub-Saharan Africa,260,260,261,262,271,283,309,338,380,427,487,544,607
48 | 46,Gambia,0.33,0.35,0.38,0.39,0.43,0.46,0.68,0.95,1.24,1.8,1.99,2.36,2.82,Sub-Saharan Africa,117,125,145,169,192,226,261,303,368,444,531,621,715
49 | 47,Germany,6.71,7.47,7.53,7.68,7.71,7.58,7.63,7.55,8.77,9.66,10.51,11.97,12.69,Advanced Economies,42715,44310,45828,48618,50008,50352,51187,52402,55794,59169,60327,61065,62067
50 | 48,Ghana,0.61,0.66,0.71,1.17,1.8,2.4,3.08,4.02,4.91,5.66,6.13,6.41,6.76,Sub-Saharan Africa,1872,2199,2578,2970,3272,3737,4103,4832,5610,6524,7569,8758,10208
51 | 49,Greece,3.8,5.04,6.86,6.07,6.04,6.27,6.55,7.27,7.89,8.18,8.57,9.77,10.26,Advanced Economies,3894,4327,4759,5059,5311,5543,6020,6317,6663,7244,7722,8152,8455
52 | 50,Guatemala,1.22,1.25,1.25,1.27,1.35,1.55,2.36,2.72,3.05,3.41,3.74,3.58,4.3,Latin America and the Caribbean,1112,1286,1487,1694,1924,2221,2506,2796,3126,3502,3974,4603,5399
53 | 51,Guyana,4.05,4.42,4.58,4.79,4.96,5.37,5.82,6.31,6.77,7.22,7.72,8.07,8.5,Latin America and the Caribbean,173,187,203,225,233,254,275,287,300,322,354,387,416
54 | 52,Haiti,0.56,0.59,0.66,0.77,0.9,1.17,1.44,2.2,2.69,3.2,3.75,4.29,4.74,Latin America and the Caribbean,1496,1563,1641,1727,1837,1962,2121,2319,2539,2724,2962,3324,3821
55 | 53,Honduras,1.61,1.67,1.7,1.73,1.91,2.08,2.88,3.71,4.27,4.71,5.08,5.45,5.5,Latin America and the Caribbean,487,559,657,771,863,983,1173,1400,1681,2018,2410,2868,3403
56 | 54,Hungary,6.95,7.12,7.26,7.42,7.82,8.24,8.69,8.81,8.68,10.37,11.24,11.71,12.14,Europe and Central Asia,5440,5817,6022,6243,6464,6677,6927,6961,6789,6823,6989,7221,7278
57 | 55,Iceland,5.4,5.64,5.82,6.14,6.51,6.95,7.47,7.96,8.46,8.93,9.45,10.04,10.59,Advanced Economies,75,81,89,94,99,110,121,134,150,161,173,187,198
58 | 56,India,0.92,0.99,0.94,1.15,1.24,1.52,1.87,2.39,2.96,3.51,4.41,4.82,5.39,South Asia,149127,165769,185861,207231,230189,256651,289666,328487,373706,424889,481574,538366,604417
59 | 57,Indonesia,0.74,0.91,1.11,1.62,2.26,2.58,3.09,3.23,3.28,4.21,4.75,5.88,7.26,East Asia and the Pacific,32442,35276,39014,43458,48183,53103,59820,68799,78871,91037,103854,117391,131196
60 | 58,Iran,0.34,0.46,0.6,0.85,1.17,1.63,2.3,3.21,4.22,5.26,6.22,7.03,8.17,Middle East and North Africa,7384,7884,8538,9331,10408,12179,14167,17554,20833,23668,27203,31934,38791
61 | 59,Iraq,0.18,0.21,0.32,0.4,0.65,1.02,1.61,2.27,3.19,4.17,5.04,5.84,6.38,Middle East and North Africa,2193,2442,2682,3010,3425,4038,4704,5491,6426,7752,9349,11189,13200
62 | 60,Ireland,6.09,6.29,6.54,6.87,7.01,7.63,8.4,9.25,9.73,10.4,10.84,11.73,12.2,Advanced Economies,1666,1630,1559,1535,1565,1651,1770,1871,1953,2104,2317,2693,2970
63 | 61,Israel,7.26,7.38,7.44,7.75,8.27,9.07,9.93,10.41,11.03,11.4,11.8,12.05,12.76,Middle East and North Africa,641,869,1037,1232,1362,1615,1868,2075,2308,2842,3324,3772,4195
64 | 62,Italy,4.04,4.33,4.61,4.88,5.17,5.68,6.19,6.69,7.29,7.93,8.58,9.0,9.54,Advanced Economies,26679,28327,29966,31592,32643,34128,35253,36242,38898,40718,42782,44026,44510
65 | 63,Jamaica,3.41,3.52,3.64,3.99,4.43,4.74,5.26,5.83,6.47,7.48,8.62,9.1,9.67,Latin America and the Caribbean,636,689,679,697,700,726,830,938,1052,1160,1267,1320,1391
66 | 64,Japan,5.91,6.51,6.97,6.94,7.08,7.9,8.71,9.25,9.61,10.18,10.73,11.17,11.52,Advanced Economies,37585,42508,47918,53289,59429,67253,73123,77682,82020,86996,92337,96046,98160
67 | 65,Jordan,0.93,1.21,1.42,1.78,2.25,2.77,3.06,4.07,5.25,6.71,7.72,8.49,9.21,Middle East and North Africa,174,235,320,391,571,673,696,875,1021,1558,1978,2444,2900
68 | 66,Kazakhstan,2.23,2.7,3.07,3.93,4.46,5.35,6.3,7.28,8.05,9.27,10.48,11.74,11.42,Europe and Central Asia,3083,3780,4511,5553,5943,6346,7021,7752,8547,8431,8233,8478,8869
69 | 67,Kenya,0.91,1.07,1.21,1.28,1.45,1.86,2.49,3.09,3.72,4.54,5.26,5.82,6.19,Sub-Saharan Africa,2510,2752,3057,3361,3679,4209,5013,6041,7315,8900,10335,11744,13946
70 | 68,Kuwait,1.18,1.66,2.1,2.63,2.9,3.02,4.28,5.27,5.51,5.69,6.07,5.97,6.26,Middle East and North Africa,64,83,123,193,286,383,575,785,987,932,1316,1619,1879
71 | 69,Kyrgyzstan,3.57,3.93,4.24,4.85,5.32,6.03,6.9,7.84,8.56,9.1,9.73,10.23,11.08,Europe and Central Asia,876,963,1044,1189,1270,1337,1519,1741,1948,2004,2258,2510,2808
72 | 70,Laos,0.71,0.83,0.97,1.17,1.4,1.72,2.14,2.52,3.09,3.57,3.9,4.23,4.57,East Asia and the Pacific,676,754,841,941,1046,1163,1235,1373,1540,1742,1998,2301,2659
73 | 71,Latvia,3.69,3.97,4.29,4.74,5.15,5.82,6.33,6.92,7.56,8.89,9.47,10.15,10.48,Europe and Central Asia,1119,1193,1313,1427,1520,1570,1613,1665,1761,1645,1609,1610,1623
74 | 72,Lesotho,2.14,2.4,2.66,2.78,3.18,3.41,3.69,4.12,4.66,5.13,5.67,6.85,5.63,Sub-Saharan Africa,302,315,328,350,374,412,458,523,565,599,637,641,653
75 | 73,Liberia,0.57,0.57,0.57,0.77,0.99,1.17,1.54,2.03,2.6,3.1,3.46,3.78,4.09,Sub-Saharan Africa,325,358,397,442,496,563,644,740,718,717,1014,1075,1229
76 | 74,Libya,0.39,0.42,0.54,0.63,1.0,1.33,2.23,3.19,3.81,4.69,5.58,6.44,7.31,Middle East and North Africa,407,432,514,621,722,865,1090,1347,1574,1887,2292,2774,3369
77 | 75,Lithuania,2.83,3.47,3.94,4.61,5.19,5.98,6.66,7.4,8.25,9.03,9.86,10.69,11.05,Europe and Central Asia,1386,1453,1552,1709,1836,1936,2037,2152,2310,2321,2312,2317,2359
78 | 76,Luxembourg,2.68,3.45,4.15,5.01,5.85,7.88,8.22,8.58,8.92,9.32,9.68,10.3,11.22,Advanced Economies,188,201,205,215,217,230,238,247,261,277,303,326,348
79 | 77,Malawi,0.78,0.82,0.9,0.94,1.2,1.44,1.75,2.08,2.45,2.71,3.05,3.39,4.29,Sub-Saharan Africa,1026,1119,1236,1383,1560,1800,2099,2424,3269,3553,3870,4230,4655
80 | 78,Malaysia,1.79,2.03,2.26,2.63,3.02,3.72,4.41,5.48,6.53,7.56,8.16,8.94,9.75,East Asia and the Pacific,2516,2741,3029,3464,3919,4602,5426,6387,7916,9289,10910,12541,14355
81 | 79,Maldives,2.92,3.13,3.42,3.56,4.04,4.22,4.47,4.65,4.04,3.51,3.05,3.07,4.38,South Asia,40,42,43,46,48,52,60,67,74,90,103,122,150
82 | 80,Mali,0.09,0.1,0.13,0.15,0.2,0.23,0.38,0.54,0.72,0.88,1.01,1.16,1.5,Sub-Saharan Africa,1201,1370,1564,1741,1956,2207,2392,2607,2866,3206,3629,4253,4984
83 | 81,Malta,3.09,3.39,3.9,4.52,5.26,5.85,6.38,7.27,8.03,8.71,9.28,9.92,10.33,Middle East and North Africa,148,143,151,147,159,175,190,210,224,239,254,270,287
84 | 82,Mauritania,1.17,1.27,1.36,1.45,1.52,1.7,1.79,1.99,2.23,2.61,2.97,3.35,3.77,Sub-Saharan Africa,302,339,381,432,487,544,601,670,744,846,982,1161,1352
85 | 83,Mauritius,2.36,2.49,2.66,3.3,3.71,4.11,4.44,4.83,5.7,6.26,6.17,7.22,8.19,Sub-Saharan Africa,176,200,228,260,300,354,416,476,544,610,666,740,801
86 | 84,Mexico,2.17,2.18,2.33,2.54,2.89,3.33,3.92,4.8,5.56,6.48,7.11,7.89,8.33,Latin America and the Caribbean,11088,12212,13701,15464,17661,20283,23688,27857,32758,38773,46203,53573,60528
87 | 85,Mongolia,0.67,1.06,1.4,2.03,2.78,4.88,5.84,6.74,7.69,7.81,8.19,8.62,9.28,East Asia and the Pacific,299,328,366,411,466,535,622,725,835,960,1090,1253,1441
88 | 86,Morocco,0.24,0.3,0.34,0.47,0.57,0.86,1.17,1.62,2.11,2.66,3.26,3.79,4.24,Middle East and North Africa,3266,3664,4177,4891,5468,5824,7189,8460,9833,11374,13199,15211,17442
89 | 87,Mozambique,0.2,0.4,0.58,0.75,0.88,0.83,0.73,0.83,0.83,0.8,0.91,1.11,1.24,Sub-Saharan Africa,2537,2734,2973,3261,3598,3994,4518,4830,4560,5660,6455,7072,7728
90 | 88,Myanmar,1.1,1.23,1.12,1.08,1.12,1.12,1.68,2.26,2.43,2.71,3.1,3.55,4.09,East Asia and the Pacific,7884,8505,9135,9822,10775,12044,13591,15354,17314,19681,22572,25691,28769
91 | 89,Namibia,2.51,2.81,3.04,3.16,3.41,3.8,4.26,4.86,5.59,5.67,5.56,5.95,6.22,Sub-Saharan Africa,206,222,243,270,298,333,352,386,500,595,706,760,811
92 | 90,Nepal,0.05,0.07,0.08,0.16,0.25,0.44,0.63,1.24,2.02,2.24,2.37,2.8,3.31,South Asia,3732,3917,4128,4410,4806,5305,5931,6633,7440,8457,9666,11101,12823
93 | 91,Netherlands,6.03,6.17,6.22,7.04,8.03,8.64,9.25,9.91,10.34,10.63,10.98,10.98,11.6,Advanced Economies,5539,5930,6318,6723,7185,7902,8533,9168,9884,10579,11109,11427,11711
94 | 92,New Zealand,8.95,9.3,9.57,9.88,10.69,11.33,11.31,11.52,11.54,11.59,11.6,11.65,11.3,Advanced Economies,1079,1182,1257,1341,1432,1604,1711,1876,2044,2275,2434,2579,2722
95 | 93,Nicaragua,1.53,1.68,1.93,2.25,2.65,2.88,3.21,3.63,4.09,4.56,5.08,5.46,6.0,Latin America and the Caribbean,429,485,549,628,720,836,992,1153,1315,1534,1790,2135,2579
96 | 94,Niger,0.31,0.34,0.39,0.4,0.41,0.43,0.46,0.55,0.69,0.88,1.1,1.3,1.45,Sub-Saharan Africa,965,1094,1218,1364,1534,1735,2006,2316,2689,3156,3727,4413,5226
97 | 95,Norway,7.54,7.48,7.47,7.84,8.27,8.44,8.83,9.67,10.47,10.8,11.21,12.07,11.8,Advanced Economies,2034,2133,2185,2228,2311,2442,2557,2673,2784,2920,3063,3153,3242
98 | 96,Pakistan,0.85,0.86,0.86,1.11,1.31,1.55,1.75,2.09,2.28,2.77,3.27,4.51,4.45,South Asia,15972,17484,19206,21206,23489,26316,30330,36153,42557,48068,55363,63733,74999
99 | 97,Panama,3.59,3.83,4.26,4.38,4.69,5.22,5.9,6.63,7.26,8.04,8.53,8.96,9.15,Latin America and the Caribbean,360,398,440,494,564,653,767,897,1056,1252,1464,1673,1884
100 | 98,Papua New Guinea,0.21,0.28,0.34,0.49,0.94,0.96,1.25,1.78,2.32,2.92,3.26,3.55,3.95,East Asia and the Pacific,746,760,797,807,935,1035,1177,1342,1541,1786,2070,2360,2710
101 | 99,Paraguay,2.55,2.82,3.11,3.37,3.74,4.09,4.64,5.26,5.73,6.11,5.87,6.86,7.24,Latin America and the Caribbean,648,681,712,772,846,935,1147,1355,1629,1913,2221,2584,3046
102 | 100,Peru,2.46,2.7,2.91,3.25,3.67,4.45,5.27,5.83,6.52,7.25,8.27,9.19,8.68,Latin America and the Caribbean,3026,3378,3820,4336,4923,5668,6597,7711,9016,10331,11849,13559,15352
103 | 101,Philippines,1.88,2.73,3.01,3.49,4.03,4.6,5.39,6.21,6.59,7.12,7.54,7.85,8.18,East Asia and the Pacific,7697,8466,9628,11079,12791,14792,17443,20285,23629,27480,31913,37032,42640
104 | 102,Poland,5.0,5.36,5.64,6.38,6.94,7.63,7.75,8.28,8.96,9.83,10.42,10.9,11.42,Europe and Central Asia,12748,14143,15539,16859,17544,18997,20833,22444,23222,23755,24658,25969,27345
105 | 103,Portugal,1.62,1.8,1.95,2.21,2.49,2.98,3.72,4.51,5.25,5.92,6.7,6.64,7.2,Advanced Economies,4361,4600,4829,4915,4742,5022,5506,5966,6324,6647,7078,7537,7869
106 | 104,Qatar,1.05,1.35,1.85,2.43,3.26,3.7,4.41,4.97,5.38,5.94,6.42,7.1,8.45,Middle East and North Africa,10,14,19,31,50,80,112,206,279,312,370,523,582
107 | 105,Republic of Korea,3.98,4.36,3.12,4.26,5.2,6.16,7.09,8.06,9.11,9.94,10.59,11.25,11.89,East Asia and the Pacific,7495,8584,9818,11282,12809,14462,16401,19973,23040,26171,29373,31973,34250
108 | 106,Moldova,2.35,2.74,3.17,3.98,4.59,5.46,6.44,7.34,8.09,8.67,9.11,9.57,10.66,Europe and Central Asia,1236,1387,1553,1732,1858,1980,2190,2381,2513,2500,2443,2337,2339
109 | 107,Reunion,2.83,2.74,2.64,2.28,2.63,3.16,3.92,4.74,5.48,6.13,6.66,7.09,7.51,Sub-Saharan Africa,105,117,129,143,171,186,208,250,296,349,397,440,480
110 | 108,Romania,3.95,4.11,4.69,5.07,6.05,7.04,7.72,8.41,9.05,9.62,10.02,10.35,10.81,Europe and Central Asia,8450,9457,10284,11140,11693,12305,13094,13713,13882,14251,14531,15030,15250
111 | 109,Russia,3.16,3.86,4.17,4.77,5.26,5.9,6.75,7.76,8.91,9.78,11.13,11.41,11.73,Europe and Central Asia,51679,59456,64687,71822,73671,77915,84003,89642,94242,95609,96420,97012,98495
112 | 110,Rwanda,0.2,0.29,0.36,0.54,0.69,0.96,1.21,1.51,1.76,1.97,2.27,2.81,3.48,Sub-Saharan Africa,741,853,982,1076,1252,1441,1656,1922,2227,1700,2524,2954,3551
113 | 111,Saudi Arabia,2.17,2.45,2.72,2.96,3.19,3.35,4.02,4.71,5.55,6.05,6.64,7.25,7.79,Middle East and North Africa,1267,1398,1557,1799,2123,2675,3567,4929,6519,7812,9082,10865,12696
114 | 112,Senegal,1.65,1.82,2.11,2.09,2.12,2.14,2.23,2.3,2.2,2.06,1.89,1.52,2.4,Sub-Saharan Africa,1087,1204,1340,1497,1687,1966,2131,2375,2726,3128,3600,4196,4969
115 | 113,Serbia,3.92,4.46,4.54,4.9,5.27,5.93,6.72,7.41,7.95,8.81,9.39,10.21,10.97,Europe and Central Asia,3634,4022,4414,4695,4914,5285,5756,6041,6297,6654,6827,7006,7215
116 | 114,Sierra Leone,0.41,0.43,0.46,0.53,0.58,0.73,0.96,1.25,1.58,1.96,2.3,2.68,3.06,Sub-Saharan Africa,815,878,948,1024,1117,1214,1320,1449,1630,1644,1759,2110,2314
117 | 115,Singapore,2.14,2.5,2.81,3.33,3.76,3.88,3.74,5.08,5.79,7.32,8.9,8.52,10.63,East Asia and the Pacific,426,528,644,729,820,980,1179,1499,1805,2203,2641,2930,3216
118 | 116,Slovakia,8.12,8.26,8.09,8.91,9.46,9.82,10.13,10.38,10.75,11.39,11.52,12.58,13.07,Europe and Central Asia,1871,2010,2181,2290,2460,2602,2836,2988,3130,3248,3426,3648,3837
119 | 117,Slovenia,5.67,6.13,6.12,6.94,7.59,8.33,8.97,9.92,10.91,11.23,11.57,11.72,12.13,Europe and Central Asia,800,849,902,944,977,1047,1119,1182,1238,1312,1374,1432,1478
120 | 118,South Africa,3.75,4.15,4.17,4.29,4.44,4.66,4.82,4.78,6.49,8.22,7.23,8.23,9.43,Sub-Saharan Africa,5880,6466,7157,7967,8803,9898,11285,13097,15130,18426,21095,22345,22855
121 | 119,Spain,3.47,3.45,3.72,4.08,4.34,5.13,5.74,6.13,6.52,7.69,8.89,10.16,10.3,Advanced Economies,15281,16438,17454,18277,19163,20169,21505,23073,25036,26786,28819,31730,33096
122 | 120,Sri Lanka,2.94,3.18,3.47,3.7,5.33,5.77,6.13,6.93,7.79,8.65,9.65,9.83,9.76,South Asia,3206,3574,3965,4442,5053,5802,6580,7481,8610,9751,10851,12028,13239
123 | 121,Sudan,0.23,0.29,0.38,0.47,0.59,0.7,0.9,1.09,1.5,1.97,2.44,2.93,3.13,Sub-Saharan Africa,3440,3814,4261,4778,5395,6239,7252,8497,9625,11110,12883,14745,17100
124 | 122,Swaziland,1.02,1.16,1.41,1.58,2.17,2.85,3.55,4.19,4.35,4.24,3.86,3.13,4.02,Sub-Saharan Africa,104,114,126,137,150,171,195,231,283,320,346,339,336
125 | 123,Sweden,6.44,6.71,7.2,7.57,7.96,9.02,9.62,10.05,10.54,10.95,11.42,12.09,11.89,Advanced Economies,4498,4659,4775,4894,5151,5398,5557,5722,5853,6071,6219,6344,6460
126 | 124,Switzerland,8.66,8.8,8.91,9.29,9.76,10.34,10.98,10.37,10.19,10.14,10.29,10.84,13.42,Advanced Economies,2915,3100,3272,3480,3763,3987,4102,4381,4723,4939,5086,5197,5309
127 | 125,Syria,0.61,0.74,0.86,1.12,1.36,1.83,2.47,3.26,3.97,4.48,4.58,5.54,6.25,Middle East and North Africa,1388,1518,1682,1884,2131,2418,2818,3363,4090,5021,6184,7654,9492
128 | 126,Taiwan,2.71,3.06,3.44,3.58,3.76,4.12,5.2,6.21,7.17,8.07,8.95,10.06,10.71,East Asia and the Pacific,2987,3445,4189,4993,5901,6775,8174,9686,11178,12492,13697,15056,15886
129 | 127,Tajikistan,3.07,3.62,4.15,5.05,5.63,6.61,7.73,8.73,9.57,10.56,11.11,11.14,10.9,Europe and Central Asia,680,806,910,1047,1137,1235,1424,1674,2000,2157,2325,2504,2858
130 | 128,Thailand,1.34,1.71,2.07,1.89,1.87,2.11,2.67,3.26,3.83,4.33,4.81,6.44,7.3,East Asia and the Pacific,7407,8543,9912,11521,13161,15224,18065,21439,25451,30362,34701,38044,41307
131 | 129,Togo,0.25,0.3,0.35,0.42,0.48,1.02,1.72,2.37,2.99,3.53,3.98,4.23,4.33,Sub-Saharan Africa,537,564,600,641,780,872,973,1164,1370,1568,1885,2203,2595
132 | 130,Tonga,6.2,6.37,6.47,6.59,6.78,6.82,7.24,7.58,8.3,9.14,9.08,9.23,10.71,East Asia and the Pacific,14,17,22,25,32,30,33,34,35,38,42,45,47
133 | 131,Trinidad and Tobago,4.61,5.01,5.19,5.49,5.7,6.37,6.98,7.54,7.94,8.54,9.17,9.78,10.37,Latin America and the Caribbean,275,300,333,347,368,408,462,535,588,641,696,755,827
134 | 132,Tunisia,0.48,0.53,0.64,0.73,1.0,1.31,2.02,2.62,3.43,4.13,4.9,5.75,6.58,Middle East and North Africa,1519,1611,1706,1796,1854,2055,2383,2867,3444,4078,4686,5385,6141
135 | 133,Turkey,0.99,1.24,1.49,1.88,2.02,2.29,2.87,3.97,4.53,4.81,5.54,6.06,6.56,Advanced Economies,8507,9908,11586,12906,14433,16166,18480,21631,25165,29092,33704,38334,43034
136 | 134,USA,8.13,8.5,8.9,9.82,10.61,11.4,11.94,12.14,12.32,12.69,12.93,13.13,13.42,Advanced Economies,91749,98278,103461,107682,114024,123638,136033,149824,162655,173286,183747,193809,204924
137 | 135,Uganda,0.79,0.92,1.03,0.98,1.05,1.43,1.82,2.27,2.77,3.38,3.86,4.43,5.42,Sub-Saharan Africa,1831,2070,2363,2705,3155,3598,4139,4791,5630,6364,7161,8410,10151
138 | 136,Ukraine,3.83,4.33,4.73,5.28,5.76,6.35,7.13,8.25,9.14,10.04,10.68,11.16,11.34,Europe and Central Asia,20153,22833,24395,27180,28529,29798,31329,32648,33736,33677,33037,32243,31760
139 | 137,United Arab Emirates,0.66,0.92,1.38,1.86,2.39,2.96,3.59,4.47,5.63,7.09,8.29,8.79,8.88,Middle East and North Africa,27,31,34,58,102,273,546,787,1033,1365,1940,2725,3174
140 | 138,United Kingdom,6.11,6.28,6.49,6.98,7.54,7.95,8.13,8.39,8.88,9.29,9.86,11.03,12.32,Advanced Economies,31916,32367,32720,33287,33474,34554,35330,36043,37978,39355,40348,41142,42166
141 | 139,United Republic of Tanzania,1.35,1.38,1.43,1.62,1.79,2.18,2.53,3.16,3.6,4.09,4.57,4.76,5.12,Sub-Saharan Africa,2664,3059,3523,4085,4764,5635,6570,7756,9176,10905,12299,13765,15601
142 | 140,Uruguay,4.07,4.28,4.56,4.73,5.24,5.61,6.25,6.86,7.13,7.32,7.94,7.88,8.11,Latin America and the Caribbean,1220,1318,1426,1517,1586,1605,1661,1735,1809,1882,1987,2106,2200
143 | 141,Venezuela,1.5,1.79,1.93,2.13,2.41,3.25,4.42,4.63,4.59,5.5,6.28,7.15,8.16,Latin America and the Caribbean,1924,2333,2787,3227,3775,4655,5783,6952,8376,9885,11443,13220,15136
144 | 142,Viet Nam,1.86,1.94,2.01,2.59,3.0,3.56,4.18,4.31,3.94,4.6,5.42,6.44,7.45,East Asia and the Pacific,13501,14352,15439,16267,17043,18071,19937,22984,26950,31431,36429,41908,47878
145 | 143,Yemen,0.01,0.01,0.01,0.01,0.01,0.0,0.05,0.12,0.29,0.65,1.2,1.86,2.6,Middle East and North Africa,1690,1755,1842,1952,1998,2054,2408,2909,3536,4841,5656,6754,8299
146 | 144,Zambia,1.35,1.61,1.83,2.16,2.84,2.95,3.36,4.04,4.68,6.04,5.88,6.32,6.6,Sub-Saharan Africa,876,987,1122,1286,1487,1737,2021,2400,2801,3138,3500,3757,4112
147 | 145,Zimbabwe,1.02,1.29,1.62,1.98,2.29,2.89,3.24,3.99,4.53,5.54,5.89,6.75,7.25,Sub-Saharan Africa,1072,1216,1374,1557,1770,1986,2295,2862,3549,4053,4334,4524,4940
148 |
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 |
2 | // if the data you are going to import is small, then you can import it using es6 import
3 | // import MY_DATA from './app/data/example.json'
4 | // (I tend to think it's best to use screaming snake case for imported json)
5 | // const domReady = require('domready');
6 |
7 | // domReady(() => {
8 | // // this is just one example of how to import data. there are lots of ways to do it!
9 | // fetch('./data/example.json')
10 | // .then(response => response.json())
11 | // .then(data => myVis(data))
12 | // .catch(e => {
13 | // console.log(e);
14 | // });
15 | // });
16 |
17 | // function myVis(data) {
18 | // // portrait
19 | // const width = 5000;
20 | // const height = (36 / 24) * width;
21 | // console.log(data, height);
22 | // console.log('Hi!');
23 | // // EXAMPLE FIRST FUNCTION
24 | // }
25 |
26 |
27 |
28 | function area_graph(dataset, max_val, subtitle, div_section) {
29 | // set the dimensions and margins of the graph
30 | var margin = {top: 60, right: 230, bottom: 50, left: 54},
31 | width = 800 - margin.left - margin.right,
32 | height = 450 - margin.top - margin.bottom;
33 |
34 | // append the svg object to the body of the page
35 | var svg = d3.select("#".concat(div_section))
36 | .append("svg")
37 | .attr("width", width + margin.left + margin.right)
38 | .attr("height", height + margin.top + margin.bottom)
39 | .append("g")
40 | .attr("transform",
41 | "translate(" + margin.left + "," + margin.top + ")");
42 |
43 | // Parse the Data
44 | d3.csv(dataset, function(data) {
45 |
46 |
47 |
48 | //////////
49 | // GENERAL //
50 | //////////
51 |
52 | // List of groups = header of the csv files
53 | var keys = data.columns.slice(1)
54 |
55 | // color palette
56 | var color = d3.scaleOrdinal()
57 | .domain(keys)
58 | .range(d3.schemeRdBu[4]);
59 |
60 | //stack the data?
61 | var stackedData = d3.stack()
62 | .keys(keys)
63 | (data)
64 |
65 | //Adds the title to my graph
66 | svg.append("text")
67 | .attr("x", 0)
68 | .attr("y", -60)
69 | .attr("dy", "0.71em")
70 | .attr("fill", "#000")
71 | .text("Education levels have improved around the world")
72 | .style("font", "23px avenir")
73 | .style("fill", "#000000");
74 |
75 | //Adds the subtitle to my graph
76 | svg.append("text")
77 | .attr("x", 0)
78 | .attr("y", -35)
79 | .attr("dy", "0.71em")
80 | .attr("fill", "#000")
81 | .text(subtitle)
82 | .style("font", "18px avenir")
83 | .style("fill", "#000000");
84 |
85 |
86 | //Adds the source at the bottom of the page
87 | svg.append("text")
88 | .attr("x", 0)
89 | .attr("y", 370)
90 | .attr("dy", "1em")
91 | .style("font", "12px avenir")
92 | .style("fill", "#000000")
93 | .text("Source: Barro-Lee datasets");
94 |
95 | //////////
96 | // AXIS //
97 | //////////
98 |
99 | // Add X axis
100 | var x = d3.scaleLinear()
101 | .domain(d3.extent(data, function(d) { return d.year; }))
102 | .range([ 0, width ]);
103 | var xAxis = svg.append("g")
104 | .attr("transform", "translate(0," + height + ")")
105 | .call(d3.axisBottom(x).ticks(5))
106 |
107 | // Add X axis label:
108 | svg.append("text")
109 | .attr("text-anchor", "end")
110 | .attr("x", width)
111 | .attr("y", height+40 )
112 | .text("year");
113 |
114 |
115 |
116 | // Add Y axis
117 | var y = d3.scaleLinear()
118 | .domain([0, max_val])
119 | .range([ height, 0 ]);
120 | svg.append("g")
121 | .call(d3.axisLeft(y).ticks(5))
122 |
123 |
124 |
125 | //////////
126 | // BRUSHING AND CHART //
127 | //////////
128 |
129 | // Add a clipPath: everything out of this area won't be drawn.
130 | var clip = svg.append("defs").append("svg:clipPath")
131 | .attr("id", "clip")
132 | .append("svg:rect")
133 | .attr("width", width )
134 | .attr("height", height )
135 | .attr("x", 0)
136 | .attr("y", 0);
137 |
138 | // Add brushing
139 | var brush = d3.brushX() // Add the brush feature using the d3.brush function
140 | .extent( [ [0,0], [width,height] ] ) // initialise the brush area: start at 0,0 and finishes at width,height: it means I select the whole graph area
141 | .on("end", updateChart) // Each time the brush selection changes, trigger the 'updateChart' function
142 |
143 | // Create the scatter variable: where both the circles and the brush take place
144 | var areaChart = svg.append('g')
145 | .attr("clip-path", "url(#clip)")
146 |
147 | // Area generator
148 | var area = d3.area()
149 | .x(function(d) { return x(d.data.year); })
150 | .y0(function(d) { return y(d[0]); })
151 | .y1(function(d) { return y(d[1]); })
152 |
153 | // var area = function(datum, boolean) {
154 | // return d3.area()
155 | // .y0(function(d) { return y(d[0]); })
156 | // .y1(function(d) { return y(d[1]); })
157 | // .x(function (d) { return boolean ? x(d.data.year) : 0; })
158 | // (datum);}
159 |
160 | // svg.append("path")
161 | // .data([data])
162 | // .attr("class", "area")
163 | // .attr("d", d => area(d, false))
164 | // .transition()
165 | // .duration(2000)
166 | // .attr("d", d => area(d,true));
167 |
168 | // Show the areas
169 | areaChart
170 | .selectAll("mylayers")
171 | .data(stackedData)
172 | .enter()
173 | .append("path")
174 | //.attr("class", function(d) { return "myArea " + d.key })
175 | .attr("class", div_section + "-" + "myArea")
176 | .attr("id", function(d) {
177 | if (d.key == "No Level") {
178 | return div_section + "-NoLevel" //taking out the blankspace
179 | } else {
180 | return div_section + "-" + d.key
181 | }
182 | })
183 | .style("fill", function(d) { return color(d.key); })
184 | .attr("d", area)
185 |
186 | // Add the brushing
187 | areaChart
188 | .append("g")
189 | .attr("class", "brush")
190 | .call(brush);
191 |
192 | var idleTimeout
193 | function idled() { idleTimeout = null; }
194 |
195 | // A function that update the chart for given boundaries
196 | function updateChart() {
197 |
198 | extent = d3.event.selection
199 |
200 | // If no selection, back to initial coordinate. Otherwise, update X axis domain
201 | if(!extent){
202 | if (!idleTimeout) return idleTimeout = setTimeout(idled, 350); // This allows to wait a little bit
203 | x.domain(d3.extent(data, function(d) { return d.year; }))
204 | }else{
205 | x.domain([ x.invert(extent[0]), x.invert(extent[1]) ])
206 | areaChart.select(".brush").call(brush.move, null) // This remove the grey brush area as soon as the selection has been done
207 | }
208 |
209 | // Update axis and area position
210 | xAxis.transition().duration(1000).call(d3.axisBottom(x).ticks(5))
211 | areaChart
212 | .selectAll("path")
213 | .transition().duration(1000)
214 | .attr("d", area)
215 | }
216 |
217 |
218 |
219 | //////////
220 | // HIGHLIGHT GROUP //
221 | //////////
222 |
223 | // What to do when one group is hovered
224 | var highlight = function(d){
225 | // reduce opacity of all groups
226 | d3.selectAll("." + div_section + "-" + "myArea").style("opacity", .1);
227 | // expect the one that is hovered
228 | if (d == "No Level") {
229 | divThis = "#" + div_section + "-NoLevel";
230 | } else {
231 | divThis = "#" + div_section + "-" + d;
232 | }
233 | d3.select(divThis).style("opacity", 1);
234 | }
235 |
236 |
237 | // And when it is not hovered anymore
238 | var noHighlight = function(d){
239 | d3.selectAll("." + div_section + "-" + "myArea").style("opacity", 1)
240 | }
241 |
242 | //////////
243 | // LEGEND //
244 | //////////
245 |
246 |
247 |
248 | // Add one dot in the legend for each name.
249 | var size = 20
250 | svg.selectAll("myrect")
251 | .data(keys)
252 | .enter()
253 | .append("rect")
254 | .attr("x", 600)
255 | .attr("y", function(d,i){ return 10 + i*(size+5)}) // 100 is where the first dot appears. 25 is the distance between dots
256 | .attr("width", size)
257 | .attr("height", size)
258 | .style("fill", function(d){ return color(d)})
259 | .on("mouseover", highlight)
260 | .on("mouseleave", noHighlight)
261 |
262 | // Add one dot in the legend for each name.
263 | svg.selectAll("mylabels")
264 | .data(keys)
265 | .enter()
266 | .append("text")
267 | .attr("x", 600 + size*1.2)
268 | .attr("y", function(d,i){ return 10 + i*(size+5) + (size/2)}) // 100 is where the first dot appears. 25 is the distance between dots
269 | .style("fill", function(d){ return color(d)})
270 | .text(function(d){ return d})
271 | .attr("text-anchor", "left")
272 | .style("alignment-baseline", "middle")
273 | .on("mouseover", highlight)
274 | .on("mouseleave", noHighlight)
275 |
276 | });
277 | }
278 |
279 | function scatterPlot(datafile, div_section){
280 | var margin = { top: 80, right: 220, bottom: 60, left: 180};
281 | var width = 1200 - margin.left - margin.right;
282 | var height = 600 - margin.top - margin.bottom;
283 |
284 |
285 | var svg = d3.select("#".concat(div_section))
286 | .append("svg")
287 | .attr("width", width + margin.left + margin.right)
288 | .attr("height", height + margin.top + margin.bottom)
289 | .append("g")
290 | .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
291 |
292 |
293 | var xscale = d3.scaleLinear()
294 | .domain([0,15])
295 | .range([0,width]);
296 |
297 | var yscale = d3.scaleLinear()
298 | .domain([0,15])
299 | .range([height,0]);
300 |
301 | var radius = d3.scaleSqrt()
302 | .range([2,7]);
303 |
304 | var xAxis = d3.axisBottom()
305 | .tickSize(-height)
306 | .scale(xscale);
307 |
308 | var yAxis = d3.axisLeft()
309 | .tickSize(-width)
310 | .scale(yscale)
311 |
312 | var color = d3.scaleOrdinal(d3.schemeCategory10);
313 |
314 | d3.csv(datafile, function(error, data) {
315 | // data pre-processing
316 | data.forEach(function(d) {
317 | d.y = +d["2010"];
318 | d.x = +d["1950"];
319 | d.r = +d["2010_p"];
320 | });
321 |
322 | data.sort(function(a,b) { return b.r - a.r; });
323 |
324 | // yscale.domain(d3.extent(data, function(d) {
325 | // return d.y;
326 | // })).nice();
327 |
328 | radius.domain(d3.extent(data, function(d) {
329 | return Math.sqrt(d.r)*10;
330 | })).nice();
331 |
332 | svg.append("g")
333 | .attr("transform", "translate(0," + height + ")")
334 | .attr("class", "x axis")
335 | .call(xAxis);
336 |
337 | svg.append("g")
338 | .attr("transform", "translate(0,0)")
339 | .attr("class", "y axis")
340 | .call(yAxis);
341 |
342 | var group = svg.selectAll("g.bubble")
343 | .data(data)
344 | .enter().append("g")
345 | .attr("class", "bubble")
346 | .attr("transform", function(d) {
347 | return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")"
348 | });
349 |
350 | var tooltip = d3.select("body").append("div")
351 | .attr("class", "tooltip")
352 | .style("opacity", 0);
353 |
354 | var tipMouseover = function(d) {
355 | // var color = scaleOrdinal(d.region_code);
356 | var html = d.country + " " +
357 | d['1950'] + " in 1950 " + " " +
358 | d['2010'] + " in 2010 "+ " " +
359 | d['2010_p'] + " (thous.) adult population 2010 "
360 |
361 | tooltip.html(html)
362 | .style("left", (d3.event.pageX + 15) + "px")
363 | .style("top", (d3.event.pageY - 28) + "px")
364 | .transition()
365 | .duration(200) // ms
366 | .style("opacity", .9) // started as 0!
367 |
368 | };
369 |
370 | // tooltip mouseout event handler
371 | var tipMouseout = function(d) {
372 | tooltip.transition()
373 | .duration(500) // ms
374 | .style("opacity", 0); // don't care about position!
375 | };
376 |
377 |
378 | group
379 | .append("circle")
380 | .attr("r", function(d) { return radius(d.r); })
381 | .style("fill", function(d) {
382 | return color(d["region_code"]);
383 | })
384 | .on("mouseover", tipMouseover)
385 | .on("mouseout", tipMouseout)
386 | .merge(group)
387 | .transition()
388 | .duration(3000);
389 |
390 | // group
391 | // .append("text")
392 | // .attr("x", function(d) { return radius(d.r); })
393 | // .attr("alignment-baseline", "middle");
394 | // .text(function(d) {
395 | // return d["country"];
396 | // });
397 |
398 | //Adds the title to my graph
399 | svg.append("text")
400 | .attr("x", 0)
401 | .attr("y", -60)
402 | .attr("dy", "0.71em")
403 | .attr("fill", "#000")
404 | .text("The years of education have dramatically improved throughout the years")
405 | .style("font", "23px avenir")
406 | .style("fill", "#000000");
407 |
408 | //Adds the subtitle to my graph
409 | svg.append("text")
410 | .attr("x", 0)
411 | .attr("y", -35)
412 | .attr("dy", "0.71em")
413 | .attr("fill", "#000")
414 | .text("Years of education")
415 | .style("font", "18px avenir")
416 | .style("fill", "#000000");
417 |
418 |
419 | //Adds the source at the bottom of the page
420 | svg.append("text")
421 | .attr("x", 0)
422 | .attr("y", 500)
423 | .attr("dy", "1em")
424 | .style("font", "12px avenir")
425 | .style("fill", "#000000")
426 | .text("Source: Barro-Lee datasets");
427 |
428 |
429 | svg.append("text")
430 | .attr("id", "changing_text")
431 | .attr("x", 6)
432 | .attr("y", -2)
433 | .attr("class", "labels")
434 | .text("Years of Education (2010)");
435 |
436 | svg.append("text")
437 | .attr("x", width-2)
438 | .attr("y", height-6)
439 | .attr("text-anchor", "end")
440 | .attr("class", "labels")
441 | .text("Years of Education (1950)");
442 |
443 | // add diagonal line
444 | svg.append("line")
445 | .attr("x1", xscale(0))
446 | .attr("y1", yscale(0))
447 | .attr("x2", xscale(15))
448 | .attr("y2", yscale(15))
449 | .attr("stroke-width", 2)
450 | .attr("stroke", "gray")
451 | .attr("stroke-dasharray", "2,5") //style of svg-line
452 | ;
453 |
454 | var buble_legend = svg.selectAll(".buble_legend")
455 | .data(color.domain())
456 | .enter().append("g")
457 | .attr("class", "buble_legend")
458 | .attr("transform", function(d, i) { return "translate(2," + i * 15 + ")"; });
459 |
460 | buble_legend.append("rect")
461 | .attr("x", width)
462 | .attr("width", 12)
463 | .attr("height", 12)
464 | .style("fill", color);
465 |
466 | buble_legend.append("text")
467 | .attr("x", width + 20)
468 | .attr("y", 6)
469 | .attr("dy", ".35em")
470 | .style("text-anchor", "start")
471 | .text(function(d) { return d; });
472 |
473 | buble_legend.on("mouseover", function(type) {
474 | d3.selectAll(".buble_legend")
475 | .style("opacity", 0.1);
476 | d3.select(this)
477 | .style("opacity", 1);
478 | d3.selectAll(".bubble")
479 | .style("opacity", 0.1)
480 | .filter(function(d) { return d["region_code"] == type; })
481 | .style("opacity", 1);
482 | })
483 | .on("mouseout", function(type) {
484 | d3.selectAll(".buble_legend")
485 | .style("opacity", 1);
486 | d3.selectAll(".bubble")
487 | .style("opacity", 1);
488 | });
489 |
490 |
491 | d3.select("#scatt_1").on("click", function() {
492 | group
493 | .transition()
494 | .attr("transform", function(d) {
495 | return "translate(" + xscale(d.x) + "," + yscale(d['1950']) + ")"
496 | })
497 | .attr("r", function(d) { return radius(d['1950_p']);
498 | });
499 | d3.select("#changing_text").remove()
500 | svg.append("text")
501 | .attr("id", "changing_text")
502 | .attr("x", 6)
503 | .attr("y", -2)
504 | .attr("class", "labels")
505 | .text("Years of Education (1950)");
506 |
507 | });
508 |
509 | d3.select("#scatt_2").on("click", function() {
510 | group
511 | .transition()
512 | .attr("transform", function(d) {
513 | return "translate(" + xscale(d.x) + "," + yscale(d['1960']) + ")"
514 | })
515 | .attr("r", function(d) { return radius(d['1960_p']);
516 | });
517 | d3.select("#changing_text").remove()
518 | svg.append("text")
519 | .attr("id", "changing_text")
520 | .attr("x", 6)
521 | .attr("y", -2)
522 | .attr("class", "labels")
523 | .text("Years of Education (1960)");
524 |
525 | });
526 |
527 | d3.select("#scatt_3").on("click", function() {
528 | group
529 | .transition()
530 | .attr("transform", function(d) {
531 | return "translate(" + xscale(d.x) + "," + yscale(d['1970']) + ")"
532 | })
533 | .attr("r", function(d) { return radius(d['1970_p']);
534 | });
535 | d3.select("#changing_text").remove()
536 | svg.append("text")
537 | .attr("id", "changing_text")
538 | .attr("x", 6)
539 | .attr("y", -2)
540 | .attr("class", "labels")
541 | .text("Years of Education (1970)");
542 |
543 | });
544 |
545 | d3.select("#scatt_4").on("click", function() {
546 | group
547 | .transition()
548 | .attr("transform", function(d) {
549 | return "translate(" + xscale(d.x) + "," + yscale(d['1980']) + ")"
550 | })
551 | .attr("r", function(d) { return radius(d['1980_p']);
552 | });
553 | d3.select("#changing_text").remove()
554 | svg.append("text")
555 | .attr("id", "changing_text")
556 | .attr("x", 6)
557 | .attr("y", -2)
558 | .attr("class", "labels")
559 | .text("Years of Education (1980)");
560 |
561 | });
562 |
563 | d3.select("#scatt_5").on("click", function() {
564 | group
565 | .transition()
566 | .attr("transform", function(d) {
567 | return "translate(" + xscale(d.x) + "," + yscale(d['1990']) + ")"
568 | })
569 | .attr("r", function(d) { return radius(d['1990_p']);
570 | });
571 | d3.select("#changing_text").remove()
572 | svg.append("text")
573 | .attr("id", "changing_text")
574 | .attr("x", 6)
575 | .attr("y", -2)
576 | .attr("class", "labels")
577 | .text("Years of Education (1990)");
578 |
579 | });
580 |
581 | d3.select("#scatt_6").on("click", function() {
582 | group
583 | .transition()
584 | .attr("transform", function(d) {
585 | return "translate(" + xscale(d.x) + "," + yscale(d['2000']) + ")"
586 | })
587 | .attr("r", function(d) { return radius(d['2000_p']);
588 | });
589 | d3.select("#changing_text").remove()
590 | svg.append("text")
591 | .attr("id", "changing_text")
592 | .attr("x", 6)
593 | .attr("y", -2)
594 | .attr("class", "labels")
595 | .text("Years of Education (2000)");
596 |
597 | });
598 |
599 | d3.select("#scatt_7").on("click", function() {
600 | group
601 | .transition()
602 | .attr("transform", function(d) {
603 | return "translate(" + xscale(d.x) + "," + yscale(d['2010']) + ")"
604 | })
605 | .attr("r", function(d) { return radius(d['2010_p']);
606 | });
607 | d3.select("#changing_text").remove()
608 | svg.append("text")
609 | .attr("id", "changing_text")
610 | .attr("x", 6)
611 | .attr("y", -2)
612 | .attr("class", "labels")
613 | .text("Years of Education (2010)");
614 |
615 | });
616 |
617 | });
618 |
619 | }
620 |
621 | // function update(datafile){
622 |
623 | // var svg = svgx
624 |
625 | // var xscale = d3.scaleLinear()
626 | // .domain([0,15])
627 | // .range([0,width]);
628 |
629 | // var yscale = d3.scaleLinear()
630 | // .domain([0,15])
631 | // .range([height,0]);
632 |
633 | // var radius = d3.scaleSqrt()
634 | // .range([2,7]);
635 |
636 | // var xAxis = d3.axisBottom()
637 | // .tickSize(-height)
638 | // .scale(xscale);
639 |
640 | // var yAxis = d3.axisLeft()
641 | // .tickSize(-width)
642 | // .scale(yscale)
643 |
644 | // var color = d3.scaleOrdinal(d3.schemeCategory10);
645 |
646 | // d3.csv(datafile, function(error, data) {
647 | // // data pre-processing
648 | // data.forEach(function(d) {
649 | // d.y = +d["2010"];
650 | // d.x = +d["1950"];
651 | // d.r = +d["1975"];
652 | // });
653 |
654 | // data.sort(function(a,b) { return b.r - a.r; });
655 |
656 | // // yscale.domain(d3.extent(data, function(d) {
657 | // // return d.y;
658 | // // })).nice();
659 |
660 | // radius.domain(d3.extent(data, function(d) {
661 | // return d.r;
662 | // })).nice();
663 |
664 | // svg.append("g")
665 | // .attr("transform", "translate(0," + height + ")")
666 | // .attr("class", "x axis")
667 | // .call(xAxis);
668 |
669 | // svg.append("g")
670 | // .attr("transform", "translate(0,0)")
671 | // .attr("class", "y axis")
672 | // .call(yAxis);
673 |
674 | // var group = svg.selectAll("g.bubble")
675 | // .data(data)
676 | // .enter().append("g")
677 | // .attr("class", "bubble")
678 | // .attr("transform", function(d) {
679 | // return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")"
680 | // });
681 |
682 | // var tooltip = d3.select("body").append("div")
683 | // .attr("class", "tooltip")
684 | // .style("opacity", 0);
685 |
686 | // var tipMouseover = function(d) {
687 | // // var color = scaleOrdinal(d.region_code);
688 | // var html = d.country + " " +
689 | // d['1950'] + " before " + " " +
690 | // d['2010'] + " after "+ " " +
691 | // d['1975'] + " population "
692 |
693 | // tooltip.html(html)
694 | // .style("left", (d3.event.pageX + 15) + "px")
695 | // .style("top", (d3.event.pageY - 28) + "px")
696 | // .transition()
697 | // .duration(200) // ms
698 | // .style("opacity", .9) // started as 0!
699 |
700 | // };
701 |
702 | // // tooltip mouseout event handler
703 | // var tipMouseout = function(d) {
704 | // tooltip.transition()
705 | // .duration(500) // ms
706 | // .style("opacity", 0); // don't care about position!
707 | // };
708 |
709 |
710 | // group
711 | // .append("circle")
712 | // .attr("r", function(d) { return radius(d.r); })
713 | // .style("fill", function(d) {
714 | // return color(d["region_code"]);
715 | // })
716 | // .on("mouseover", tipMouseover)
717 | // .on("mouseout", tipMouseout)
718 | // // .merge(group)
719 | // .transition()
720 | // .duration(3000);
721 |
722 | // // group
723 | // // .append("text")
724 | // // .attr("x", function(d) { return radius(d.r); })
725 | // // .attr("alignment-baseline", "middle");
726 | // // .text(function(d) {
727 | // // return d["country"];
728 | // // });
729 |
730 | // svg.append("text")
731 | // .attr("x", 6)
732 | // .attr("y", -2)
733 | // .attr("class", "label")
734 | // .text("Years of Education (2010)")
735 | // .transition()
736 | // .duration(3000);;
737 |
738 | // svg.append("text")
739 | // .attr("x", width-2)
740 | // .attr("y", height-6)
741 | // .attr("text-anchor", "end")
742 | // .attr("class", "label")
743 | // .text("Years of Education (1950)")
744 | // .transition()
745 | // .duration(3000);;
746 |
747 | // // add diagonal line
748 | // svg.append("line")
749 | // .attr("x1", xscale(0))
750 | // .attr("y1", yscale(0))
751 | // .attr("x2", xscale(15))
752 | // .attr("y2", yscale(15))
753 | // .attr("stroke-width", 2)
754 | // .attr("stroke", "gray")
755 | // .attr("stroke-dasharray", "2,5")
756 | // .transition()
757 | // .duration(3000); //style of svg-line
758 |
759 |
760 | // var buble_legend = svg.selectAll(".buble_legend")
761 | // .data(color.domain())
762 | // .enter().append("g")
763 | // .attr("class", "buble_legend")
764 | // .attr("transform", function(d, i) { return "translate(2," + i * 15 + ")"; });
765 |
766 | // buble_legend.append("rect")
767 | // .attr("x", width)
768 | // .attr("width", 12)
769 | // .attr("height", 12)
770 | // .style("fill", color);
771 |
772 | // buble_legend.append("text")
773 | // .attr("x", width + 20)
774 | // .attr("y", 6)
775 | // .attr("dy", ".35em")
776 | // .style("text-anchor", "start")
777 | // .text(function(d) { return d; });
778 |
779 | // buble_legend.on("mouseover", function(type) {
780 | // d3.selectAll(".buble_legend")
781 | // .style("opacity", 0.1);
782 | // d3.select(this)
783 | // .style("opacity", 1);
784 | // d3.selectAll(".bubble")
785 | // .style("opacity", 0.1)
786 | // .filter(function(d) { return d["region_code"] == type; })
787 | // .style("opacity", 1);
788 | // })
789 | // .on("mouseout", function(type) {
790 | // d3.selectAll(".buble_legend")
791 | // .style("opacity", 1);
792 | // d3.selectAll(".bubble")
793 | // .style("opacity", 1);
794 | // });
795 | // });
796 | // }
797 |
798 |
--------------------------------------------------------------------------------
/data/cleaning/cleaning_education.ipynb:
--------------------------------------------------------------------------------
1 | {
2 | "cells": [
3 | {
4 | "cell_type": "code",
5 | "execution_count": 1,
6 | "metadata": {},
7 | "outputs": [],
8 | "source": [
9 | "import pandas as pd"
10 | ]
11 | },
12 | {
13 | "cell_type": "markdown",
14 | "metadata": {},
15 | "source": [
16 | "## Educational attainment"
17 | ]
18 | },
19 | {
20 | "cell_type": "code",
21 | "execution_count": 2,
22 | "metadata": {},
23 | "outputs": [],
24 | "source": [
25 | "data = '../raw/BL2013_MF2599_v2.2.csv'\n",
26 | "df = pd.read_csv(data)"
27 | ]
28 | },
29 | {
30 | "cell_type": "code",
31 | "execution_count": 3,
32 | "metadata": {},
33 | "outputs": [
34 | {
35 | "data": {
36 | "text/html": [
37 | "