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

xxxxxxxxxx
 
<!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="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>
​
    