-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_initial.html
212 lines (188 loc) · 8.24 KB
/
index_initial.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 { text-align: center;
font-family:sans-serif;
font-size: 20px;}
h2 { text-align: center;
font-family:sans-serif;
font-size: 15px;}
p { font-family:sans-serif;
font-size: 14px;}
dl { font-family:sans-serif;
font-size: 14px;}
</style>
<h1>Flight Delay Causes</h1>
<h2>Year 2004</h2>
<div id="chartContainer">
<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>
<script type="text/javascript">
//Define the height and width
var width = 960;
var height = 400;
//Create svg
var svg = d3.select("#chartContainer")
.append("svg")
.attr("width", width)
.attr("height",height)
.append('g')
.attr('class','chart');
function draw(data) {
// Create the indicator chart on the right of the main chart
var indicator = new dimple.chart(svg, data);
// Pick blue as the default and orange for the selected month
var defaultColor = indicator.defaultColors[0];
var indicatorColor = indicator.defaultColors[2];
// The frame duration for the animation in milliseconds
var frame = 2000;
var firstTick = true;
// Place the indicator bar chart to the right
indicator.setBounds(.8 * width,
.1 * height,
.15 * width,
.8 * height);
// Add years along the y axis
var y = indicator.addCategoryAxis("y", "year");
// Use dealy time for bar size
var x = indicator.addMeasureAxis("x", "arr_delay");
x.showGridlines = false;
x.ticks = 4;
x.title = 'Total Flight Delay Time (min)'
x.fontSize = "12px";
// Add the bars to the indicator and add event handlers
var s = indicator.addSeries(null, dimple.plot.bar);
s.addEventHandler("click", onClick);
// Draw the side chart
indicator.draw();
// Remove the title and lines from the y axis
y.titleShape.remove();
y.shapes.selectAll("line,path").remove();
// Move the y axis text inside the plot area
y.shapes.selectAll("text")
.style("font-family", "sans-serif")
.style("text-anchor", "start")
.style("font-size", "11px")
.attr("transform", "translate(18, 0.5)");
// Adds the legend title
svg.selectAll("title_text")
.data(["Click bar to select and pause. ",
"Click again to resume animation"])
.enter()
.append("text")
.attr("x", .8 * width)
.attr("y", function (d, i) { return 15 + i * 12; })
.style("font-family", "sans-serif")
.style("font-size", "11px")
.style("color", "Black")
.text(function (d) { return d; });
// Manually set the bar colors
s.shapes
.attr("rx", 10)
.attr("ry", 10)
.style("fill", function (d) { return (d.y === 2004 ? indicatorColor.fill : defaultColor.fill) })
.style("stroke", function (d) { return (d.y === 2004 ? indicatorColor.stroke : defaultColor.stroke) })
.style("opacity", 0.4);
// Draw the main chart
var myChart = new dimple.chart(svg, data);
myChart.setBounds(.05 * width,
.1 * height,
.7 * width,
.8 * height);
var my = myChart.addMeasureAxis("y", "value");
var mx = myChart.addCategoryAxis("x", "month");
var mb = myChart.addSeries("delay_type", dimple.plot.area);
mb.interpolation = "step";
mb.lineWeight = 1;
var mlegend = myChart.addLegend( .05 * width,
.03 * height,
.7 * width,
.1 * height);
mlegend.fontSize = "12px";
// Change the attributes of axes
mx.title = 'Month';
mx.fontSize="12px";
my.title = 'Delay Time per Delay Flight (min)'
my.fontSize="12px";
my.overrideMax = 100;
// Add a storyboard to the main chart and set the tick event
var story = myChart.setStoryboard("year", onTick);
// Change the frame duration
story.frameDuration = frame;
// Order the storyboard by year
story.addOrderRule("year");
// Draw the chart
myChart.draw();
// Orphan the legends as they are consistent but by default they
// will refresh on tick
myChart.legends = [];
// Remove the storyboard label
story.storyLabel.remove();
// On click of the side chart
function onClick(e) {
// Pause the animation
story.pauseAnimation();
// If it is already selected resume the animation
// otherwise pause and move to the selected year
if ( e.yValue === +story.getFrameValue()) {
story.startAnimation();
} else {
story.goToFrame(e.yValue.toString());
story.pauseAnimation();
}
}
// On tick of the main charts storyboard
function onTick(e) {
if (!firstTick) {
// Color all shapes the same
s.shapes
.transition()
.duration(frame / 2)
.style("fill", function (d) { return (d.y === +e ? indicatorColor.fill : defaultColor.fill) })
.style("stroke", function (d) { return (d.y === +e ? indicatorColor.stroke : defaultColor.stroke) });
// Update title
d3.select("h2")
.transition()
.duration(frame / 2)
.style("opacity", 0)
.text('Year '+e.toString())
.style("opacity", 1);
}
firstTick = false;
}
d3.select("#chartContainer").attr("align","center");
};
</script>
</div>
<dl>
<dt>Delay Causes:</dt>
<dd>Carrier Delay: Due to the airline's control (e.g. aircraft cleaning, baggage loading, fueling)</dd>
<dd>Weather Delay: Due to significant weather conditions (e.g. tornado, blizzard or hurricane)</dd>
<dd>NAS Delay: Due to the national aviation system (e.g. non-extreme weather conditions, airport operations)</dd>
<dd>Late Aircraft Delay: Due to a previous flight with same aircraft arriving late</dd>
<dd>Security Delay: Due to security breach, inoperative screening equipment and/or long lines (> 29 minutes) at screening areas.</dd>
</dl>
</head>
<body>
<div id="textContainer">
<script type="text/javascript">
// Load Data
d3.tsv("data/flight_delay.tsv", function(d) {
// Transform data
d['year'] = +d['year'];
d['month'] = +d['month'];
d['arr_flights'] = d['arr_flights']/5;
d['arr_del15'] = d['arr_del15']/5;
d['arr_delay'] = +d[' arr_delay']/5;
d['value'] = d['value']/d['arr_flights'];
return d;
},draw);
</script>
<h2>More delay during summer and winter holidays?</h1>
<p> The delay time per delayed flight is higher during summer holidays and winter holidays. The major contributing factors are flight delays caused by the airline's control (e.g. maintenance or crew problems) and late previous aircraft. Since a tight and unorganized flight schedule can impact airline’s control and previous aircraft arrival, we are wondering if the revenue-driven airline industry is trying to move more passengers at the expenses of increasing delays. </p>
<p>References: The data set which contains information on United State flight delays and performance comes from <a href="https://www.transtats.bts.gov/OT_Delay/OT_DelayCause1.asp"> RITA</a>.</p>
</div>
</body>
</html>