Skip to content

Instantly share code, notes, and snippets.

@olix20

olix20/README.md

Last active April 4, 2019 23:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save olix20/2722b78b05d014eb7122 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save olix20/2722b78b05d014eb7122 to your computer and use it in GitHub Desktop.
Download ZIP
Flight analysis
Raw
README.md

##Summary

This chart shows the average arrival delays for US domestic flights in 2014. We can see how the delay pattern develops through out the year, and how different types of delay contribute to the toal delay.We see a consistent pattern that the least chance of a delay is when you travel in April or September. The peaks are June-August and December-January.

##Design

I'm interested to see how the average delay varies over months. I expect line chart to best represent this: x-axis will show months of year and y-axis will show the mean delay. Since we want to know how each individual delay type evolves (weather, security, etc.), there will be one line chart per individual delay type. All lines would share the same primary light blue color, except for total delay which is in black. This is to avoid distraction and differentiate between total and other delay types.

We can see a general pattern where peak delays happen in summer/winter holidays. There may be also a compounding relationship between different types of delays. For example, a higher weather delay could also mean increased chaos in National Aviation System delay (NAS delay).

##Feedback

Feedback 1: it's hard to distinguish carrier and late aircraft delay > solution: used light green color for carrier delay.

Feedback 2: it takes a long time to show the data, and i'm not sure what's going on > Showing a spinner to give a sense of progress

