Public
Edited
Mar 8, 2023
1 star
Insert cell
Insert cell
// reference of https://observablehq.com/@d3/bubble-chart
bubbleChart = BubbleChart(airport_data, {
label: d => d.iata,
value: d => d.departures_amount,
group: d => d.type,
title: d => d.name,
width: 800,
legend: {
title: "Airport Type",
items: [
{ label: "Large Airport", color: "steelblue" },
{ label: "Medium Airport", color: "orange" },
{ label: "Small Airport", color: "green" },
{ label: "Helipad", color: "purple" },
{ label: "Closed", color: "red" }
]
},
tooltip: d => {
return `<div><strong>${d.type}</strong></div>
<div>${d.iata}: ${d.departures_amount}</div>
<div>${d.name}</div>`;
}
});
Insert cell
// Data from Openflights "https://openflights.org/data.html"
airports = FileAttachment("airports_1.csv").csv();
Insert cell
//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("unique_Airports.csv").csv();
Insert cell
routes = FileAttachment("unique_Routes@1.csv").csv();
Insert cell
import { tidy, groupBy, max, summarize, rename, innerJoin, count, filter, group } from '@pbeshai/tidyjs'
Insert cell
departuresCount = tidy(
routes,
groupBy("Departure", count("Departure")),
rename({Departure: "ID", n: "departures_amount"})
)
Insert cell
airportsFinal = tidy(
externalAirports,
rename({Label: "name"}),
innerJoin(airports, {by: "name"}),
innerJoin(departuresCount, {by: "ID"})
)
Insert cell
airport_type = FileAttachment("airports_insight.csv").csv()
Insert cell
function joinAirportData(airport_data, airport_type) {
var result = [];
for (var i = 0; i < airport_data.length; i++) {
var airport = airport_data[i];
var matching_type = airport_type.find(function(d) {
return d["name"] === airport["name"];
});
if (matching_type) {
airport["type"] = matching_type["type"];
}
result.push(airport);
}
return result;
}
Insert cell
airport_data = joinAirportData(airportsFinal, airport_type);
Insert cell
import {BubbleChart} from "@d3/bubble-chart"
Insert cell

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.
Learn more