Skip to content

Instantly share code, notes, and snippets.

@napjon
Last active January 1, 2016 05:10
Show Gist options
  • Save napjon/3a36381045a0b872e312 to your computer and use it in GitHub Desktop.
Save napjon/3a36381045a0b872e312 to your computer and use it in GitHub Desktop.
Gist for showing the visualization

This is the visualization: http://bl.ocks.org/napjon/raw/3a36381045a0b872e312/

Summary

The visualization measures the performance of 2015 US Flight. Performance based on how much on time number of flights, and how it decrease vary based on number of flights delay,cancelled,diverted. Second plot measures delay across months based on carrier.

Design

When I visited RITA to get the data, I notice that they use pie chart for visualization. This is harder to measure based on the angle, and it doesn't span very well across month. So I want to build visualization like theirs but clearer and additional time series.I found one of Udacity material (link in References section) about time-series part-to-whole relationship is best explained with line plot, and each part can be compared across time. It's better than stacked bar chart since stacked bar harder to measure for each part.

The visualization use line+scatter for the plot. The reason behind came from Jonathan lecture's at Dimple Chapter of Udacity. Scatter plot is used when we have two numerical variables, and variables in x-axis is independent of one another. Since it's time series, the measurement depend on the earlier month. Line plot is great when we want to see up and down of something that we want to measure for time series. But line plot also has its downside. We don't know how many number of data points, and whether the data has missing values. This will obscure the data. We don't do any interpolation since this month is categorical variable. So no hovering between month. Because of these reasons, I choose line+scatter plot. Readers would know when something missing in the data, and they can see the points so they can hover over it to get the tooltip.

After collecting the feedback, in the first plot I notice that number of flights delay doesn't really cared that much, and they just prefer to have total delay altogether. So based on this, I will just use total number of flights delay. However on-time flights doesn't just decrease because of the delay, it's also caused by number of flights cancelled and diverted.

The original second visualization is how delay varied. One of Udacity reviewers gave me feedback that the visualization will still be exploratory, and better to show which airlines affect highest delay.

I also use preattentive attribute, correlates with Gestalt's Principles. With data, Hawaiian Airlines stands-out from the rest (Proximity). I also add red-color and leave the rest with gray line (Similarity). I still use different color for the dots since It will easier for readers to differentiate the line, which represent airline.

Feedback

Person 1

  • What do you notice in the visualization? I notice, there is no significant turn on both graph. Consistency on both fligh operation & delayed flight are steady.
  • What questions do you have about the data? No question
  • What relationships do you notice? The more flight operation, should be, the more chance delayed flight
  • What do you think is the main takeaway from this visualization? US flight operation runs steady
  • Is there something you don’t understand in the graphic? I think graphic quite clear. I understand.

Person 2

  • What do you notice in the visualization? I notice that the number of on-time flight is way more compare to the delay flight
  • What questions do you have about the data? With Such a high number of delayed flighht, how come the total Minutes is very small?
  • What relationships do you notice? The Relation between carrier Delay and Late Arrival is highly correlated base on totalhe second graph
  • What do you think is the main takeaway from this visualization? The Graph is pretty straight forward and easy to digest
  • Is there something you don’t understand in the graphic? I can’t really understand is there a relationship between number of flight with the amount of delays.

Person 3

  • y-axis is misleading, is it in minutes? Why so small?
  • Better to use bar chart type
  • We can just see delay line plot in detail at the plot below. No need in the first plot.

Resources

