interface CountryData {
name: string;
code: string;
population: number;
urban_population: number;
gdp: number;
gdp_per_capita: number;
land_area: number;
}
The interface is just a type definition for TypeScript. Ignore this for JavaScript.
interface CountryData {
name: string;
code: string;
population: number;
urban_population: number;
gdp: number;
gdp_per_capita: number;
land_area: number;
}
Raw JSON country data
const country_data: CountryData[] = [{"name":"Albania","code":"ALB","population":3304948,"gdp":3686.64938703405,"gdp_per_capita":1115.49391610218,"urban_population":0,"land_area":27400},{"name":"Algeria","code":"DZA","population":31719449,"gdp":54790.0589573718,"gdp_per_capita":1727.33325088251,"urban_population":7.18043998809689,"land_area":2381740},{"name":"Andorra","code":"ADO","population":65399,"gdp":1133.6442945425001,"gdp_per_capita":17334.2756700025,"urban_population":0,"land_area":470},{"name":"Angola","code":"AGO","population":13924930,"gdp":9129.594818607491,"gdp_per_capita":655.629494626364,"urban_population":22.7579456413784,"land_area":1246700},{"name":"Antigua and Barbuda","code":"ATG","population":77648,"gdp":787.693391348092,"gdp_per_capita":10144.4131381116,"urban_population":0,"land_area":440},{"name":"Argentina","code":"ARG","population":36903067,"gdp":284203.75,"gdp_per_capita":7701.35853477978,"urban_population":38.8773594346508,"land_area":2736690},{"name":"Armenia","code":"ARM","population":3076098,"gdp":1911.56366539006,"gdp_per_capita":621.424826318947,"urban_population":36.1269699469913,"land_area":28480},{"name":"Aruba","code":"ABW","population":90858,"gdp":1873.45251396648,"gdp_per_capita":20619.5658496388,"urban_population":0,"land_area":180},{"name":"Australia","code":"AUS","population":19153000,"gdp":415208.189411543,"gdp_per_capita":21678.4936778334,"urban_population":60.5057797734036,"land_area":7682300},{"name":"Austria","code":"AUT","population":8011566,"gdp":192070.749953934,"gdp_per_capita":23974.1830690696,"urban_population":19.3373804821679,"land_area":82450},{"name":"Azerbaijan","code":"AZE","population":8048600,"gdp":5272.61719604517,"gdp_per_capita":655.097432602586,"urban_population":22.4383992247099,"land_area":82605},{"name":"Bahamas","code":"BHS","population":297759,"gdp":6327.552,"gdp_per_capita":21250.5818463926,"urban_population":0,"land_area":10010},{"name":"Bahrain","code":"BHR","population":668239,"gdp":9063.14790087911,"gdp_per_capita":13562.7341428428,"urban_population":0,"land_area":710},{"name":"Bangladesh","code":"BGD","population":132383265,"gdp":47124.9254621348,"gdp_per_capita":355.973434120504,"urban_population":11.2391796651941,"land_area":130170},{"name":"Barbados","code":"BRB","population":267190,"gdp":3119.5,"gdp_per_capita":11675.2123956735,"urban_population":0,"land_area":430},{"name":"Belarus","code":"BLR","population":10005000,"gdp":12736.8564851068,"gdp_per_capita":1273.0491239487,"urban_population":16.9952623688156,"land_area":202840},{"name":"Belgium","code":"BEL","population":10251250,"gdp":232672.74737424,"gdp_per_capita":22697.0123033035,"urban_population":17.4114083648336,"land_area":30280},{"name":"Belize","code":"BLZ","population":238586,"gdp":831.75,"gdp_per_capita":3486.16431810752,"urban_population":0,"land_area":22810},{"name":"Benin","code":"BEN","population":6949366,"gdp":2359.12230267027,"gdp_per_capita":339.473025693319,"urban_population":0,"land_area":112760},{"name":"Bermuda","code":"BMU","population":61833,"gdp":3480.219,"gdp_per_capita":56284.1686478094,"urban_population":0,"land_area":50},{"name":"Bhutan","code":"BTN","population":564350,"gdp":439.158233475187,"gdp_per_capita":778.16644542427,"urban_population":0,"land_area":40077},{"name":"Bolivia","code":"BOL","population":8495271,"gdp":8397.85818479382,"gdp_per_capita":988.533289261028,"urban_population":28.7607893850591,"land_area":1083300},{"name":"Bosnia and Herzegovina","code":"BIH","population":3834364,"gdp":5505.984455958551,"gdp_per_capita":1435.95768580097,"urban_population":0,"land_area":51000},{"name":"Botswana","code":"BWA","population":1755375,"gdp":5788.31164524919,"gdp_per_capita":3297.47868418383,"urban_population":0,"land_area":566730},{"name":"Brazil","code":"BRA","population":174504898,"gdp":644701.831101394,"gdp_per_capita":3694.46266832805,"urban_population":37.6479455608174,"land_area":8459420},{"name":"Brunei Darussalam","code":"BRN","population":331801,"gdp":6001.15331786543,"gdp_per_capita":18086.6040725177,"urban_population":0,"land_area":5270},{"name":"Bulgaria","code":"BGR","population":8170172,"gdp":12903.5467650859,"gdp_per_capita":1579.34823955798,"urban_population":13.8095746331901,"land_area":110630},{"name":"Burkina Faso","code":"BFA","population":11607944,"gdp":2610.9591394096296,"gdp_per_capita":224.928647089409,"urban_population":7.93256755890621,"land_area":273600},{"name":"Burundi","code":"BDI","population":6674286,"gdp":870.4860658582179,"gdp_per_capita":130.423848462325,"urban_population":0,"land_area":25680},{"name":"Cambodia","code":"KHM","population":12222871,"gdp":3654.03171627649,"gdp_per_capita":298.950362502925,"urban_population":9.3979802290313,"land_area":176520},{"name":"Cameroon","code":"CMR","population":15927713,"gdp":9287.367568825399,"gdp_per_capita":583.094859181943,"urban_population":17.8387820021619,"land_area":472710},{"name":"Canada","code":"CAN","population":30769700,"gdp":724918.860682782,"gdp_per_capita":23559.5036897592,"urban_population":42.225887805211,"land_area":9093510},{"name":"Cape Verde","code":"CPV","population":442426,"gdp":604.760392765824,"gdp_per_capita":1366.91874520445,"urban_population":0,"land_area":4030},{"name":"Central African Republic","code":"CAF","population":3638316,"gdp":914.5003319837231,"gdp_per_capita":251.352640063074,"urban_population":0,"land_area":622980},{"name":"Chad","code":"TCD","population":8301151,"gdp":1385.05821151211,"gdp_per_capita":166.851345254665,"urban_population":8.47284912658498,"land_area":1259200},{"name":"Chile","code":"CHL","population":15454402,"gdp":79328.6402637897,"gdp_per_capita":5133.07731116285,"urban_population":34.1332909549007,"land_area":743532},{"name":"China","code":"CHN","population":1262645000,"gdp":1198474.93419878,"gdp_per_capita":949.178062082992,"urban_population":15.3252540500299,"land_area":9327480},{"name":"Colombia","code":"COL","population":39897984,"gdp":99886.5775755444,"gdp_per_capita":2503.54949201304,"urban_population":33.6258243023006,"land_area":1109500},{"name":"Comoros","code":"COM","population":528312,"gdp":201.899883626713,"gdp_per_capita":382.160321224415,"urban_population":0,"land_area":1861},{"name":"Congo","code":"COG","population":3126204,"gdp":3219.9106660298,"gdp_per_capita":1029.97458452161,"urban_population":32.6797291539516,"land_area":341500},{"name":"Congo, the Democratic Republic of the","code":"ZAR","population":46949244,"gdp":4305.296502028989,"gdp_per_capita":91.7010825995193,"urban_population":15.4756059543792,"land_area":2267050},{"name":"Costa Rica","code":"CRI","population":3929588,"gdp":15946.443103280399,"gdp_per_capita":4058.04453374767,"urban_population":26.2703367375918,"land_area":51060},{"name":"Côte d'Ivoire","code":"CIV","population":16131332,"gdp":10417.0606049044,"gdp_per_capita":645.765681650117,"urban_population":18.7698883142446,"land_area":318000},{"name":"Croatia","code":"HRV","population":4426000,"gdp":21517.7846590236,"gdp_per_capita":4861.6775099466,"urban_population":0,"land_area":55910},{"name":"Cuba","code":"CUB","population":11138416,"gdp":30565.2,"gdp_per_capita":2744.12447874096,"urban_population":19.6314449020399,"land_area":107400},{"name":"Cyprus","code":"CYP","population":943287,"gdp":9314.937556479059,"gdp_per_capita":13421.6554155684,"urban_population":0,"land_area":9240},{"name":"Czech Republic","code":"CZE","population":10255063,"gdp":58807.2443678667,"gdp_per_capita":5734.45959014262,"urban_population":11.4289790321132,"land_area":77270},{"name":"Denmark","code":"DNK","population":5339616,"gdp":160082.51784587602,"gdp_per_capita":29980.1554729546,"urban_population":20.172443112014,"land_area":42430},{"name":"Djibouti","code":"DJI","population":722887,"gdp":551.230861856505,"gdp_per_capita":762.540842284486,"urban_population":0,"land_area":23180},{"name":"Dominica","code":"DMA","population":69679,"gdp":324.46383315865097,"gdp_per_capita":4656.55123004996,"urban_population":0,"land_area":750},{"name":"Dominican Republic","code":"DOM","population":8663421,"gdp":23996.6566758335,"gdp_per_capita":2769.8823219873,"urban_population":20.9271487556705,"land_area":48320},{"name":"Ecuador","code":"ECU","population":12533087,"gdp":18327.386415952402,"gdp_per_capita":1462.32021017267,"urban_population":27.4044455288629,"land_area":248360},{"name":"Egypt","code":"EGY","population":66136590,"gdp":99838.5409973209,"gdp_per_capita":1509.58102008768,"urban_population":20.8083301543064,"land_area":995450},{"name":"El Salvador","code":"SLV","population":5958794,"gdp":13134.1,"gdp_per_capita":2204.15406204678,"urban_population":20.9443890827574,"land_area":20720},{"name":"Equatorial Guinea","code":"GNQ","population":518179,"gdp":1242.84885735322,"gdp_per_capita":2398.49329546976,"urban_population":0,"land_area":28050},{"name":"Eritrea","code":"ERI","population":3939348,"gdp":706.370812289102,"gdp_per_capita":179.31160493795,"urban_population":0,"land_area":101000},{"name":"Estonia","code":"EST","population":1379343,"gdp":5675.69757486409,"gdp_per_capita":4114.78332428126,"urban_population":0,"land_area":42390},{"name":"Ethiopia","code":"ETH","population":66024199,"gdp":8091.38489112591,"gdp_per_capita":122.551806968925,"urban_population":3.59964987988722,"land_area":1000000},{"name":"Faroe Islands","code":"FRO","population":46491,"gdp":1062.33994383343,"gdp_per_capita":22850.4429638732,"urban_population":0,"land_area":1396},{"name":"Fiji","code":"FJI","population":811647,"gdp":1684.1097434933802,"gdp_per_capita":2074.92880956053,"urban_population":0,"land_area":18270},{"name":"Finland","code":"FIN","population":5176209,"gdp":121793.80873410699,"gdp_per_capita":23529.538458379,"urban_population":19.6902018446319,"land_area":304590},{"name":"France","code":"FRA","population":60911057,"gdp":1326334.43891653,"gdp_per_capita":21774.9371664414,"urban_population":22.1091911112296,"land_area":547670},{"name":"French Polynesia","code":"PYF","population":237267,"gdp":3447.5431379414904,"gdp_per_capita":14530.2260236,"urban_population":0,"land_area":3660},{"name":"Gabon","code":"GAB","population":1225527,"gdp":5067.86550279988,"gdp_per_capita":4135.25406033476,"urban_population":0,"land_area":257670},{"name":"Gambia","code":"GMB","population":1228863,"gdp":782.913866095892,"gdp_per_capita":637.104271262046,"urban_population":0,"land_area":10120},{"name":"Georgia","code":"GEO","population":4418300,"gdp":3057.45346084975,"gdp_per_capita":691.997705191985,"urban_population":24.8918814928819,"land_area":69490},{"name":"Germany","code":"DEU","population":82211508,"gdp":1886401.3266998301,"gdp_per_capita":22945.7088501507,"urban_population":8.83031241806196,"land_area":348950},{"name":"Ghana","code":"GHA","population":18825034,"gdp":4982.8490540291,"gdp_per_capita":264.692698777017,"urban_population":15.1962275340379,"land_area":227540},{"name":"Greece","code":"GRC","population":10917482,"gdp":124418.163927785,"gdp_per_capita":11396.232567893,"urban_population":29.1224111933503,"land_area":128900},{"name":"Greenland","code":"GRL","population":56200,"gdp":1068.02499398697,"gdp_per_capita":19004.0034517255,"urban_population":0,"land_area":410450},{"name":"Grenada","code":"GRD","population":101620,"gdp":523.2563549071081,"gdp_per_capita":5149.14736180976,"urban_population":0,"land_area":340},{"name":"Guatemala","code":"GTM","population":11204183,"gdp":19290.5665700483,"gdp_per_capita":1721.72898015396,"urban_population":8.09995695357707,"land_area":107160},{"name":"Guinea","code":"GIN","population":8746128,"gdp":2995.36096917427,"gdp_per_capita":342.478519543079,"urban_population":13.9578679845527,"land_area":245720},{"name":"Guinea-Bissau","code":"GNB","population":1273312,"gdp":361.85896813199,"gdp_per_capita":284.187196957219,"urban_population":0,"land_area":28120},{"name":"Guyana","code":"GUY","population":744471,"gdp":712.667925076665,"gdp_per_capita":957.280975453261,"urban_population":0,"land_area":196850},{"name":"Haiti","code":"HTI","population":8578234,"gdp":3664.50384556892,"gdp_per_capita":427.186276985324,"urban_population":19.7414526113417,"land_area":27560},{"name":"Honduras","code":"HND","population":6235561,"gdp":7105.541205282079,"gdp_per_capita":1139.51915557912,"urban_population":12.7100993799916,"land_area":111890},{"name":"Hong Kong","code":"HKG","population":6665000,"gdp":171668.16408255498,"gdp_per_capita":25756.6637783278,"urban_population":100,"land_area":1042},{"name":"Hungary","code":"HUN","population":10210971,"gdp":46385.589533836304,"gdp_per_capita":4542.72072008003,"urban_population":17.5032031723526,"land_area":89620},{"name":"Iceland","code":"ISL","population":281205,"gdp":8697.298233820089,"gdp_per_capita":30928.6756416852,"urban_population":0,"land_area":100250},{"name":"India","code":"IND","population":1042261758,"gdp":476609.148198006,"gdp_per_capita":457.283541816379,"urban_population":11.1202662009211,"land_area":2973190},{"name":"Indonesia","code":"IDN","population":208938698,"gdp":165021.012261509,"gdp_per_capita":789.805880103209,"urban_population":9.0781220432416,"land_area":1811570},{"name":"Iran","code":"IRN","population":65911052,"gdp":101286.514977457,"gdp_per_capita":1536.71519273365,"urban_population":23.5327771736977,"land_area":1628550},{"name":"Ireland","code":"IRL","population":3805174,"gdp":97331.5220655979,"gdp_per_capita":25578.730976717,"urban_population":25.9788120070199,"land_area":68890},{"name":"Isle of Man","code":"IMY","population":76806,"gdp":1563.66779961578,"gdp_per_capita":20358.6672866154,"urban_population":0,"land_area":570},{"name":"Israel","code":"ISR","population":6289000,"gdp":124895.151203002,"gdp_per_capita":19859.3021470825,"urban_population":57.9542375576403,"land_area":21640},{"name":"Italy","code":"ITA","population":56942108,"gdp":1104009.46256219,"gdp_per_capita":19388.2787508005,"urban_population":18.0812080227167,"land_area":294110},{"name":"Jamaica","code":"JAM","population":2589389,"gdp":9008.629729410311,"gdp_per_capita":3479.05615162894,"urban_population":0,"land_area":10830},{"name":"Japan","code":"JPN","population":126870000,"gdp":4731198.760271139,"gdp_per_capita":37291.7061580448,"urban_population":47.2885851659179,"land_area":364500},{"name":"Jordan","code":"JOR","population":4797000,"gdp":8457.92394544009,"gdp_per_capita":1763.16946955182,"urban_population":21.2055034396498,"land_area":88240},{"name":"Kazakhstan","code":"KAZ","population":14883626,"gdp":18291.990619137003,"gdp_per_capita":1229.00095844501,"urban_population":7.79206626127262,"land_area":2699700},{"name":"Kenya","code":"KEN","population":31285050,"gdp":12705.3501534012,"gdp_per_capita":406.115705533511,"urban_population":7.07644066415109,"land_area":569140},{"name":"Kiribati","code":"KIR","population":82788,"gdp":67.5127145176252,"gdp_per_capita":815.489135111673,"urban_population":0,"land_area":810},{"name":"Korea, Republic of","code":"KOR","population":47008111,"gdp":533384.027728655,"gdp_per_capita":11346.6381946013,"urban_population":49.3185378157399,"land_area":98730},{"name":"Kuwait","code":"KWT","population":1906231,"gdp":37718.0114685749,"gdp_per_capita":19786.6950377865,"urban_population":69.9260477874927,"land_area":17820},{"name":"Kyrgyzstan","code":"KGZ","population":4898400,"gdp":1369.69195502213,"gdp_per_capita":279.620274992268,"urban_population":0,"land_area":191800},{"name":"Lao People's Democratic Republic","code":"LAO","population":5388281,"gdp":1731.19802245212,"gdp_per_capita":321.289484058482,"urban_population":0,"land_area":230800},{"name":"Latvia","code":"LVA","population":2367550,"gdp":7833.06842539159,"gdp_per_capita":3308.51235470913,"urban_population":0,"land_area":62196},{"name":"Lebanon","code":"LBN","population":3235380,"gdp":17260.3648424544,"gdp_per_capita":5334.88024357398,"urban_population":45.9508929399329,"land_area":10230},{"name":"Lesotho","code":"LSO","population":1856225,"gdp":771.200632484425,"gdp_per_capita":415.467215711687,"urban_population":0,"land_area":30360},{"name":"Liberia","code":"LBR","population":2891968,"gdp":529.06464666383,"gdp_per_capita":182.942773455249,"urban_population":0,"land_area":96320},{"name":"Libya","code":"LBY","population":5176185,"gdp":33896.6008707706,"gdp_per_capita":6548.56827388716,"urban_population":19.7374707434143,"land_area":1759540},{"name":"Liechtenstein","code":"LIE","population":33093,"gdp":2483.89059370545,"gdp_per_capita":75057.8851631902,"urban_population":0,"land_area":160},{"name":"Lithuania","code":"LTU","population":3499536,"gdp":11434.2,"gdp_per_capita":3267.34744263239,"urban_population":0,"land_area":62680},{"name":"Luxembourg","code":"LUX","population":436300,"gdp":20267.5511332228,"gdp_per_capita":46453.2457786449,"urban_population":0,"land_area":2590},{"name":"Macao","code":"MAC","population":431907,"gdp":6101.794938885359,"gdp_per_capita":14127.5666726526,"urban_population":0,"land_area":28},{"name":"Macedonia","code":"MKD","population":2052129,"gdp":3586.88398895646,"gdp_per_capita":1747.88426505179,"urban_population":0,"land_area":25430},{"name":"Madagascar","code":"MDG","population":15744811,"gdp":3877.67363458854,"gdp_per_capita":246.282640965874,"urban_population":8.64717906108876,"land_area":581540},{"name":"Malawi","code":"MWI","population":11321496,"gdp":1743.50628664581,"gdp_per_capita":153.999638090745,"urban_population":0,"land_area":94280},{"name":"Malaysia","code":"MYS","population":23420751,"gdp":93789.47368421049,"gdp_per_capita":4004.54595517499,"urban_population":10.9610746470085,"land_area":328550},{"name":"Maldives","code":"MDV","population":272745,"gdp":624.337143585387,"gdp_per_capita":2289.08740246526,"urban_population":0,"land_area":300},{"name":"Mali","code":"MLI","population":10260577,"gdp":2422.48231756719,"gdp_per_capita":236.096110147333,"urban_population":11.1275710907876,"land_area":1220190},{"name":"Malta","code":"MLT","population":381363,"gdp":3957.41808279925,"gdp_per_capita":10377.0373182486,"urban_population":0,"land_area":320},{"name":"Marshall Islands","code":"MHL","population":52161,"gdp":110.937729412641,"gdp_per_capita":2126.83287154466,"urban_population":0,"land_area":180},{"name":"Mauritania","code":"MRT","population":2708095,"gdp":1293.65347322014,"gdp_per_capita":477.698704521127,"urban_population":0,"land_area":1030700},{"name":"Mauritius","code":"MUS","population":1186873,"gdp":4582.562397943129,"gdp_per_capita":3861.03854240777,"urban_population":0,"land_area":2030},{"name":"Mexico","code":"MEX","population":103873607,"gdp":692177.614209703,"gdp_per_capita":6663.65243492222,"urban_population":34.302065778846,"land_area":1943950},{"name":"Micronesia","code":"FSM","population":107430,"gdp":233.226322838293,"gdp_per_capita":2170.96083811126,"urban_population":0,"land_area":700},{"name":"Moldova","code":"MDA","population":3639592,"gdp":1288.4202229478701,"gdp_per_capita":354.001278975189,"urban_population":0,"land_area":32880},{"name":"Monaco","code":"MCO","population":32081,"gdp":2647.8838201862504,"gdp_per_capita":82537.4464694446,"urban_population":0,"land_area":2},{"name":"Mongolia","code":"MNG","population":2397473,"gdp":1136.89616214218,"gdp_per_capita":474.206033662186,"urban_population":31.9136857849911,"land_area":1553560},{"name":"Montenegro","code":"MNE","population":611196,"gdp":984.2795964,"gdp_per_capita":1610.41563819135,"urban_population":0,"land_area":13450},{"name":"Morocco","code":"MAR","population":28710123,"gdp":37020.6098249576,"gdp_per_capita":1275.88034551999,"urban_population":18.5022126167833,"land_area":446300},{"name":"Mozambique","code":"MOZ","population":18275618,"gdp":4310.090791180291,"gdp_per_capita":235.838306052375,"urban_population":5.57569106554974,"land_area":786380},{"name":"Namibia","code":"NAM","population":1897953,"gdp":3908.59812334455,"gdp_per_capita":2059.37561327628,"urban_population":0,"land_area":823290},{"name":"Nepal","code":"NPL","population":23184177,"gdp":5494.2522079050195,"gdp_per_capita":236.982844286645,"urban_population":0,"land_area":143350},{"name":"Netherlands","code":"NLD","population":15925513,"gdp":385074.626865672,"gdp_per_capita":24179.7314074386,"urban_population":12.530390700758,"land_area":33760},{"name":"New Caledonia","code":"NCL","population":213230,"gdp":2682.34706436419,"gdp_per_capita":12579.5951055864,"urban_population":0,"land_area":18280},{"name":"New Zealand","code":"NZL","population":3857700,"gdp":51981.3858955781,"gdp_per_capita":13474.7092556648,"urban_population":27.552816445032,"land_area":263310},{"name":"Nicaragua","code":"NIC","population":5100920,"gdp":5107.32900966642,"gdp_per_capita":1001.25644190978,"urban_population":20.0187809257938,"land_area":120340},{"name":"Niger","code":"NER","population":10989815,"gdp":1798.37453294855,"gdp_per_capita":163.640109769687,"urban_population":6.18834802951642,"land_area":1266700},{"name":"Nigeria","code":"NGA","population":122876727,"gdp":46385.9960274279,"gdp_per_capita":377.500257045648,"urban_population":13.8341005778906,"land_area":910770},{"name":"Norway","code":"NOR","population":4490967,"gdp":168288.531891204,"gdp_per_capita":37472.6716743196,"urban_population":0,"land_area":304280},{"name":"Oman","code":"OMN","population":2192535,"gdp":19867.880550271402,"gdp_per_capita":9061.60246028974,"urban_population":0,"land_area":309500},{"name":"Pakistan","code":"PAK","population":143832014,"gdp":73952.3749697995,"gdp_per_capita":514.157960478809,"urban_population":16.6378327984756,"land_area":770880},{"name":"Palau","code":"PLW","population":19174,"gdp":158.40881042341798,"gdp_per_capita":8261.64652255231,"urban_population":0,"land_area":460},{"name":"Palestine","code":"WBG","population":2922153,"gdp":4113.26123292671,"gdp_per_capita":1407.61323343669,"urban_population":0,"land_area":6020},{"name":"Panama","code":"PAN","population":3054812,"gdp":11620.5,"gdp_per_capita":3803.99841299563,"urban_population":35.1145340531594,"land_area":74340},{"name":"Papua New Guinea","code":"PNG","population":5379226,"gdp":3521.34815479666,"gdp_per_capita":654.619856982522,"urban_population":0,"land_area":452860},{"name":"Paraguay","code":"PRY","population":5350253,"gdp":8195.99319126952,"gdp_per_capita":1531.88890156587,"urban_population":28.1650419148403,"land_area":397300},{"name":"Peru","code":"PER","population":26000080,"gdp":53290.3903180249,"gdp_per_capita":2049.62409031145,"urban_population":28.0520252245378,"land_area":1280000},{"name":"Philippines","code":"PHL","population":77651848,"gdp":81026.2946812438,"gdp_per_capita":1043.45610269628,"urban_population":14.308399975233,"land_area":298170},{"name":"Poland","code":"POL","population":38453757,"gdp":171276.118424232,"gdp_per_capita":4454.0802196319,"urban_population":4.3329524342706,"land_area":304360},{"name":"Portugal","code":"PRT","population":10289898,"gdp":117299.520913949,"gdp_per_capita":11399.4833490039,"urban_population":38.1576377141931,"land_area":91500},{"name":"Puerto Rico","code":"PRI","population":3810605,"gdp":61702,"gdp_per_capita":16192.1794570678,"urban_population":65.8229861137536,"land_area":8870},{"name":"Qatar","code":"QAT","population":593693,"gdp":17759.8895980532,"gdp_per_capita":29914.264776666,"urban_population":0,"land_area":11610},{"name":"Romania","code":"ROM","population":22442971,"gdp":37305.0999281587,"gdp_per_capita":1662.21753475325,"urban_population":8.68578407021067,"land_area":229710},{"name":"Russian Federation","code":"RUS","population":146303000,"gdp":259708.49626733,"gdp_per_capita":1775.14129079602,"urban_population":18.0391987860809,"land_area":16381340},{"name":"Rwanda","code":"RWA","population":8395577,"gdp":1734.9381902776502,"gdp_per_capita":206.649071323823,"urban_population":0,"land_area":24670},{"name":"Saint Kitts and Nevis","code":"KNA","population":45544,"gdp":416.56695443505004,"gdp_per_capita":9146.47273922032,"urban_population":0,"land_area":260},{"name":"Saint Lucia","code":"LCA","population":156949,"gdp":764.4577234251159,"gdp_per_capita":4870.73968884871,"urban_population":0,"land_area":610},{"name":"Saint Vincent and the Grenadines","code":"VCT","population":107897,"gdp":397.447006684536,"gdp_per_capita":3683.57791861253,"urban_population":0,"land_area":390},{"name":"Samoa","code":"WSM","population":174614,"gdp":239.698992443325,"gdp_per_capita":1372.73639251907,"urban_population":0,"land_area":2830},{"name":"San Marino","code":"SMR","population":26969,"gdp":773.9076424147479,"gdp_per_capita":28696.1934967833,"urban_population":0,"land_area":60},{"name":"Sao Tome and Principe","code":"STP","population":139428,"gdp":76.70930453364099,"gdp_per_capita":550.171447152946,"urban_population":0,"land_area":960},{"name":"Saudi Arabia","code":"SAU","population":20144584,"gdp":188441.864874667,"gdp_per_capita":9354.46792421559,"urban_population":39.9034450152954,"land_area":2149690},{"name":"Senegal","code":"SEN","population":9861679,"gdp":4679.60492156347,"gdp_per_capita":474.524157758884,"urban_population":20.5700165255835,"land_area":192530},{"name":"Serbia","code":"SRB","population":7516346,"gdp":6082.79150617659,"gdp_per_capita":809.27507943043,"urban_population":14.9245125224411,"land_area":87460},{"name":"Seychelles","code":"SYC","population":81131,"gdp":614.877971233472,"gdp_per_capita":7578.82894619161,"urban_population":0,"land_area":460},{"name":"Sierra Leone","code":"SLE","population":4139757,"gdp":635.874002198748,"gdp_per_capita":153.601769910347,"urban_population":0,"land_area":71620},{"name":"Singapore","code":"SGP","population":4027900,"gdp":94308.328290045,"gdp_per_capita":23413.7710196492,"urban_population":97.3038059534745,"land_area":670},{"name":"Slovakia","code":"SVK","population":5388720,"gdp":28724.0418278976,"gdp_per_capita":5330.40162188749,"urban_population":0,"land_area":48100},{"name":"Slovenia","code":"SVN","population":1988925,"gdp":19979.4677904398,"gdp_per_capita":10045.3600766443,"urban_population":0,"land_area":20140},{"name":"Solomon Islands","code":"SLB","population":412336,"gdp":435.10121723341695,"gdp_per_capita":1055.21035571334,"urban_population":0,"land_area":27990},{"name":"South Africa","code":"ZAF","population":44000000,"gdp":132877.640157574,"gdp_per_capita":3019.94636721758,"urban_population":29.7314840909091,"land_area":1213090},{"name":"Spain","code":"ESP","population":40263216,"gdp":580345.49474848,"gdp_per_capita":14413.788872416,"urban_population":24.2040178807376,"land_area":499000},{"name":"Sri Lanka","code":"LKA","population":19102000,"gdp":16330.8103039159,"gdp_per_capita":854.926725155264,"urban_population":0,"land_area":62710},{"name":"Sudan","code":"SDN","population":27729798,"gdp":12257.2991627402,"gdp_per_capita":356.495270299541,"urban_population":10.1953820956082,"land_area":2376000},{"name":"Suriname","code":"SUR","population":466668,"gdp":892.164363636364,"gdp_per_capita":1911.77531700559,"urban_population":0,"land_area":156000},{"name":"Swaziland","code":"SWZ","population":1063715,"gdp":1524.49015909856,"gdp_per_capita":1433.17538917714,"urban_population":0,"land_area":17200},{"name":"Sweden","code":"SWE","population":8872109,"gdp":247260.155857763,"gdp_per_capita":27869.3776032016,"urban_population":13.5899818183027,"land_area":410340},{"name":"Switzerland","code":"CHE","population":7184250,"gdp":256042.925982354,"gdp_per_capita":35639.4788575501,"urban_population":15.0069248703762,"land_area":40000},{"name":"Syrian Arab Republic","code":"SYR","population":16371208,"gdp":19325.8949131254,"gdp_per_capita":1180.48068982603,"urban_population":31.2907025553643,"land_area":183780},{"name":"Tajikistan","code":"TJK","population":6186152,"gdp":860.550294273467,"gdp_per_capita":139.109141558996,"urban_population":0,"land_area":139960},{"name":"Tanzania","code":"TZA","population":34020512,"gdp":10185.786170732701,"gdp_per_capita":308.144092325753,"urban_population":6.21940963145999,"land_area":885800},{"name":"Thailand","code":"THA","population":62343379,"gdp":122725.247705559,"gdp_per_capita":1968.53699100203,"urban_population":10.8256644221995,"land_area":510890},{"name":"Timor-Leste","code":"TMP","population":853585,"gdp":350.1,"gdp_per_capita":410.152474563166,"urban_population":0,"land_area":14870},{"name":"Togo","code":"TGO","population":4864753,"gdp":1294.2502796812898,"gdp_per_capita":266.046452858201,"urban_population":18.581375046174,"land_area":54390},{"name":"Tonga","code":"TON","population":97962,"gdp":188.62325845891402,"gdp_per_capita":1925.47373939807,"urban_population":0,"land_area":720},{"name":"Trinidad and Tobago","code":"TTO","population":1267980,"gdp":8154.31570834826,"gdp_per_capita":6430.94978497158,"urban_population":0,"land_area":5130},{"name":"Tunisia","code":"TUN","population":9563500,"gdp":21473.261837017602,"gdp_per_capita":2245.33505902835,"urban_population":0,"land_area":155360},{"name":"Turkey","code":"TUR","population":63174483,"gdp":266567.531989763,"gdp_per_capita":4219.54433706665,"urban_population":28.5260252941049,"land_area":769630},{"name":"Turkmenistan","code":"TKM","population":4501419,"gdp":2904.66260482053,"gdp_per_capita":645.277101469676,"urban_population":0,"land_area":469930},{"name":"Tuvalu","code":"TUV","population":9419,"gdp":13.741846518202399,"gdp_per_capita":1458.94962503476,"urban_population":0,"land_area":30},{"name":"Uganda","code":"UGA","population":24275641,"gdp":6193.2466323273,"gdp_per_capita":255.121857846197,"urban_population":4.51765619700835,"land_area":199810},{"name":"Ukraine","code":"UKR","population":49175848,"gdp":31261.527363144,"gdp_per_capita":635.708963537222,"urban_population":12.615369642431,"land_area":579350},{"name":"United Arab Emirates","code":"ARE","population":3026352,"gdp":104337.37534252601,"gdp_per_capita":34476.2854230194,"urban_population":29.9260958408011,"land_area":83600},{"name":"United Kingdom","code":"GBR","population":58892514,"gdp":1493628.38553488,"gdp_per_capita":25361.939643719,"urban_population":26.188720692073,"land_area":241930},{"name":"United States","code":"USA","population":282162411,"gdp":10289700,"gdp_per_capita":36467.2954258248,"urban_population":43.7725204297322,"land_area":9161920},{"name":"Uruguay","code":"URY","population":3320841,"gdp":22823.2558059664,"gdp_per_capita":6872.73368582428,"urban_population":48.3375446159572,"land_area":175020},{"name":"Uzbekistan","code":"UZB","population":24650400,"gdp":13760.37448751,"gdp_per_capita":558.221143977787,"urban_population":8.65950248271833,"land_area":425400},{"name":"Vanuatu","code":"VUT","population":185058,"gdp":272.014693050806,"gdp_per_capita":1469.88886214487,"urban_population":0,"land_area":12190},{"name":"Venezuela","code":"VEN","population":24407553,"gdp":117147.61456556301,"gdp_per_capita":4799.64601799954,"urban_population":32.0571873796607,"land_area":882050},{"name":"Vietnam","code":"VNM","population":77630900,"gdp":33640.085727518,"gdp_per_capita":433.333707679777,"urban_population":7.79214204653044,"land_area":311060},{"name":"Yemen","code":"YEM","population":17522537,"gdp":9636.34227482408,"gdp_per_capita":549.939901672005,"urban_population":7.68897220762039,"land_area":527970},{"name":"Zambia","code":"ZMB","population":10100981,"gdp":3253.55174972453,"gdp_per_capita":322.102551200179,"urban_population":10.6256907126149,"land_area":743390},{"name":"Zimbabwe","code":"ZWE","population":12503652,"gdp":6689.95761005549,"gdp_per_capita":535.040291432894,"urban_population":11.0309052107336,"land_area":386850},{"name":"Channel Islands","code":"CHI","population":148725,"gdp":6439.703434710241,"gdp_per_capita":43299.401141101,"urban_population":0,"land_area":194},{"name":"Kosovo","code":"KSV","population":1700000,"gdp":1849.1960820550698,"gdp_per_capita":1087.76240120887,"urban_population":0,"land_area":10887}];
Remember the column to specify sorting by it.
var gdp_column: c3.Table.Column<CountryData>;
Keep track of the country we searched for
var found_country: CountryData;
Create a c3.Table
object and set its options. Bind to an anchor DOM element using a string selector.
var country_table: c3.Table<CountryData> = new c3.Table<CountryData>({
anchor: '#country_table_example',
data: country_data,
Enable the user to sort this table.
sortable: true,
Limit the table to only show pages of 4 at a time, and enable pagination to change pages.
limit_rows: 10,
pagination: true,
Make the table searchable
searchable: true,
Create an array of column objects to describe the table columns.
columns: [
{
header: { text: "Country" },
cells: { html: (country) => '<b>' + country.name + '</b>' },
}, {
These columns use custom formatters to set the html content of the cell
adding commas, units, rounding, etc. You can add raw HTML if you like.
These column also use the vis
visualization support to render a bar
graph based on the cell value.
header: { text: "Population" },
cells: { text: (country) => d3.format(',')(country.population) },
sort: (country) => country.population,
vis: 'bar',
}, {
header: { text: "Urbanization" },
cells: { text: (country) => country.urban_population.toFixed(1)+'%' },
sort: (country) => country.urban_population,
vis: 'bar',
total_value: 100,
}, {
header: { text: "Land Area" },
cells: { html: (country) => (d3.format(',')(Math.round(country.land_area))) + "km<sup>2</sup>" },
sort: (country) => Math.round(country.land_area),
vis: 'bar',
},
Assign this column to a variable gdp_column
so we can refer to it below for setting the default sort.
gdp_column = {
header: { text: "GDP" },
cells: { text: (country) => "$" + (d3.format(',')(Math.round(country.gdp))) + "m" },
sort: (country) => Math.round(country.gdp),
vis: 'bar',
}, {
By default, the bar
visualization will base the bar width as a percentage of the
total value of all cells. This isn’t always appropriate, though, such as in the case
of GDP per capita. So, here we manually set the total_value
to be the maximum
per capita value. Look out for Monaco!
header: { text: "GDP per capita" },
cells: { html: (country) => "$" + (d3.format(',')(Math.round(country.gdp_per_capita))) },
sort: (country) => Math.round(country.gdp_per_capita),
vis: 'bar',
total_value: function () { return d3.max(country_data, (country) => country.gdp_per_capita); },
},
],
Configure the initial column to **sort ** the data on based on the column varible gdp_column
we created above.
You could also simply set sort_column
to the string “GDP” matching the header text of the desired column.
sort_column: gdp_column,
Style the row with class match
if the country matches the one found in the search.
found_country
is set in the found
event handler below.
row_options: {
classes: {
'match': (country)=> country === found_country,
},
},
Add an event handler to highlight which row was found in a search
handlers: {
found: function(search, found, i) {
found_country = found;
this.redraw();
},
},
}).render();
Limit the number of rows
document.querySelector('#limit_rows').addEventListener('change', function () {
country_table.limit_rows = this.checked ?
+(<HTMLInputElement>document.querySelector('#number_of_rows')).value : undefined;
country_table.redraw();
});
document.querySelector('#number_of_rows').addEventListener('change', function () {
country_table.limit_rows = (<HTMLInputElement>document.querySelector('#limit_rows')).checked ?
+this.value : undefined;
country_table.redraw();
});
Enable pagination to select a different page
document.querySelector('#pagination').addEventListener('change', function () {
country_table.pagination = this.checked;
country_table.redraw();
});
Set how many pages are shown in the paginator
document.querySelector('#number_of_pages').addEventListener('change', function () {
country_table.max_pages_in_paginator = +this.value;
country_table.redraw();
});
Enable the search control in the page
document.querySelector('#searchable').addEventListener('change', function () {
country_table.searchable = this.checked;
country_table.redraw();
});
Allow table to be searchable if table isn’t paginated
document.querySelector('#searchable_if_not_paginated').addEventListener('change', function () {
country_table.searchable_if_not_paginated = this.checked;
country_table.redraw();
});
API for searching the table
document.querySelector('#search').addEventListener('keypress', function(e: KeyboardEvent) {
if (e.keyCode !== 13) return;
country_table.find(this.value);
});