mapDiv = html`<div style="width: 100%; height: 600px;"></div>`;
chartmap(data, mapDiv);
// Load the airport data from openflight dataset
aiportData = FileAttachment("airports.csv").csv();
import {printTable} from '@uwdata/data-utilities'
import {vl} from '@vega/vega-lite-api'
printTable(aiportData.slice(0, 10))
// Load the country data from openflight dataset
countryData = FileAttachment("countries.csv").csv();
printTable(countryData.slice(0, 10))
import { Choropleth } from "@d3/choropleth"
function airportcount() {
const countryCodeMap = new Map();
countryData.forEach(country => {
const countryCode = country.code;
const countryName = country.name;
countryCodeMap.set(countryCode, countryName);
});
const airportCountWithCode = []
const airportsByCountry = new Map();
aiportData.forEach(airport => {
const countryCode = airport.iso_country;
const countryName = countryCodeMap.get(countryCode);
const airportCount = airportsByCountry.get(countryName) || 0;
airportsByCountry.set(countryName, airportCount + 1);
});
const airportCounts = [];
airportsByCountry.forEach((count, countryName) => {
const code = [...countryCodeMap.entries()]
.filter(({ 1: v }) => v === countryName)
.map(([k]) => k);
const code_1 = code[0]
airportCounts.push({ countryName, count ,code_1});
});
return airportCounts;
}
function chartmap(data, mapContainer) {
const map = L.map(mapContainer).setView([20, 0], 2);
// Load the GeoJSON data for the world map
fetch("https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json")
.then(response => response.json())
.then(worldData => {
// Add the world map to the Leaflet map
L.geoJSON(worldData, {
style: feature => {
// Get the airport count for the current country
const countryName = feature.properties.name;
const countryData = data.find(d => d.countryName == countryName);
const airportCount = countryData ? countryData.count : 0;
// Calculate the fill color based on the airport count
const fillColor = airportCount > 1000 ? "#800026"
: airportCount > 500 ? "#BD0026"
: airportCount > 200 ? "#E31A1C"
: airportCount > 100 ? "#FC4E2A"
: airportCount > 50 ? "#FD8D3C"
: airportCount > 10 ? "#FEB24C"
: airportCount > 0 ? "#FED976"
: "#FFFFFF";
return { fillColor, weight: 1, color: "#333", fillOpacity: 0.7 };
},
onEachFeature: (feature, layer) => {
// Add a tooltip with the country name and airport count
const countryName = feature.properties.name;
const countryData = data.find(d => d.countryName == countryName);
const airportCount = countryData ? countryData.count : 0;
layer.bindTooltip(`${countryName}: ${airportCount.toLocaleString()}`, { sticky: true });
}
}).addTo(map);
});
return map
}
data = airportcount();
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
