block by melalj 772c8a846a3f308e9358

MapTable: GDP by countries - legend, title, tooltip, scaled color for countries

Full Screen

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://packet-clearing-house.github.io/maptable/maptable.css">
  <title>MapTable: GDP by countries - legend, title, tooltip, scaled color for countries</title>
</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script src="https://packet-clearing-house.github.io/maptable/maptable.min.js"></script>

<div id="vizContainer" class='container'></div>

<script>
    var viz = d3.maptable('#vizContainer')
    .csv('gdp.csv')
    .map({
      path: 'ne_110m_admin_0_countries.json',
      zoom: false,
      countryIdentifierKey: 'Country Code',
      countryIdentifierType: 'iso_a3',
      title: {
        bgColor: "#F5F5F5",
        fontSize: "11",
        content: function(countShown, countTotal, filtersDescription) {
          if (countShown === 0 || countTotal === 0) out = "No data shown";
          else if (countShown < countTotal) out = 'Showing <tspan font-weight="bold">' + countShown + '</tspan> from <tspan font-weight="bold">' + countTotal + "</tspan>";
          else out = '<tspan font-weight="bold">' + countTotal + "</tspan> shown";

          if (filtersDescription !== '') out += " — " + filtersDescription;
          return out;
        },
        source: function() {
          return 'Source: <a xlink:href="//www.example.com" target="_blank"><tspan font-weight="bold">example.com</tspan></a>';
        }
      },
      countries: {
        attr: {
          fill: {
            min: '#FFFFFF',
            max: '#FF00FF',
            empty: '#FFFFFF',
            legend: true,
            rollup: function(values) {
              if (values.length > 0) {
                return parseFloat(values[0]['GDP']);
              }
              return NaN;
            },
          },
        },
        tooltip: function(a) {
          out = '<div class="arrow"></div>';
          if (a.values.length === 0) {
            out += '<h3 class="popover-title"> ' + a.key + '</h3>';
            out += '<div class="popover-content">N/A</div>';
          } else {
            out += '<h3 class="popover-title"> ' + a.values[0]['Country Name'] + '</h3>';
            out += '<div class="popover-content">' + a.values[0]['GDP'] + '</div>';
          }
          return out;
        },
      }
    })
    .render();
</script>


</body>
</html>

gdp.csv

