Football fanatic who loves diving into the data.
Published
Edited
Mar 16, 2021
md`# CAP 6737 - Assignment 08`
{
var data = [
{
type: 'scattermapbox',
// locationmode: 'USA-states',
lat: UAflights.map(d=>d.lat),
lon: UAflights.map(d=>d.long),
// hoverinfo: 'text',
// text: hoverText,
mode : 'markers',
marker: {
size : 5,
color : 'rgb(255, 0, 0)'
}
},
{
type: 'scattermapbox',
locationmode: 'world-countries',
lat: flightpathlats,
lon: flightpathlons,
mode: 'lines',
line :{
width : 1,
color : 'red',
},
opacity : 0.5
}
];
var layout = {
title: 'Flight Paths for United Airlines',
mapbox: {
center: {lat:37.0902,lon:-95.7129},
style: "open-street-map", zoom: 0
},
width: 900,
height: 500,
margin: {t: 30, b: 0},
showlegend: false
};
const myDiv = DOM.element("div")
Plotly.newPlot(myDiv, data, layout, {showLink: false});
return myDiv
}
flightpathlats={
const lats = [];
UAflights.forEach(d=>{
lats.push(d.sourceLat);
lats.push(d.targetLat);
lats.push(null);
})
return lats;
}
flightpathlons={
const lons = [];
UAflights.forEach(d=>{
lons.push(d.sourceLon);
lons.push(d.targetLon);
lons.push(null);
})
return lons;
}
UAflights = globalAirportTraffic.filter(d => d.airline == "UA")
globalAirportTraffic = {
const rawRouteData = await d3.text(
"https://raw.githubusercontent.com/jpatokal/openflights/master/data/routes.dat"
);
const routHeading =
"airline,airlineID,sourceAirportCode,sourceAirportID,destinationAirportCode,destinatinAirportID,codeshare,stops,equipment\n";
const routeData = d3.csvParse(routHeading + rawRouteData, d3.autoType);
const rawAirportData = await d3.text(
"https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat"
);
const airportDataHeading =
"AirportID,Name,City,Country,IATA,ICAO,Latitude,Longitude,Altitude,Timezone,DST,Tz,Type,Source\n";
const airportData = d3.group(
await d3.csvParse(airportDataHeading + rawAirportData, d3.autoType),
d => d.IATA
);
return routeData
.filter(d => {
mutable feedback = [d.sourceAirportCode, d.destinationAirportCode, d];
const s_airport = airportData.get(d.sourceAirportCode);
const t_airport = airportData.get(d.destinationAirportCode);
return s_airport && t_airport;
})
.map(d => {
const s_airport = airportData.get(d.sourceAirportCode)[0];
const t_airport = airportData.get(d.destinationAirportCode)[0];
return {
airline: d.airline,
sourceLat: s_airport.Latitude,
sourceLon: s_airport.Longitude,
targetLat: t_airport.Latitude,
targetLon: t_airport.Longitude
};
});
/*
// Data Source https://openflights.org/data.html#route
Airline ID Unique OpenFlights identifier for airline (see Airline).
Source airport 3-letter (IATA) or 4-letter (ICAO) code of the source airport.
Source airport ID Unique OpenFlights identifier for source airport (see Airport)
Destination airport 3-letter (IATA) or 4-letter (ICAO) code of the destination airport.
Destination airport ID Unique OpenFlights identifier for destination airport (see Airport)
Codeshare "Y" if this flight is a codeshare (that is, not operated by Airline, but another carrier), empty otherwise.
Stops Number of stops on this flight ("0" for direct)
Equipment
*/
}
md`## Import Libraries`
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
import {radio,select} from "@jashkenas/inputs"
d3 = require("d3@6")
mutable feedback = ""
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.
