Public
Edited
Dec 12, 2023
import {vl} from "@vega/vega-lite-api"
import {uniqueValid} from "@uwdata/data-utilities"
airports = "https://vega.github.io/vega-datasets/data/airports.csv"
flights = "https://vega.github.io/vega-datasets/data/flights-airport.csv"
d3 = require("d3@7")
flightsData = fetch("https://raw.githubusercontent.com/axz2000/data/master/flights_airlineDIFF.csv")
.then(response => response.text())
.then(text => d3.csvParse(text));
// processedData = flightsData.map(d => {
// const date = new Date(d.Date);
// const month = (date.getMonth() + 1).toString().padStart(2, '0');
// return {...d, Month: month};
// });
processedData = flightsData.map(d => {
const date = new Date(d.Date);
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const airlineName = d["Airline Name"].split(" ")[0]; // Get the first word of the airline name
return {...d, Month: month, "Airline Name": airlineName}; // Update the "Airline Name" field
});
filteredData = processedData.filter(d => {
const date = new Date(d.Date);
const month = (date.getMonth() + 1).toString().padStart(2, '0');
return selectedMonth === "" || month === selectedMonth;
});
{
const airlineScale = {
domain: [
'United',
'Delta',
'American',
'Southwest',
'Hawaiian',
'Frontier'
],
range: ["#e08484", "#cee084", "#84e0a9", "#84a9e0", "#ce84e0", "#A0BC7B"]
};
const hover = vl.selectSingle('Hover')
.on('mouseover')
.clear('mouseout')
.nearest(true);
const totalFlightsChart = vl.markArea()
.encode(
vl.x().fieldT('Date').axis({ title: 'Date', format: '%b' }),
vl.y().fieldQ('Total Flights').stack('zero').axis({ title: 'Total Flights' }),
vl.color().fieldN('Airline Name').scale(airlineScale).title('Airlines'),
vl.tooltip(['Date', 'Airline Name', 'Total Flights'])
)
.data(filteredData)
.width(width)
.height(500);
// Bottom Chart: Percent Delayed by Day by Airline with Moving Average
const percentDelayedChart = vl.markLine()
.encode(
vl.x().fieldT('Date').axis({ title: 'Date', format: '%b' }),
vl.y().fieldQ('Percent Delayed').axis({ title: 'Percent Delayed' }),
vl.color().fieldN('Airline Name').scale(airlineScale).title('Airlines'),
vl.tooltip(['Date', 'Airline Name', 'Percent Delayed'])
)
.transform(
// Define the window transform for the moving average
{
window: [{ op: 'mean', field: 'Percent Delayed', as: 'Moving Average' }],
frame: [-7, 7], // 7 days before and after
groupby: ['Airline Name'] // Group by airline to calculate separate moving averages
}
)
.encode(
// Use the calculated moving average field for the y-axis
vl.y().fieldQ('Moving Average').axis({ title: 'Moving Average Percent Delayed' })
)
.data(filteredData)
.width(width)
.height(500);
return vl.vconcat(totalFlightsChart, percentDelayedChart)
.autosize({ type: 'fit-x', contains: 'padding' })
.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.
