Skip to content

Instantly share code, notes, and snippets.

@almccon

almccon/.block

Last active October 4, 2018 16:15
Show Gist options
  • Save almccon/bb9062cb4c5b24816d35329ad3bc59e8 to your computer and use it in GitHub Desktop.
Save almccon/bb9062cb4c5b24816d35329ad3bc59e8 to your computer and use it in GitHub Desktop.
Download ZIP
gapminder with interaction
Raw
.block
license: mit
Raw
README.md
Raw
gapminder_avg.csv
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
Raw
index.html
<!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(dataWeLoaded) {
//console.log(dataWeLoaded);
var xScale = d3.scaleLinear()
.domain([0,40000])
.range([100,800]);
var yScale = d3.scaleLinear()
.domain([30,80])
.range([400,100]);
var rScale = d3.scaleSqrt()
.domain([0,d3.max(dataWeLoaded, function(d) { return +d.population;})])
.range([0,50]);
var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
svg.selectAll("circle")
.data(dataWeLoaded)
.enter()
.append("circle")
.attr("cy", function(d) { return yScale(+d.lifeexp);})
//return 500-(d.lifeexp*6);})
.attr("cx", function(d) { return xScale(+d.gdp);})
//return 100+(d.gdp/100);})
.attr("r", function(d) { return rScale(+d.population) /* 1 + (d.population/10000000); */ })
.attr("fill-opacity",0.4)
.attr("stroke","black")
.attr("stroke-width",2)
.attr("stroke-opacity",1)
.attr("fill",function(d) { return colorScale(d.region);})
.on("mouseover",function(d) {
highlightRegion(d.region);
})
.on("mouseout",function(d) {
d3.select(this)
.attr("fill",function(d) {
return colorScale(d.region);
})
d3.selectAll("circle")
.attr("stroke-width",2)
})
function highlightRegion(region) {
d3.selectAll("circle")
.filter(function(d) {
return d.region == region
})
.transition(1000)
.attr("stroke-width", 5);
d3.selectAll("circle")
.filter(function(d) {
return d.region != region
})
.transition(1000)
.attr("stroke-width", 2);
}
var leftAxis = d3.axisLeft(yScale);
var bottomAxis = d3.axisBottom(xScale);
svg.append("g")
.attr("transform", "translate(100,0)")
.call(leftAxis);
svg.append("g")
.attr("transform", "translate(0,400)")
.call(bottomAxis);
svg.append("text")
.text("life expectancy")
.attr("transform", "translate(60,90)")
.attr("font-size",10)
.attr("font-family","sans-serif")
svg.append("text")
.text("gdp per capita")
.attr("transform", "translate(770,430)")
.attr("font-size",10)
.attr("font-family","sans-serif")
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment