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