Country Name,Country Code,GDP
Aruba,ABW,
Andorra,AND,
Afghanistan,AFG,633.569247
Angola,AGO,
Albania,ALB,4564.390339
Arab World,ARB,7386.428444
United Arab Emirates,ARE,43962.71369
Argentina,ARG,12509.53112
Armenia,ARM,3873.533566
American Samoa,ASM,
Antigua and Barbuda,ATG,13432.07933
Australia,AUS,61925.49606
Austria,AUT,51190.80825
Azerbaijan,AZE,7884.190236
Burundi,BDI,286.0023359
Belgium,BEL,47352.94291
Benin,BEN,903.464924
Burkina Faso,BFA,713.0638897
Bangladesh,BGD,1086.807079
Bulgaria,BGR,7851.265428
Bahrain,BHR,24855.21564
"Bahamas, The",BHS,22217.49414
Bosnia and Herzegovina,BIH,4790.049658
Belarus,BLR,8040.047557
Belize,BLZ,4831.177552
Bermuda,BMU,
Bolivia,BOL,3124.080762
Brazil,BRA,11384.41501
Barbados,BRB,15366.29261
Brunei Darussalam,BRN,40979.64194
Bhutan,BTN,2560.501154
Botswana,BWA,7123.339241
Central African Republic,CAF,358.5378359
Canada,CAN,50235.38551
Central Europe and the Baltics,CEB,14086.52181
Switzerland,CHE,85594.3266
Channel Islands,CHI,
Chile,CHL,14528.32581
China,CHN,7590.016441
Cote d'Ivoire,CIV,1545.942249
Cameroon,CMR,1407.403413
"Congo, Rep.",COG,3147.072161
Colombia,COL,7903.925773
Comoros,COM,810.0757668
Cabo Verde,CPV,3641.107656
Costa Rica,CRI,10415.44438
Caribbean small states,CSS,10164.32096
Cuba,CUB,
Curacao,CUW,
Cayman Islands,CYM,
Cyprus,CYP,27194.39184
Czech Republic,CZE,19529.84356
Germany,DEU,47821.91746
Djibouti,DJI,1813.596566
Dominica,DMA,7244.495847
Denmark,DNK,60707.24937
Dominican Republic,DOM,6163.575857
Algeria,DZA,5484.066806
East Asia & Pacific (developing only),EAP,6240.403751
East Asia & Pacific (all income levels),EAS,9475.349629
Europe & Central Asia (developing only),ECA,6874.299183
Europe & Central Asia (all income levels),ECS,25669.6634
Ecuador,ECU,6345.840725
"Egypt, Arab Rep.",EGY,3198.695058
Euro area,EMU,39589.27895
Eritrea,ERI,
Spain,ESP,29767.35156
Estonia,EST,20161.58179
Ethiopia,ETH,573.5659603
European Union,EUU,36422.63831
Fragile and conflict affected situations,FCS,1530.108685
Finland,FIN,49823.70137
Fiji,FJI,5112.322117
France,FRA,42732.5665
Faeroe Islands,FRO,
"Micronesia, Fed. Sts.",FSM,3057.091025
Gabon,GAB,10772.06175
United Kingdom,GBR,46331.97741
Georgia,GEO,3669.981392
Ghana,GHA,1441.636453
Guinea,GIN,539.615775
"Gambia, The",GMB,
Guinea-Bissau,GNB,567.8226103
Equatorial Guinea,GNQ,18918.27683
Greece,GRC,21498.41801
Grenada,GRD,8573.694067
Greenland,GRL,
Guatemala,GTM,3673.135843
Guam,GUM,
Guyana,GUY,4053.901904
High income,HIC,37755.81917
"Hong Kong SAR, China",HKG,40169.54364
Honduras,HND,2434.827162
Heavily indebted poor countries (HIPC),HPC,899.1611106
Croatia,HRV,13475.25896
Haiti,HTI,824.1597732
Hungary,HUN,14028.7221
Indonesia,IDN,3491.929717
Isle of Man,IMN,
India,IND,1581.510703
Not classified,INX,
Ireland,IRL,54374.35224
"Iran, Islamic Rep.",IRN,5442.874771
Iraq,IRQ,6420.372333
Iceland,ISL,52004.48575
Israel,ISR,37207.9945
Italy,ITA,34908.50097
Jamaica,JAM,5104.767757
Jordan,JOR,5422.570876
Japan,JPN,36194.41561
Kazakhstan,KAZ,12601.70348
Kenya,KEN,1358.262219
Kyrgyz Republic,KGZ,1269.139335
Cambodia,KHM,1094.576688
Kiribati,KIR,1509.521187
St. Kitts and Nevis,KNA,15510.39393
"Korea, Rep.",KOR,27970.49515
Kosovo,KSV,4051.648361
Kuwait,KWT,43593.70202
Latin America & Caribbean (developing only),LAC,9091.340195
Lao PDR,LAO,1793.470494
Lebanon,LBN,10057.88836
Liberia,LBR,457.8585865
Libya,LBY,6573.386737
St. Lucia,LCA,7647.529548
Latin America & Caribbean (all income levels),LCN,9869.902782
Least developed countries: UN classification,LDC,952.8938251
Low income,LIC,640.8066271
Liechtenstein,LIE,
Sri Lanka,LKA,3819.158392
Lower middle income,LMC,2002.636815
Low & middle income,LMY,4275.584267
Lesotho,LSO,1034.185288
Lithuania,LTU,16506.86425
Luxembourg,LUX,116664.2625
Latvia,LVA,15719.24202
"Macao SAR, China",MAC,96038.05072
St. Martin (French part),MAF,
Morocco,MAR,3190.310444
Monaco,MCO,
Moldova,MDA,2238.899885
Madagascar,MDG,449.4008297
Maldives,MDV,7635.484151
Middle East & North Africa (all income levels),MEA,8377.016821
Mexico,MEX,10325.64607
Marshall Islands,MHL,3529.748303
Middle income,MIC,4706.609704
"Macedonia, FYR",MKD,5455.594889
Mali,MLI,704.50744
Malta,MLT,
Myanmar,MMR,1203.844663
Middle East & North Africa (developing only),MNA,4313.130524
Montenegro,MNE,7378.46395
Mongolia,MNG,4129.373548
Northern Mariana Islands,MNP,
Mozambique,MOZ,585.6226826
Mauritania,MRT,1274.976949
Mauritius,MUS,10016.64864
Malawi,MWI,255.0445696
Malaysia,MYS,11307.06495
North America,NAC,54195.1006
Namibia,NAM,5408.243491
New Caledonia,NCL,
Niger,NER,427.3732403
Nigeria,NGA,3203.296824
Nicaragua,NIC,1963.054884
Netherlands,NLD,52172.17123
High income: nonOECD,NOC,18590.6337
Norway,NOR,97307.42159
Nepal,NPL,701.6800634
New Zealand,NZL,44342.16442
High income: OECD,OEC,43654.25144
OECD members,OED,38388.23702
Oman,OMN,19309.61245
Other small states,OSS,4802.580141
Pakistan,PAK,1316.61411
Panama,PAN,11948.85114
Peru,PER,6541.030564
Philippines,PHL,2872.512165
Palau,PLW,11879.67781
Papua New Guinea,PNG,2268.158717
Poland,POL,14342.91271
Puerto Rico,PRI,
"Korea, Dem. Rep.",PRK,
Portugal,PRT,22132.17414
Paraguay,PRY,4712.823312
Pacific island small states,PSS,3760.707986
French Polynesia,PYF,
Qatar,QAT,96732.40255
Romania,ROU,9996.670293
Russian Federation,RUS,12735.9184
Rwanda,RWA,695.6892586
South Asia,SAS,1504.158669
Saudi Arabia,SAU,24160.95854
Sudan,SDN,1875.843287
Senegal,SEN,1067.131753
Singapore,SGP,56284.57841
Solomon Islands,SLB,2024.190415
Sierra Leone,SLE,765.9591973
El Salvador,SLV,4119.992023
San Marino,SMR,
Somalia,SOM,542.615884
Serbia,SRB,6152.867126
Sub-Saharan Africa (developing only),SSA,1776.46367
South Sudan,SSD,1115.093516
Sub-Saharan Africa (all income levels),SSF,1792.172048
Small states,SST,5965.714104
Sao Tome and Principe,STP,1810.721567
Suriname,SUR,9680.115914
Slovak Republic,SVK,18501.15286
Slovenia,SVN,23999.13133
Sweden,SWE,58938.77275
Swaziland,SWZ,3477.149243
Sint Maarten (Dutch part),SXM,
Seychelles,SYC,15543.21478
Syrian Arab Republic,SYR,
Turks and Caicos Islands,TCA,
Chad,TCD,1024.668452
Togo,TGO,635.0442677
Thailand,THA,5977.380587
Tajikistan,TJK,1114.007483
Turkmenistan,TKM,9031.51157
Timor-Leste,TLS,1169.038707
Tonga,TON,4113.993493
Trinidad and Tobago,TTO,21323.75471
Tunisia,TUN,4420.698435
Turkey,TUR,10515.00782
Tuvalu,TUV,3826.902901
Tanzania,TZA,955.1413114
Uganda,UGA,714.5673454
Ukraine,UKR,3082.461447
Upper middle income,UMC,8000.318068
Uruguay,URY,16806.77327
United States,USA,54629.49517
Uzbekistan,UZB,2036.691723
St. Vincent and the Grenadines,VCT,6668.886105
"Venezuela, RB",VEN,
Virgin Islands (U.S.),VIR,
Vietnam,VNM,2052.294202
Vanuatu,VUT,3147.963779
West Bank and Gaza,PSE,2965.903675
World,WLD,10721.41704
Samoa,WSM,4172.2171
"Yemen, Rep.",YEM,
South Africa,ZAF,6482.821479
"Congo, Dem. Rep.",COD,442.3395394
Zambia,ZMB,1721.623274
Zimbabwe,ZWE,931.198187