Public
Edited
Feb 14, 2023
airports = "https://cdn.jsdelivr.net/npm/vega-datasets@1.31.1/data/airports.csv"
airportDelays = FileAttachment("Airline_Delay_Cause.csv").csv()
airportDelaysFiltered = airportDelays.filter((row)=>
row.airport === "SEA" || row.airport === "SFO" || row.airport === "LAX" ||
row.airport === "ATL" || row.airport === "DFW" || row.airport === "DEN" ||
row.airport === "ORD" || row.airport === "CLT" || row.airport === "PHX" ||
row.airport === "MCO" || row.airport === "JFK" || row.airport === "BZN" ||
row.airport === "FAI" || row.airport === "HNL");
selectAirports = FileAttachment("selectAirports@1.csv").csv();
totalAirportData = {
let output = [...airportDelaysFiltered];
output.forEach((data) => {
let result = selectAirports.filter((airport) => {
return airport.iata === data.airport;
});
data.latitude = result[0] ? result[0].latitude : null;
data.longitude = result[0] ? result[0].longitude : null;
});
return output;
}
sumData = {
let uniques = [];
totalAirportData.forEach(d => {
let i = uniques.findIndex(function (e) {
return e.month === d.month &&
e.airport === d.airport
});
if (i < 0) {
uniques.push({
year: d.year,
month: d.month,
airport: d.airport,
latitude: d.latitude,
longitude: d.longitude,
arr_del15: parseInt(d.arr_del15),
arr_flights: parseFloat(d.arr_flights),
"Avg Daily Arrival Flights": 0,
"Percent Delayed (%)": 0,
count: 1,
"Airport Name": d.airport_name,
"Airport Code": d.airport,
arr_cancelled: parseInt(d.arr_cancelled)
});
} else {
uniques[i].arr_del15 += (Number(parseFloat(d.arr_del15)) ? parseFloat(d.arr_del15) : 0);
uniques[i].arr_flights += (Number(parseFloat(d.arr_flights)) ? parseFloat(d.arr_flights) : 0);
uniques[i].count += 1;
}
})
uniques.forEach(d => {
d.arr_del15 = d.arr_del15 / d.count;
d.arr_flights = d.arr_flights / d.count;
d["Avg Daily Arrival Flights"] = parseInt(d.arr_flights);
d["Percent Delayed (%)"] = parseInt(100 * d.arr_del15 / d.arr_flights);
})
return uniques;
}
import {vl} from "@vega/vega-lite-api-v5"
import {usa} from "@uwdata/cartographic-visualization"
mapp = {
const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(usa).feature('states'));
const param = vl.param("sel_month")
.value(1)
.bind(vl.slider(1, 12, 1).name('Month: '))
const points = vl.markPoint(
// {size: getTotal({expr: "sel_month"})} // Need to aggregate values instead of stacking
{size: {expr: "datum.arr_flights * 2.3"}}
)
.data(sumData)
.transform(
vl.filter("datum.month == sel_month")
)
.encode(
vl.latitude().fieldQ('latitude'),
vl.longitude().fieldQ('longitude'),
vl.tooltip([vl.fieldN('Airport Code'), vl.fieldN('Airport Name'), vl.fieldQ('Percent Delayed (%)'), vl.fieldQ('Avg Daily Arrival Flights')]),
vl.fill().fieldQ('Percent Delayed (%)').scale({ scheme: "redyellowblue", reverse: true, domain: [0.0, 30.0]})
);
return vl.layer(map, points)
.project(vl.projection('albersUsa'))
.width(700).height(500)
.params(param)
.config({view: {stroke: null},header: {title: "hi"}})
.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.
