import {vl} from "@vega/vega-lite-api-v5"
// Data from Openflights "https://openflights.org/data.html"
airports = FileAttachment("airports.csv").csv()
//Datasets from Kaggle "https://www.kaggle.com/datasets/moonnectar/airline-routes-92k-and-airports-10k-dataset?select=Full_Merge_of_All_Unique+Airports.csv"
externalAirports = FileAttachment("Full_Merge_of_All_Unique Airports.csv").csv()
externalRoutes = FileAttachment("Full_Merge_of_All_Unique_Routes.csv").csv()
import { tidy, groupBy, max, summarize, rename, innerJoin, count, filter } from '@pbeshai/tidyjs'
departuresCount = tidy(
externalRoutes,
groupBy("Departure", count("Departure")),
rename({Departure: "ID", n: "departures_amount"})
)
airportsFinal = tidy(
externalAirports,
rename({Label: "name"}),
innerJoin(airports, {by: "name"}),
innerJoin(departuresCount, {by: "ID"})
)
airportsDepartureMax = tidy(
externalRoutes,
groupBy("Departure", count("Departure")),
rename({Departure: "ID", n: "departures_amount"}),
summarize({departures_amount: max("departures_amount")}),
innerJoin(airportsFinal, {by: "departures_amount"})
)
worldCountryTopo = await d3.json("https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json");
{
const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(worldCountryTopo).feature('countries1'))
.project(
vl.projection('naturalEarth1') //Need to use naturalEarth Projection otherwise won't match to airports layer
);
const airports_total_layer = vl.markCircle({size: 1, opacity: 1})
.data(airportsFinal)
.encode(
vl.longitude().fieldQ('longitude'),
vl.latitude().fieldQ('latitude'),
vl.size().fieldQ('departures_amount'),
vl.stroke().value("steelblue"),
vl.tooltip([vl.fieldN('name'), vl.fieldN('departures_amount')])
);
const airports_max_layer = vl.markCircle({size: 1, opacity: 1})
.data(airportsDepartureMax)
.encode(
vl.longitude().fieldQ('longitude'),
vl.latitude().fieldQ('latitude'),
vl.size().fieldQ('departures_amount'),
vl.fill().value("red"),
vl.tooltip([vl.fieldN('name'), vl.fieldN('departures_amount')])
);
return vl.layer(map, airports_total_layer, airports_max_layer)
.width(800).height(500)
.render()
}
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.
