Old school D3 from simpler times

All examples By author By category About

melalj

Full window Github gist

MapTable: Global Airport by Countries - +6000 rows, Log scale for country colors, tooltip

<!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 by Countries - +6000 rows, Log scale for country colors, 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 id='mt-filters' class='panel panel-default'></div>
  <div id='mt-map'></div>
</div>

<script>
    var viz = d3.maptable('#vizContainer')
    .csv('global_airports.csv')
    .map({
      path: 'ne_110m_admin_0_countries.json',
      countryIdentifierKey: 'country',
      countryIdentifierType: 'name',
      autoFitContent: true,
      countries: {
        attr: {
          fill: {
            empty: '#FFFFFF',
            min: '#FFFFFF',
            max: '#0000FF',
            legend: true,
            transform: function(val) {
              if (val === 0) return 0;
              return Math.sqrt(val);
            },
            rollup: function(groupedData) {
              return groupedData.length;
            }
          },
        },
        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 + '</h3>';
            out += '<div class="popover-content">' + a.values.length+ ' airports</div>';
          }
          return out;
        },
      },
      markers: false,
    })
    .filters({
      show: ['country', 'city']
    })
    .columns({
      country: {
        type: 'dropdown'
      }
    })
    .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