month,year,arr_flights,arr_del15,carrier_ct,weather_ct,nas_ct,security_ct,late_aircraft_ct,arr_cancelled,arr_diverted,arr_delay,carrier_delay,weather_delay,nas_delay,security_delay,late_aircraft_delay,Unnamed: 21,delay_minutes_per_delayed_flight,on_time_flights
10,2182245,486165.0,60079.0,19578.66,1166.03,19783.91,83.9,19466.64,2454.0,833.0,55253.8333333,20100.1833333,1820.41666667,13378.2833333,50.6666666667,19904.2833333,,54299.3460266,422799.0
01,2367625,469968.0,95951.0,28267.23,3311.58,29878.63,148.22,34345.34,11982.0,973.0,90664.3666667,28469.25,4384.78333333,21300.9166667,111.666666667,36397.75,,65687.3759187,361062.0
02,2335385,429191.0,95179.0,27635.04,4580.42,29530.35,111.35,33322.07,20517.0,1011.0,93926.6,28544.3333333,6854.41666667,22486.2166667,76.3333333333,35965.3,,65089.3190059,312484.0
03,2333370,504312.0,95452.0,30094.13,2348.12,28283.47,149.04,34577.51,11002.0,1172.0,90648.5,30311.3333333,3811.01666667,20481.55,109.766666667,35934.8333333,,64033.6319092,396686.0
04,2325310,485151.0,82247.0,24683.0,2772.98,26000.96,96.66,28693.24,4520.0,1380.0,76988.4666667,24843.2333333,3693.16666667,18633.7833333,61.0,29757.2833333,,59819.5697245,397004.0
05,2299115,496993.0,89645.0,26388.3,3639.07,26555.12,142.48,32919.97,5694.0,1658.0,90622.65,27798.6666667,5609.25,20910.8666667,95.1833333333,36208.6833333,,62182.069173,399996.0
06,2375685,503897.0,115742.0,35128.13,4362.28,31691.81,168.72,44390.9,9120.0,1930.0,122847.0,38272.2166667,6344.98333333,27181.1333333,118.066666667,50930.6,,69183.2383958,377105.0
07,2188290,520718.0,107627.0,32664.27,3246.54,29068.14,182.79,42465.66,4806.0,1528.0,106441.733333,33689.65,3874.46666667,22390.9166667,113.683333333,46373.0166667,,59982.0856852,406757.0
08,2198365,510536.0,94113.0,29043.78,3453.29,26605.48,252.92,34757.3,5052.0,1528.0,93607.85,30326.6333333,4429.86666667,21243.3833333,199.883333333,37408.0833333,,61744.713622,409843.0
09,2202395,464946.0,60061.0,19044.26,2021.54,19332.35,148.31,19514.45,2075.0,718.0,54859.7833333,19613.1833333,2284.05,13110.35,99.4666666667,19752.7333333,,56692.783814,402092.0
carrier_name,month,delay_minutes_per_delayed_flight
Alaska Airlines Inc.,10,52.0344396746
Alaska Airlines Inc.,01,54.5028661162
Alaska Airlines Inc.,02,57.0630874798
Alaska Airlines Inc.,03,63.2972121494
Alaska Airlines Inc.,04,48.2051989172
Alaska Airlines Inc.,05,43.9910093151
Alaska Airlines Inc.,06,57.0048162951
Alaska Airlines Inc.,07,52.8246555479
Alaska Airlines Inc.,08,51.7129443922
Alaska Airlines Inc.,09,50.2793836698
American Airlines Inc.,10,52.1103921657
American Airlines Inc.,01,53.1353955811
American Airlines Inc.,02,55.9322837275
American Airlines Inc.,03,53.4730296449
American Airlines Inc.,04,57.5424758766
American Airlines Inc.,05,58.4901417902
American Airlines Inc.,06,65.4959868506
American Airlines Inc.,07,55.4992304431
American Airlines Inc.,08,57.0953415772
American Airlines Inc.,09,53.6304743746
Delta Air Lines Inc.,10,52.5386455964
Delta Air Lines Inc.,01,53.3482014267
Delta Air Lines Inc.,02,53.5577520806
Delta Air Lines Inc.,03,58.3105247699
Delta Air Lines Inc.,04,55.876986475
Delta Air Lines Inc.,05,61.1946897734
Delta Air Lines Inc.,06,62.6819629133
Delta Air Lines Inc.,07,53.610425458
Delta Air Lines Inc.,08,56.224993046
Delta Air Lines Inc.,09,54.9170321033
Envoy Air,10,47.0248410532
Envoy Air,01,58.3817955703
Envoy Air,02,52.9186031481
Envoy Air,03,52.1254940443
Envoy Air,04,43.4259942124
Envoy Air,05,49.3520104245
Envoy Air,06,49.7148857023
Envoy Air,07,50.2569989743
Envoy Air,08,49.4396282085
Envoy Air,09,48.4284619798
ExpressJet Airlines Inc.,10,62.250534946
ExpressJet Airlines Inc.,01,68.5244814868
ExpressJet Airlines Inc.,02,64.5043810584
ExpressJet Airlines Inc.,03,63.9542620617
ExpressJet Airlines Inc.,04,64.6540781179
ExpressJet Airlines Inc.,05,67.4325726649
ExpressJet Airlines Inc.,06,70.452094865
ExpressJet Airlines Inc.,07,65.3750648432
ExpressJet Airlines Inc.,08,67.4385884556
ExpressJet Airlines Inc.,09,60.868778481
Frontier Airlines Inc.,10,57.3514937188
Frontier Airlines Inc.,01,61.7894296427
Frontier Airlines Inc.,02,68.633997444
Frontier Airlines Inc.,03,58.3079872361
Frontier Airlines Inc.,04,54.2444245909
Frontier Airlines Inc.,05,58.1734739523
Frontier Airlines Inc.,06,60.3863562192
Frontier Airlines Inc.,07,59.2592211478
Frontier Airlines Inc.,08,53.6350645475
Frontier Airlines Inc.,09,63.7770782084
Hawaiian Airlines Inc.,10,33.5315188995
Hawaiian Airlines Inc.,01,35.9980183555
Hawaiian Airlines Inc.,02,50.23100822
Hawaiian Airlines Inc.,03,44.6336929003
Hawaiian Airlines Inc.,04,46.977362847
Hawaiian Airlines Inc.,05,48.0989461063
Hawaiian Airlines Inc.,06,32.6164473036
Hawaiian Airlines Inc.,07,39.9067842359
Hawaiian Airlines Inc.,08,48.4417768005
Hawaiian Airlines Inc.,09,40.5687650745
JetBlue Airways,10,46.4751925856
JetBlue Airways,01,55.0421685119
JetBlue Airways,02,61.322766484
JetBlue Airways,03,59.994109266
JetBlue Airways,04,56.2122785425
JetBlue Airways,05,59.3761125845
JetBlue Airways,06,60.5010975797
JetBlue Airways,07,59.2632617092
JetBlue Airways,08,59.7388959872
JetBlue Airways,09,54.0735138891
SkyWest Airlines Inc.,10,55.9698754633
SkyWest Airlines Inc.,01,69.7280478516
SkyWest Airlines Inc.,02,65.3895702272
SkyWest Airlines Inc.,03,59.246094576
SkyWest Airlines Inc.,04,60.5906810582
SkyWest Airlines Inc.,05,63.7486496807
SkyWest Airlines Inc.,06,67.4865757362
SkyWest Airlines Inc.,07,60.5896968055
SkyWest Airlines Inc.,08,64.3663781498
SkyWest Airlines Inc.,09,61.3656730741
Southwest Airlines Co.,10,46.7749525516
Southwest Airlines Co.,01,45.5184009728
Southwest Airlines Co.,02,47.0464292236
Southwest Airlines Co.,03,50.9711761241
Southwest Airlines Co.,04,48.453570046
Southwest Airlines Co.,05,51.4950922461
Southwest Airlines Co.,06,54.7539162974
Southwest Airlines Co.,07,54.1325931223
Southwest Airlines Co.,08,53.6930880924
Southwest Airlines Co.,09,46.9912429209
Spirit Air Lines,10,54.9869140341
Spirit Air Lines,01,49.6367444757
Spirit Air Lines,02,62.0614121084
Spirit Air Lines,03,60.5790228446
Spirit Air Lines,04,46.1934127588
Spirit Air Lines,05,57.9373453601
Spirit Air Lines,06,75.5549939728
Spirit Air Lines,07,52.275890746
Spirit Air Lines,08,60.277181568
Spirit Air Lines,09,59.7232075862
US Airways Inc.,01,51.1840549097
US Airways Inc.,02,56.7623137156
US Airways Inc.,03,54.2910598391
US Airways Inc.,04,56.2222661862
US Airways Inc.,05,53.7405574822
US Airways Inc.,06,57.1132207818
United Air Lines Inc.,10,55.6561046426
United Air Lines Inc.,01,49.7673640677
United Air Lines Inc.,02,50.4659589029
United Air Lines Inc.,03,51.492155384
United Air Lines Inc.,04,51.4748257271
United Air Lines Inc.,05,51.5882644407
United Air Lines Inc.,06,60.547677641
United Air Lines Inc.,07,60.4966115177
United Air Lines Inc.,08,56.6732708631
United Air Lines Inc.,09,52.8943358513
Virgin America,10,55.0515605914
Virgin America,01,47.9556702148
Virgin America,02,50.314698905
Virgin America,03,54.7023239376
Virgin America,04,49.7038395736
Virgin America,05,49.6921430978
Virgin America,06,47.9250051005
Virgin America,07,45.0825811059
Virgin America,08,66.0724234739
Virgin America,09,49.6563482353
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
<style>
/* Change all lines tagged 'dimple-series-0' to gray.
This is intended to differentiate color in the second visualization*/
path.dimple-series-0{
stroke: gray;
}
/*Since the tag also applied to first visualization, 'on-time-flights' also grayed.
Change this back to original color */
path.dimple-on-time-flights{
stroke: #6b94b0;
}
/*Change the Southwest Airlines to red so it stand out among the rest*/
path.dimple-hawaiian-airlines-inc-{
stroke: red;
}
h2 {
text-align: center;
}
</style>
<script type="text/javascript">
function appendTitle(title){
//Take title(string) as an input to append title to the chart
return d3.select("body")
.append("h2")
.text(title);
}
//Append SVG Element, with predefined margin. This will affect both graph.
//will output SVG elemeng with 'g' chart.
function appendSVG(){
var margin = 75,
width = 1400 - margin,
height = 600 - margin;
return d3.select("body")
.append("svg")
.attr("width", width + margin)
.attr("height", height + margin)
.append('g')
.attr('class','chart');
}
function getBaselineChart(data,x_col,y_col){
//Take the data which contains x_col to be as an x axis, and y_col to be as an y_axis
//Get the baseline chart. This will create time series chart, and its correlated measure axis
//Return baseline chart, time-series of x-axis, and y-axis(Measure Axis)
var svg = appendSVG();
var chart = new dimple.chart(svg, data);
var x = chart.addTimeAxis("x", x_col, "%m", "%b");
var y = chart.addMeasureAxis("y", y_col);
return [chart,x,y];
}
function drawFlight(data) {
//Receive number of on time flight and various kind of delay as data
//Draw a time series chart, representing number of on time flight performance
//and how it decrease based on kind of delay.
"use strict";
appendTitle("Total US Flight Operations 2015"); //append tittle to the svg
var baselines = getBaselineChart(data,"month","on_time_flights"); //See explanation in the following.
var chart = baselines[0]; //Get the baseline chart
var x = baselines[1]; // Get the x axis, time series
var y = baselines[2]; //Get the y axis, number of on time flights
y.title = "Number of Flight Operations";
var otf_ser = chart.addSeries("On Time Flights", dimple.plot.line);
otf_ser.lineMarkers = true; //Append dot as additional scatter plot
function addFlightMeasure(col, label){
//This function will take column values and what label to represent in the chart.
//Will add series(Measure Axis) to predefine Axis. In this case y-axis, number of on time flights
//Output nothing, except element(measureaxis) appended to the y-axis
var y_add = chart.addMeasureAxis(y, col); //Add Measure axis based on the plot
var ser = chart.addSeries(label, dimple.plot.line, [x,y_add]); //Add line plot of the measure axis
ser.lineMarkers = true; //Add additional dot as scatter plot
}
// Add additional causes that makes number of on time flights decreased.
addFlightMeasure("arr_cancelled", "Cancelled Flights");
addFlightMeasure("arr_del15", "Delayed(>15min) Flights");
addFlightMeasure("arr_diverted", "Diverted Flights");
var legend = chart.addLegend("10%,20px",10,"left");
chart.draw()
};
function drawCarrierDelay(data){
//Receive carrier name, month, delayed minutes per delayed flight as data.
//Draw a chart of time series, representing average number of delay minutes per delayed flight
//with hue based on different carrier
"use strict";
appendTitle("Average Delay Minutes Based on Carrier"); //Append title to the svg
var baselines = getBaselineChart(data,"month","delay_minutes_per_delayed_flight"); //See explanation in the following
var chart = baselines[0]; // Get the baseline chart
var x = baselines[1]; //Get the x-axis, time series data
var y = baselines[2]; //Get the y-axis, delay minutes per delayed flight
y.title = "Delay in Minutes per Delayed Flight";
var carr_ser = chart.addSeries("carrier_name",dimple.plot.line); //Add hue of line plot based on carrier
carr_ser.lineMarkers = true;//Append dot as additional scatter plot
//Manually add legend (text and red color) just for Southwest Airlines
chart.svg
.append("text")
.text("Hawaiian Airlines")
.attr("class","legend-southwest")
.attr("x",180)
.attr("y", 20)
.attr("width","left")
.attr("height",9)
.style("opacity",1)
.style("font-family","sant-serif")
.style("font-size","15px");
chart.svg
.append("rect")
.attr("height",12)
.attr("width", 18)
.attr("x", 160)
.attr("y", 10)
.style("fill","red")
.style("stroke","rgb(107, 148, 176)")
.style("opacity",0.8)
.style("shape-rendering","crispEdges");
chart.draw();
}
</script>
</head>
<body>
<script type="text/javascript">
/*
Use D3 (not dimple.js) to load the TSV file
and pass the contents of it to the draw function
*/
//The visualization will consist on two part.
//Number of flights and total delayed minutes across carrier.
d3.csv("agg_month_sum_airlines_2015.csv_", drawFlight);
d3.csv("carr_delay_2015.csv_", drawCarrierDelay);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment