2b:null 2c:["$","title",null,{"children":"A4 Interactive Project - 2018 US Flight Delays | ShamPow | Observable"}] 31:T653,{ const origin = vl.selectSingle('Select') .fields('Month') .init({Month: 'Jan'}) .bind(vl.menu(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'])); const scale = { domain: ['>30.8%', '>23.3% and <30.8%', '>8.3% and <23.3%', '>0.8% and <8.3%', '<0.8%'], range: ["#d7191c","#fdae61","#ffffbf","#a6d96a","#1a9641"] }; const map = vl.markGeoshape({fill: '#ddd', stroke: 'black', strokeWidth: 0.07}) .data(vl.topojson('data/us-10m.json').feature('states')); const foreign = vl.data('data/airports.csv').key('iata').fields('latitude', 'longitude'); const points = vl.markCircle() .data("https://raw.githubusercontent.com/axz2000/data/master/flights_map.csv") .transform( vl.lookup('Airport').from(foreign.fields('state', 'latitude', 'longitude')), vl.filter('datum.state !== "PR" && datum.state !== "VI" && datum.state !== 2'), vl.filter(origin) ) .select(origin) .encode( vl.latitude().fieldQ('latitude'), vl.longitude().fieldQ('longitude'), vl.size().fieldQ('Total Flights').scale({domain: [0, 30000], range: [50, 1200]}).title('Total Flights Scale'), vl.tooltip(['Airport Name','Delay Category','Total Flights']), vl.color().fieldN('Delay Category').scale(scale).title('Delay Scale'), vl.opacity().if(origin, vl.value(0.8)).value(0), vl.order().fieldQ('Total Flights').sort('ascending') ); return vl.layer(map, points) .project(vl.projection('albersUsa')) .width(800).height(500) .config({view: {stroke: null}}) .render(); }32:T78f,{ const x = vl.x().fieldT('date').title(null); const brush = vl.selectInterval().encodings('x').resolve('global'); const click = vl.selectSingle('Select') // name the selection 'Select' const scale = {domain: ['United Air Lines Inc. (1960 - )', 'Delta Air Lines Inc. (1960 - )', 'American Airlines Inc. (1960 - )', 'Southwest Airlines Co. (1979 - )', 'Hawaiian Airlines Inc. (1960 - )', 'Frontier Airlines Inc. (1994 - )'], range: ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b"]}; const plot1 = vl.markPoint({filled: true}) .select(brush,click) .encode( vl.x().timeMD('Date').axis({title: 'Date', format: '%b'}), vl.color().value('lightgray') .if(click, vl.color().fieldN('Airline Name').scale(scale).title('Airlines')), vl.size().fieldQ('Number of Delays').scale({domain: [0, 2380], range: [20, 200]}).title('Number of Delays'), vl.order().fieldQ('Number of Delays').sort('descending'), vl.tooltip(['Percent Delayed','Number of Delays','Total Flights','Airline Name']), vl.y().fieldQ('Percent Delayed').scale({domain: [0, 0.6]}).axis({title: 'Percent Delayed'}) ) .width(width) .height(300) .transform(vl.filter(brush,click)); const line = vl.markLine({opacity:0.75}) .select(click,brush) .encode( vl.x().timeMD('Date').axis({title: 'Date', format: '%b'}), vl.y().fieldQ('Flight Differential').axis({title: 'Flight Differential'}), vl.tooltip(['Total Flights','Flight Differential','Airline Name']), vl.color().value('lightgray') .if(click, vl.color().fieldN('Airline Name').scale(scale).title('Airline Name')) ) .width(width); return vl.vconcat(plot1, //line.encode(x.scale({domain: brush})), line.select(brush).height(200)) .data('https://raw.githubusercontent.com/axz2000/data/master/flights_airlineDIFF.csv') .autosize({type: 'fit-x', contains: 'padding'}) .render(); }33:T1052,md`

# Discussion While working on our A3 project, our team came up with an idea for our A4 to cover the parts of the dataset that we have not been able to explore in our A3. Our initial goal of the A4 project, then, was to create a U.S. Bubble map that shows all the airports in the states and how often they get delayed, having interactive dots and sliders so that the users can navigate the data. In this project, Alan managed most of the data cleaning portion of the project, Will managed most of the visualization aspect of the project, and I (Irene) focused more on gathering resources and doing user testings. To begin with the project, we first had to obtain our dataset, which was from the 2018 Reporting Carrier On-Time Performance data from FAA. We had to download each monthly data separately and parsed through the massive dataset (~7 million lines) to include clean data of each line representing a specific flight, its origin, destination, airline, date, and whether or not it was delayed more than 15 minutes. Then, the cleaned dataset was transformed into two different csv files to achieve different goals of the project. The first csv file was targeted for the map visualization, so we focused on grouping it by origin airport by month and calculated each delay percentage compared by the mean 2018 delay to break them up into different bins (+/- 1,2 stdev away from the mean). The next csv file was targeted for the line and bubble chart, so we grouped each airline by each day of the year and calculated total flights relative to mean flights per day and delay percentage per day for six different airlines. After parsing our data, we created two main visualizations, one being the United States Bubble map that shows all the airports in the states and their delay percentage and the other being the line and bubble chart that allows a user to navigate the delays by each airline in more detail. Although our initial thought process involved a bubble map with dots that represent the total outbound flights at each airport and the delay of the flights in each airport accompanied with a slider to adjust the month of the flights, we settled on using a menu button to choose the corresponding months and had the dots represent the total flights and the delay scale that shows which airports have a better or worse average (outbound) delay percentage per month. This was due to the challenge we encountered when we tried to integrate the slider with the map, we couldn’t figure out how to integrate the slider properly with the Bubble map that we were using, since the visualization we were using relied heavily upon the API already in use. However, to make up for our shortcomings, we replaced the slider with a set of menu selections and although it may not be as smooth as sliding the month on a slider, it still gives users enough freedom to explore the map and the data month by month. This is one of the things that we would improve if we had another week to work on the project. From the testings, we have learned that the colors of the delay were deceiving because the delays were represented by different saturations of the same color. To prevent that from happening, we restructured how we calculated the delay percentage by breaking them up by different standard deviations above or below the mean delay time and using color schemes from the d3 color palette to clearly visualize which flights were less delayed and which were heavily delayed. Also for our second set of visualizations (comparing delays by airlines), there was a lot of feedback regarding how hard it was to isolate a single set of data from the entire graph so that the user can have a closer look into a single airline. To prevent that from happening, we also included another set of visualizations at the end where users are able to select a specific airline isolating the data for just that specific airline in both the bubble chart and the line graph. If we had another week to work on this project, we would definitely work on integrating these two features into one interactive visualization global visualization with continued improvement on user navigation.` 34:[] 2f:{"id":"d6eb96c042aac87b","slug":"interactive-map-and-bar","title":"A4 Interactive Project - 2018 US Flight Delays","thumbnail":"32cde4acde59e497b54c4bf3fb6999bdcab5061f522bada3a2b3c0b9c8ce4648","access_level":"public","create_time":"$D2019-10-26T21:36:38.303Z","update_time":"$D2020-05-02T18:10:07.043Z","view_time":null,"first_public_time":"$D2019-10-26T22:45:01.361Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"355287568c324edf","login":"williamshamma","name":"ShamPow","avatar_url":"https://avatars-next.observableusercontent.com/7095c3ff1a6862f80ef7294bdc919117d923ff74bcd30d915a7deb888a436345","tier":"starter_2024"},"version":694,"publish_version":694,"role":null,"authored":false,"authors":[{"type":"individual","id":"273ac36a18dc5f14","login":"williamshamma","name":"ShamPow","avatar_url":"https://avatars-next.observableusercontent.com/7095c3ff1a6862f80ef7294bdc919117d923ff74bcd30d915a7deb888a436345","tier":null}],"members":[{"type":"individual","id":"273ac36a18dc5f14","login":"williamshamma","name":"ShamPow","avatar_url":"https://avatars-next.observableusercontent.com/7095c3ff1a6862f80ef7294bdc919117d923ff74bcd30d915a7deb888a436345","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"84ef2d753dadcc26","slug":"visualization-pieces","title":"Visualization Pieces","owner":{"id":"355287568c324edf","login":"williamshamma","name":"ShamPow"}},"type":"notebook","body":{"title":"A4 Interactive Project - 2018 US Flight Delays","cells":[{"id":509,"value":"md`\n

\n# A4 Interactive Project - 2018 US Flight Delays\n\n\nTeam WhereWeDroppin - William Shamma (ws2516), Irene Nam (yn2334), Alan Zhang (axz2000)\n\nBubble Map - Interactive Map that shows *delay percentage's for each airport* based on *all flights departed* per *month*\n\nLinked Line Chart and Bubble Plot - Scatterplot showing airline delays day by day for 6 major US carriers with a line plot showing their *number of flights per day* above or below the *average of the total flights per day*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"md`\n

\n# Data Processing\n\nWe decided to visualize the FAA 2018 Reporting Carrier On-Time Performance dataset. Link: https://www.transtats.bts.gov/Tables.asp?DB_ID=120&DB_Name=Airline%20On-Time%20Performance%20Data&DB_Short_Name=On-Time\n\nOnly the geographic position and US topological datasets were imported, all other data was processed from the DOT .csv files (python pandas processing was implemented)\n\nProcessed data hosted on github - https://github.com/axz2000/data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"md`\n

\n# Imported Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {uniqueValid} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"datasets = require('vega-datasets@1.25')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"usa = datasets['us-10m.json']()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"airports = \"https://vega.github.io/vega-datasets/data/airports.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"flights = \"https://vega.github.io/vega-datasets/data/flights-airport.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"md`\n

\n# Interactive Flight Delay Bubble Map\n\n\n### Description:\nBubble Map with flight totals represented by circles mapped to the geographic location of the flight's origin airports. \n\n**Circle Size:** number of flights per month – with option to select by month of 2018. \n\n**Delay Scale:** which airports have a better (or worse) than average *delay percentages* per month – *delay percentage* is the percent of outbound flights that have been delayed. Each color change is one standard deveation from the mean delay percentage in the US for that month\n\n### Interactive Elements:\nMouseover circles to see exact *delay percentage, full airport name, total number flights, delay category (based on percentage of delays)*. Click through the different months to see how the delay scale changes for each airport over time with respect to both flight totals and flight delays.`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`\n

\n# Interactive Line Chart and Bubble Plot\n\n\nLine Chart and Bubble plot with delay percentage/number of flights for 6 major carriers day by day\n\n**Y-axis Position:** Delay Percentage\n\n**X-axis Position:** Time\n\n**Circle Size:** Number of Delays (gives an indication as to the total number of flights)\n\nThe line graph tracks the number of flights/day for each of the carriers. Click and drag on either to see the corresponding time window highlighted on the other display – the smallest unit is *one day*. Use the selector to view the data for one airline against the rest.\n\nUpon your first selection of Airline, the visualization will update to that selection (to view all airlines simply click anywhere on the visualization).\n\nYou can also mouseover any points to see the specific data encoded.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md`\n

\n# Resources and Inspiration\n\nFinally, in order to complete our project, the original API that we used and the API documentation for those really helped us visualize what all we had to show the users. Here are the list of resources that helped us throughout the project:\n\n- Links from imported libraries\n\n- Our A3 project\n\n- Vega-lite package\n\n- FAA Transtats\n\n- These two observable interaction notebooks: https://observablehq.com/@uwdata/interaction , https://observablehq.com/@dsasmal/data-marks-and-visual-encodings\n\n- Mike Bostocks Flight Bubble Map Voronoi: http://mbostock.github.io/d3/talk/20111116/airports.html\n\n- Observable Color Palettes: https://observablehq.com/@d3/color-schemes\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`\n

\n# Failed Attempts\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"md`\n

\nInstead of a selector we tried using a slider to select data by month. We could get the slider to render, but ultimately could not get it to link to the data. WIth only 12 months to select between, we felt that the selection tool was a viable subsitute.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"html` $\"Screen-Shot-2019-10-28-at-11-37-17-PM\"$ `\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"md`\n

\nColor scheme / category name / weird data linking - Here we explored trying to categorize the colors but the color scheme defaulted to did not distinguish between magnitudes well. We also did not like having the ordinal place holders of 0-4 as category names.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"html` $\"Screen-Shot-2019-10-28-at-11-48-28-PM\"$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"md`\n

\nColor schema / data linking - We wanted to switch to a color scheme centered around the mean delay but felt that the grey blended in with the background color too much, especially for closely overlapping circles. This made it difficult to distinguish between nearby airports. In addition, when mousing over we initially found the description box was only linking to december data despite the selector (not shown). We fixed this by using “transform(vl.filter(selection))”`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"html` $\"Screen-Shot-2019-10-28-at-11-48-16-PM\"$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"md`\n

\nCategory names / colors / circle sizes/ number of airlines / normalization - We wanted to show the potential seasonality of the total flights/day but we found it difficult since each airline flew a different number of overall flights. We solved this by setting each relative to its own mean (mean=0 on *y-axis*). We also switched from this default color scheme to the D3 palette where we could distinguish better between each airline. We also included Hawaiin and Frontier with more diverging delay patterns, changed from abbreviations to pulling in full names (linked to another FAA dataset), and fixing the circle sizes to better represent the actual number of daily delays\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"html` $\"Screen-Shot-2019-10-28-at-11-42-05-PM\"$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"