Feedback 3: the y axis is showing seconds which is hard to get a gut sense > convert to hours (this also makes it easier to distinguish carrier and late aircraft delay so I'm undoing what i did for feedback 1 (all sub-delays will be in blue)).

##Resources

Dataset (Jan 2014 - Dec 2014): http://www.transtats.bts.gov/OT_Delay/OT_DelayCause1.asp?pn=1

EDA with R

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.linelable {
font-family: sans-serif;
font-size: 12px;
color:black;
opacity: 0.7;
}
</style>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
<script src="http://fgnass.github.io/spin.js/spin.min.js"></script>
<script type="text/javascript">
function draw(data) {
/*
D3.js setup code
*/
"use strict";
var margin = 75,
width = 1200 - margin,
height = 600 - margin;
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin)
.attr("height", height + margin)
.append('g')
.attr('class','chart');
/*
Dimple.js Chart construction code
*/
var myChart = new dimple.chart(svg, data);
var x = myChart.addCategoryAxis("x", " month");
x.title = "Month" ;
var y1 = myChart.addMeasureAxis("y", " arr_delay");
y1.title= "Delay (hours)";
var y2 = myChart.addMeasureAxis(y1, " carrier_delay");
var y3 = myChart.addMeasureAxis(y1, "nas_delay");
var y4 = myChart.addMeasureAxis(y1, "security_delay");
var y5 = myChart.addMeasureAxis(y1, "late_aircraft_delay");
var y6 = myChart.addMeasureAxis(y1, "weather_delay");
var lines = myChart.addSeries("Total Delay", dimple.plot.line, [x,y1]);
var lines2 = myChart.addSeries("Carrier Delay", dimple.plot.line, [x,y2]);
var lines3 = myChart.addSeries("NAS Delay", dimple.plot.line, [x,y3]);
var lines4 = myChart.addSeries("Security Delay", dimple.plot.line, [x,y4]);
var lines5 = myChart.addSeries("Late Aircraft Delay", dimple.plot.line, [x,y5]);
var lines6 = myChart.addSeries("Weather Delay", dimple.plot.line, [x,y6]);
lines.aggregate = dimple.aggregateMethod.avg;
lines2.aggregate = dimple.aggregateMethod.avg;
lines3.aggregate = dimple.aggregateMethod.avg;
lines4.aggregate = dimple.aggregateMethod.avg;
lines5.aggregate = dimple.aggregateMethod.avg;
lines6.aggregate = dimple.aggregateMethod.avg;
lines.lineMarkers = true;
lines2.lineMarkers = true;
lines3.lineMarkers = true;
lines4.lineMarkers = true;
lines5.lineMarkers = true;
lines6.lineMarkers = true;
myChart.assignColor("Total Delay", "black");
myChart.assignColor("Carrier Delay", "lightblue");
myChart.assignColor("NAS Delay", "lightblue");
myChart.assignColor("Security Delay", "lightblue");
myChart.assignColor("Late Aircraft Delay", "lightblue");
myChart.assignColor("Weather Delay", "lightblue");
myChart.draw();
/*
Adding line labels (legend)
*/
//total delay
svg.append('text').
attr("x",
d3.select('#dimple-total-delay-12----marker')[0][0].cx.baseVal.value+15).
attr("y",
d3.select('#dimple-total-delay-12----marker')[0][0].cy.baseVal.value)
.text("Total Delay")
.attr("class","linelable");
//carrier delay
svg.append('text').
attr("x",
d3.select('#dimple-carrier-delay-12----marker')[0][0].cx.baseVal.value+15).
attr("y",
d3.select('#dimple-carrier-delay-12----marker')[0][0].cy.baseVal.value)
.text("Carrier Delay")
.attr("class","linelable");
//NAS delay
svg.append('text').
attr("x",
d3.select('#dimple-nas-delay-12----marker')[0][0].cx.baseVal.value+15).
attr("y",
d3.select('#dimple-nas-delay-12----marker')[0][0].cy.baseVal.value)
.text("NAS Delay")
.attr("class","linelable");
//Security delay
svg.append('text').
attr("x",
d3.select('#dimple-security-delay-12----marker')[0][0].cx.baseVal.value+15).
attr("y",
d3.select('#dimple-security-delay-12----marker')[0][0].cy.baseVal.value)
.text("Security Delay")
.attr("class","linelable");
//Late Aircraft delay
svg.append('text').
attr("x",
d3.select('#dimple-late-aircraft-delay-12----marker')[0][0].
cx.baseVal.value+15).
attr("y",
d3.select('#dimple-late-aircraft-delay-12----marker')[0][0].
cy.baseVal.value)
.text("Late Aircraft Delay")
.attr("class","linelable");
//Weather Delay
svg.append('text').
attr("x",
d3.select('#dimple-weather-delay-12----marker')[0][0].cx.baseVal.value+15).
attr("y",
d3.select('#dimple-weather-delay-12----marker')[0][0].cy.baseVal.value)
.text("Weather Delay")
.attr("class","linelable");
};
</script>
</head>
<body>
<h1>US Domestic Flight Delays in 2014</h1>
<p>
This chart shows the average arrival delays for US domestic flights in 2014.
We can see how the delay pattern develops through out the year,
and how different types of delay contribute to the toal delay.
</p>
<p>
We see a consistent pattern that the least chance of
a delay is when you travel in April or September.
The peaks are June-August and December-January.
</p>
<script type="text/javascript">
//show the spinner while data is loading
var opts = {
lines: 13 // The number of lines to draw
, length: 28 // The length of each line
, width: 14 // The line thickness
, radius: 42 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 36 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
};
var target = document.getElementsByTagName("body");
//var spinner = new Spinner(opts).spin(target);
var spinner = new Spinner().spin();
window.onload = function() {
target[0].appendChild(spinner.el);
};
/*
Use D3 (not dimple.js) to load the TSV file
and pass the contents of it to the draw function
*/
//d3.tsv("world_cup.tsv", draw);
d3.csv("2014.csv",
//preprocessing data: converting seconds to hours
function(d){
d[" arr_delay"] = d[" arr_delay"] /3600 ;
d[" carrier_delay"] = d[" carrier_delay"] /3600 ;
d["nas_delay"] = d["nas_delay"] /3600 ;
d["security_delay"] = d["security_delay"] /3600 ;
d["late_aircraft_delay"] = d["late_aircraft_delay"] /3600 ;
d["weather_delay"] = d["weather_delay"] /3600 ;
return d;
},
function(data) {
console.log(data[0]);
spinner.stop();
draw(data);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment