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

<!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>

if (filtersDescription !== '') out += " — " + filtersDescription;
          return out;
        },
        source: function() {
          return 'Source: <a xlink:href="https://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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js

https://packet-clearing-house.github.io/maptable/maptable.min.js