MapTable: Global Airport Markers with filters - +6000 rows, markers grouped by city, tooltip by melalj

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: Global Airport Markers with filters - +6000 rows, markers grouped by city, tooltip</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('global_airports.csv')
    .map({
      path: 'ne_110m_admin_0_countries.json',
      autoFitContent: true,
      markers: {
        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].city + ', ' + a.values[0].country + '</h3>';
            out += '<div class="popover-content">';
            for (i = 0; i < a.values.length; i++) out += " • " + a.values[i].name + "<br>";
            out += "</div>";
          }
          return out;
        },
        attr: {
          r: {
            min: 1,
            max: 10,
            rollup: function(groupedData) {
              return groupedData.length;
            }
          },
        }
      }
    })
    .filters()
    .render();
</script>


</body>
</html>