Built with blockbuilder.org
forked from almccon‘s block: country population barchart
forked from almccon‘s block: country population barchart (step 1)
forked from almccon‘s block: country population barchart (step 2: scales)
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
d3.csv("gapminder_avg.csv", function(data) {
data.forEach(function(d) {
d.population = +d.population;
d.lifeexp = +d.lifeexp;
d.gdp = +d.gdp;
});
var filteredData = data
.filter(function(d) {return +d.population > 100000000;})
.sort(function(a,b) {return a.population < b.population;})
var xScale = d3.scaleLinear()
.domain([0,1000000000])
.range([0,500]);
// Using data-binding (the d3 way) and store the selection as a variable
var svgElements = svg.selectAll("g")
.data(filteredData)
.enter()
.append("g");
// Add sub elements to each "g" element
svgElements
.append("text")
.text(function(d) { return d.country;})
.attr("y", function(d,i) { return 200+40*i;})
.attr("x", 100)
.attr("font-size", 20)
// Add more sub elements to each "g" element
svgElements
.append("rect")
.attr("y", function (d,i) {return 176+40*i;})
.attr("x", 100)
.attr("width", function (d) {return xScale(d.population);})
.attr("height",36)
.attr("opacity",0.2)
var bottomAxis = d3.axisBottom(xScale)
.ticks(5);
svg.append("g")
.attr("transform", "translate(100,450)")
.call(bottomAxis);
svg.append("text")
.text("population in 1980")
.attr("transform", "translate(100,440)")
.attr("font-size",10)
.attr("font-family","sans-serif")
});
</script>
</body>
country,gdp,lifeexp,population,region,color,rgb,loggdp
Kuwait,64256.41951,68.35385246,1313738.049,Middle East & North Africa,green,[0 1 0],4.807916522
Luxembourg,36286.24377,72.92478689,375718.3115,Europe & Central Asia,orange,[1 .6 .3],4.559742014
United States,28990.59574,73.5852623,235012383.7,America,yellow,[1 1 0],4.46225714
Switzerland,27652.04918,75.87004918,6366298.164,Europe & Central Asia,orange,[1 .6 .3],4.441727321
Norway,26679.49623,76.09822951,4080763.541,Europe & Central Asia,orange,[1 .6 .3],4.426177625
Canada,23079.49098,75.245,24696114.8,America,yellow,[1 1 0],4.363226226
Denmark,21603.91131,74.56686885,5024245.492,Europe & Central Asia,orange,[1 .6 .3],4.334532386
Netherlands,21320.9518,75.85378689,13871609.03,Europe & Central Asia,orange,[1 .6 .3],4.328806588
Iceland,21246.22459,76.66583607,232060.2459,Europe & Central Asia,orange,[1 .6 .3],4.327281768
Germany,21237.21934,73.74055738,77965638.64,Europe & Central Asia,orange,[1 .6 .3],4.327097653
Sweden,21224.52197,76.44691803,8276185.197,Europe & Central Asia,orange,[1 .6 .3],4.326837918
Austria,21157.7241,73.50614754,7601006.967,Europe & Central Asia,orange,[1 .6 .3],4.32546895
Australia,20683.0559,75.04357377,15072167.13,East Asia & Pacific,red,[1 0 0],4.315614706
Belgium,20491.43049,73.90511475,9770283.508,Europe & Central Asia,orange,[1 .6 .3],4.311572277
Saudi Arabia,20235.01885,59.8745082,12321730.79,Middle East & North Africa,green,[0 1 0],4.306103613
United Kingdom,19971.35426,74.37083607,56300022.2,Europe & Central Asia,orange,[1 .6 .3],4.300407515
France,19861.43262,74.70485246,53447020.95,Europe & Central Asia,orange,[1 .6 .3],4.298010571
Singapore,18567.67689,71.95013115,2740106.639,East Asia & Pacific,red,[1 0 0],4.26875757
Japan,18322.5318,75.30731148,111663754,East Asia & Pacific,red,[1 0 0],4.262985484
Bahrain,18281.89508,65.27360656,425074.7049,Middle East & North Africa,green,[0 1 0],4.262021212
Finland,18126.09328,73.37413115,4807087.918,Europe & Central Asia,orange,[1 .6 .3],4.258304211
New Zealand,17709.20197,74.35496721,3178976.607,East Asia & Pacific,red,[1 0 0],4.248198991
"Hong Kong, China",17208.25902,74.31836066,4927798.492,East Asia & Pacific,red,[1 0 0],4.235736934
Italy,16756.50033,74.53029508,54678458.84,Europe & Central Asia,orange,[1 .6 .3],4.224183319
Ireland,16350.06902,73.36870492,3405007.951,Europe & Central Asia,orange,[1 .6 .3],4.21351959
Israel,14771.44295,73.95785246,4036412.148,Middle East & North Africa,green,[0 1 0],4.169422921
Slovenia,14660.04262,71.96181967,1800556.492,Europe & Central Asia,orange,[1 .6 .3],4.166135233
Spain,14536.40164,74.54286885,36653755.46,Europe & Central Asia,orange,[1 .6 .3],4.162456914
Czech Rep.,14292.01672,71.83970492,9988453.164,Europe & Central Asia,orange,[1 .6 .3],4.155093516
Greece,14118.90902,74.05740984,9623675.574,Europe & Central Asia,orange,[1 .6 .3],4.14980114
Oman,12645.22344,59.39634426,1412261.77,Middle East & North Africa,green,[0 1 0],4.101926508
Libya,12321.51918,59.98090164,3365523.426,Middle East & North Africa,green,[0 1 0],4.090664257
Gabon,11767.32705,52.27909836,825698.6557,Sub-Saharan Africa,blue,[0 0 1],4.070677824
Portugal,11720.54738,70.88511475,9583524.328,Europe & Central Asia,orange,[1 .6 .3],4.068947895
Hungary,11162.95508,69.64531148,10230794.54,Europe & Central Asia,orange,[1 .6 .3],4.047779177
Taiwan,11138.6535,70.73416667,17095833.33,East Asia & Pacific,red,[1 0 0],4.046832694
Puerto Rico,11125.1355,72.83516667,3115005.417,America,yellow,[1 1 0],4.046305309
Slovak Republic,10827.1777,70.97357377,4816222.607,Europe & Central Asia,orange,[1 .6 .3],4.034515265
Venezuela,9977.657049,66.60288525,16102865.13,America,yellow,[1 1 0],3.999028572
Croatia,9628.251148,70.39981967,4313291.049,Europe & Central Asia,orange,[1 .6 .3],3.98354741
Serbia,9420.641475,68.80242623,8852512.672,Europe & Central Asia,orange,[1 .6 .3],3.974080476
Argentina,9244.114426,69.38409836,28915741.38,America,yellow,[1 1 0],3.965865313
Poland,8854.835738,70.46311475,34459613.52,Europe & Central Asia,orange,[1 .6 .3],3.947180509
"Korea, Rep.",8323.576603,65.85129508,36527605.31,East Asia & Pacific,red,[1 0 0],3.920309981
Trinidad and Tobago,8282.273934,66.29347541,1073533.016,America,yellow,[1 1 0],3.918149591
Mexico,7910.269508,65.96981967,70307633.1,America,yellow,[1 1 0],3.89819128
Lebanon,7663.412951,66.16391803,2854148.164,Middle East & North Africa,green,[0 1 0],3.884422229
Iraq,7600.483279,59.47478689,15561342.85,Middle East & North Africa,green,[0 1 0],3.880841208
Romania,7498.702459,68.56516393,20905726.25,Europe & Central Asia,orange,[1 .6 .3],3.874986122
South Africa,7374.973607,53.88516393,31084477.11,Sub-Saharan Africa,blue,[0 0 1],3.86776047
Montenegro,7355.828852,70.51314754,557270.0328,Europe & Central Asia,orange,[1 .6 .3],3.866631616
Uruguay,7332.891803,71.01091803,2929415.475,America,yellow,[1 1 0],3.865275277
Iran,7226.316885,56.14301639,43347796.34,Middle East & North Africa,green,[0 1 0],3.858917002
Chile,6973.628852,67.90521311,11623818,America,yellow,[1 1 0],3.84345883
Bulgaria,6640.02377,70.35881967,8232723.131,Europe & Central Asia,orange,[1 .6 .3],3.822169634
Cuba,6302.698361,71.35006557,9415716.82,America,yellow,[1 1 0],3.799526523
Jamaica,6297.034754,68.44986885,2139162.82,America,yellow,[1 1 0],3.79913609
Brazil,6054.545246,62.62098361,125579880.1,America,yellow,[1 1 0],3.782081529
"Macedonia, FYR",5972.890492,67.85072131,1735209.066,Europe & Central Asia,orange,[1 .6 .3],3.776184552
Panama,5962.127377,68.26465574,2067477.393,America,yellow,[1 1 0],3.77540125
Ecuador,5848.728033,63.37495082,8501068.492,America,yellow,[1 1 0],3.767061427
Malaysia,5720.201148,66.48106557,15667158.51,East Asia & Pacific,red,[1 0 0],3.757411301
Costa Rica,5702.204098,70.71713115,2608907.852,America,yellow,[1 1 0],3.756042758
Peru,5639.375574,59.74152459,18065803.36,America,yellow,[1 1 0],3.751231019
Botswana,5425.6993,55.24647541,1119315.197,Sub-Saharan Africa,blue,[0 0 1],3.734455721
Mauritius,5070.601475,65.47529508,948362.918,Sub-Saharan Africa,blue,[0 0 1],3.705059478
Turkey,4897.990328,58.42934426,46284073.25,Europe & Central Asia,orange,[1 .6 .3],3.690017923
Reunion,4841.760175,65.98622807,522947.1228,Sub-Saharan Africa,blue,[0 0 1],3.685003274
Algeria,4583.960984,59.5332459,20653967.1,Middle East & North Africa,green,[0 1 0],3.661240913
El Salvador,4479.196066,60.144,4505528.607,America,yellow,[1 1 0],3.651200073
Colombia,4338.633443,64.3562459,28266372.92,America,yellow,[1 1 0],3.63735296
Guatemala,4085.630328,57.37170492,7774132.721,America,yellow,[1 1 0],3.611259069
West Bank and Gaza,3877.758983,61.05450847,1894611.966,Middle East & North Africa,green,[0 1 0],3.588580813
Namibia,3745.566066,54.87245902,1207347.984,Sub-Saharan Africa,blue,[0 0 1],3.573517462
Angola,3651.932295,39.77708197,9336529.77,Sub-Saharan Africa,blue,[0 0 1],3.562522717
Tunisia,3649.644754,61.22008197,6853421.787,Middle East & North Africa,green,[0 1 0],3.562250594
Bosnia and Herzegovina,3629.810872,67.39298361,3613126.705,Europe & Central Asia,orange,[1 .6 .3],3.559883997
Albania,3471.788361,68.69403279,2518442.82,Europe & Central Asia,orange,[1 .6 .3],3.540553243
"Congo, Rep.",3360.95,53.23585246,2063423.623,Sub-Saharan Africa,blue,[0 0 1],3.526462052
Nicaragua,3355.79,58.90811475,3432364.623,America,yellow,[1 1 0],3.525794776
Paraguay,3313.58541,67.02965574,3603312.902,America,yellow,[1 1 0],3.520298169
Thailand,3242.24288,64.95939344,46890513.28,East Asia & Pacific,red,[1 0 0],3.510845545
Jordan,3227.835082,64.44001639,2830406.672,Middle East & North Africa,green,[0 1 0],3.508911337
Swaziland,3210.831475,49.91144262,686213.6721,Sub-Saharan Africa,blue,[0 0 1],3.506617512
Egypt,3198.717541,57.40881967,48357513.08,Middle East & North Africa,green,[0 1 0],3.504975892
Syria,3163.564426,64.65234426,10317034.95,Middle East & North Africa,green,[0 1 0],3.500176683
Equatorial Guinea,3078.692988,43.11162295,361875.2951,Sub-Saharan Africa,blue,[0 0 1],3.488366383
Bolivia,3002.433607,52.9812459,5820158.279,America,yellow,[1 1 0],3.477473413
Dominican Rep.,2966.870984,62.18542623,6048738.246,America,yellow,[1 1 0],3.472298661
Honduras,2855.043443,59.08554098,4092651.164,America,yellow,[1 1 0],3.455612721
Djibouti,2691.943115,47.16311475,398595.8525,Middle East & North Africa,green,[0 1 0],3.430065878
Morocco,2538.784918,58.12539344,20460043.25,Middle East & North Africa,green,[0 1 0],3.40462591
Philippines,2224.158361,62.764,51777871.9,East Asia & Pacific,red,[1 0 0],3.347165706
"Korea, Dem. Rep.",2183.584321,63.54077049,17294862.75,East Asia & Pacific,red,[1 0 0],3.339169967
China,1970.824463,62.00298361,982046723,East Asia & Pacific,red,[1 0 0],3.294647944
Sri Lanka,1966.871311,65.7042459,14919546,South Asia,lt. blue,[.1 .8 .9],3.293775946
Cote d'Ivoire,1917.264754,47.64983607,9910444.902,Sub-Saharan Africa,blue,[0 0 1],3.282682088
South Sudan,1848.069508,47.80647547,4686658,Sub-Saharan Africa,blue,[0 0 1],3.266718302
Sudan,1838.506721,49.67368852,18098557.79,Sub-Saharan Africa,blue,[0 0 1],3.264465222
Indonesia,1817.461891,56.39362295,155378274.9,East Asia & Pacific,red,[1 0 0],3.259465313
Cameroon,1783.154098,47.91177049,10445356.1,Sub-Saharan Africa,blue,[0 0 1],3.251188876
Mongolia,1775.510773,57.19029508,1743974.918,East Asia & Pacific,red,[1 0 0],3.249323312
Haiti,1611.324262,50.86696721,6218255.344,America,yellow,[1 1 0],3.207182946
"Yemen, Rep.",1601.182049,49.31340984,10843528.1,Middle East & North Africa,green,[0 1 0],3.204440713
Nigeria,1539.636272,43.81804918,84829309.3,Sub-Saharan Africa,blue,[0 0 1],3.187418134
Senegal,1532.32541,47.66303279,6280306.574,Sub-Saharan Africa,blue,[0 0 1],3.185351003
Pakistan,1491.65948,56.06990164,93337171.48,South Asia,lt. blue,[.1 .8 .9],3.173669693
Cape Verde,1415.385626,59.69379661,325254.4068,Sub-Saharan Africa,blue,[0 0 1],3.150874781
Sao Tome and Principe,1403.192427,57.5707377,101241.6066,Sub-Saharan Africa,blue,[0 0 1],3.147117232
Mauritania,1385.153179,50.87047541,1745150.492,Sub-Saharan Africa,blue,[0 0 1],3.141497803
Zambia,1364.346885,46.82306557,6609379.852,Sub-Saharan Africa,blue,[0 0 1],3.134924804
Madagascar,1333.455329,49.48096721,10134449.66,Sub-Saharan Africa,blue,[0 0 1],3.124978471
Comoros,1319.80918,51.46888525,376189.7213,Sub-Saharan Africa,blue,[0 0 1],3.120511145
Laos,1217.574081,51.96585246,3665864.18,East Asia & Pacific,red,[1 0 0],3.085495395
Kenya,1212.572982,52.97703279,19482512.11,Sub-Saharan Africa,blue,[0 0 1],3.083707887
Chad,1199.339301,45.8807377,5517909.656,Sub-Saharan Africa,blue,[0 0 1],3.078942065
India,1169.139305,53.40331148,751712360.5,South Asia,lt. blue,[.1 .8 .9],3.067866261
Benin,1158.87664,44.69537705,4394703.656,Sub-Saharan Africa,blue,[0 0 1],3.064037209
Togo,1158.674167,48.28688525,3145839.18,Sub-Saharan Africa,blue,[0 0 1],3.063961324
Somalia,1102.409459,42.51704918,5431243.049,Sub-Saharan Africa,blue,[0 0 1],3.042342931
Sierra Leone,1085.53419,38.05203279,3388793.77,Sub-Saharan Africa,blue,[0 0 1],3.035643507
Vietnam,1084.205117,57.6785082,57391861.39,East Asia & Pacific,red,[1 0 0],3.035111453
Ghana,1074.095741,52.95883607,12846599.05,Sub-Saharan Africa,blue,[0 0 1],3.031042995
Central African Rep.,947.9543186,43.46819672,2567237,Sub-Saharan Africa,blue,[0 0 1],2.976787409
Myanmar,882.5764536,53.20965574,33262430.62,East Asia & Pacific,red,[1 0 0],2.945752337
Tanzania,865.0374287,48.71367213,21938808.62,Sub-Saharan Africa,blue,[0 0 1],2.937034899
Bangladesh,857.9707771,54.70047541,89255396.77,South Asia,lt. blue,[.1 .8 .9],2.933472496
Burkina Faso,856.3111966,44.50886885,8495238.541,Sub-Saharan Africa,blue,[0 0 1],2.932631623
Uganda,828.1015571,47.51303279,15437229.43,Sub-Saharan Africa,blue,[0 0 1],2.918083601
Afghanistan,823.3282829,38.84827869,15823532.79,South Asia,lt. blue,[.1 .8 .9],2.915573035
Lesotho,820.3627565,50.13713115,1397268.836,Sub-Saharan Africa,blue,[0 0 1],2.914005936
Nepal,808.5239723,50.05480328,16904222.95,South Asia,lt. blue,[.1 .8 .9],2.907692901
Guinea,785.3454429,40.27259016,5601889.754,Sub-Saharan Africa,blue,[0 0 1],2.895060728
Niger,779.2892399,42.19063934,7058025.033,Sub-Saharan Africa,blue,[0 0 1],2.89169868
Cambodia,726.3019778,48.5242623,8561079.23,East Asia & Pacific,red,[1 0 0],2.861117227
Mali,691.7456589,39.69734426,8255526.672,Sub-Saharan Africa,blue,[0 0 1],2.839946442
Rwanda,685.240465,45.19836066,5495346.016,Sub-Saharan Africa,blue,[0 0 1],2.835843001
Gambia,680.1538181,45.76839344,808053.6557,Sub-Saharan Africa,blue,[0 0 1],2.83260714
Guinea-Bissau,673.8484134,40.13260656,899825.6393,Sub-Saharan Africa,blue,[0 0 1],2.82856221
"Congo, Dem. Rep.",649.886113,44.59259016,32217396.07,Sub-Saharan Africa,blue,[0 0 1],2.812837257
Zimbabwe,637.2803703,53.11760656,7975630.967,Sub-Saharan Africa,blue,[0 0 1],2.804330541
Liberia,591.328874,43.00832787,1999271.262,Sub-Saharan Africa,blue,[0 0 1],2.771829086
Malawi,588.8774809,43.67901639,7403543.672,Sub-Saharan Africa,blue,[0 0 1],2.770024947
Mozambique,560.7176776,41.57534426,12976867.23,Sub-Saharan Africa,blue,[0 0 1],2.748744248
Eritrea,539.919624,46.92163934,2680764.311,Sub-Saharan Africa,blue,[0 0 1],2.732329113
Ethiopia,525.7868252,45.41780328,43073079.39,Sub-Saharan Africa,blue,[0 0 1],2.7208097
Burundi,472.5573745,44.92077049,4753657.213,Sub-Saharan Africa,blue,[0 0 1],2.674454545