Skip to content

Instantly share code, notes, and snippets.

@ddaskan

ddaskan/data__agg.tsv

Created August 6, 2016 22:34
Show Gist options
  • Save ddaskan/054ec94f25b30cc6ececdcf0a06d7480 to your computer and use it in GitHub Desktop.
Save ddaskan/054ec94f25b30cc6ececdcf0a06d7480 to your computer and use it in GitHub Desktop.
Download ZIP
p6_final
Raw
data__agg.tsv
Year Day DepDelay ArrDelay TotalDelay
1987 Friday 7.31612266711 8.79137274247 16.1074954096
1987 Monday 7.755080381 9.42321243858 17.1782928196
1987 Saturday 5.94741843707 5.92826659826 11.8756850353
1987 Sunday 8.29798789925 9.15488954552 17.4528774448
1987 Thursday 8.06770772931 9.76420284082 17.8319105701
1987 Tuesday 8.97790096919 11.5043449216 20.4822458908
1987 Wednesday 9.24751501678 11.23351895 20.4810339668
1988 Friday 7.22075011404 7.71063686309 14.9313869771
1988 Monday 6.76711380994 6.78293421822 13.5500480282
1988 Saturday 5.52148721405 4.06562610958 9.58711332362
1988 Sunday 5.88021193273 4.70349768154 10.5837096143
1988 Thursday 7.47678863641 8.17835547085 15.6551441073
1988 Tuesday 6.29464110345 6.71362298392 13.0082640874
1988 Wednesday 6.73004771938 7.38520512389 14.1152528433
1989 Friday 9.33286096875 10.2208074508 19.5536684196
1989 Monday 6.51981834857 6.6750989634 13.194917312
1989 Saturday 7.06911395158 5.86345044508 12.9325643967
1989 Sunday 7.0433537679 6.10915720391 13.1525109718
1989 Thursday 9.28600743057 10.4347381808 19.7207456114
1989 Tuesday 8.17304134275 9.16294142212 17.3359827649
1989 Wednesday 8.8441943881 10.0527324428 18.8969268309
1990 Friday 10.0767798123 11.1707852004 21.2475650127
1990 Monday 5.18962350068 4.82836189678 10.0179853975
1990 Saturday 6.5468824891 5.24165604798 11.7885385371
1990 Sunday 6.07236350613 4.96854758154 11.0409110877
1990 Thursday 8.78516001696 9.96881921263 18.7539792296
1990 Tuesday 5.35274097756 5.38339112991 10.7361321075
1990 Wednesday 5.63744843707 5.94243719592 11.579885633
1991 Friday 7.1305940803 6.78977959372 13.920373674
1991 Monday 4.58065837336 3.39123511577 7.97189348912
1991 Saturday 5.28517838169 3.18690349701 8.4720818787
1991 Sunday 5.77585873633 4.02839661374 9.80425535007
1991 Thursday 6.29106539215 6.01825386736 12.3093192595
1991 Tuesday 4.95863891113 4.16854149987 9.127180411
1991 Wednesday 5.78086118036 5.377384851 11.1582460314
1992 Friday 6.87080376853 6.57109160438 13.4418953729
1992 Monday 4.53513500309 3.53846258238 8.07359758547
1992 Saturday 4.83131624816 2.69824405807 7.52956030623
1992 Sunday 5.44423377526 3.79990302785 9.2441368031
1992 Thursday 6.95751394625 7.09547368592 14.0529876322
1992 Tuesday 5.10131762868 4.70777116461 9.80908879328
1992 Wednesday 5.55160311136 5.42294537477 10.9745484861
1993 Friday 7.01928555062 6.70188882878 13.7211743794
1993 Monday 5.7593457912 5.08721325375 10.8465590449
1993 Saturday 5.07143985655 3.10662445374 8.17806431029
1993 Sunday 6.41665720086 4.90290847874 11.3195656796
1993 Thursday 6.5531999989 6.39468302377 12.9478830227
1993 Tuesday 5.30478680507 4.75153344514 10.0563202502
1993 Wednesday 6.25365234308 6.18743847913 12.4410908222
1994 Friday 7.85843170389 7.3540338021 15.212465506
1994 Monday 6.11163696058 5.26307757615 11.3747145367
1994 Saturday 5.54515991074 3.13834686652 8.68350677726
1994 Sunday 6.14534049369 4.28602261106 10.4313631048
1994 Thursday 7.83012505649 7.64893792641 15.4790629829
1994 Tuesday 5.43898339807 4.73854860492 10.177532003
1994 Wednesday 7.12972967873 6.97711556659 14.1068452453
1995 Friday 9.65174819682 8.86304504339 18.5147932402
1995 Monday 7.11792405584 5.90684372562 13.0247677815
1995 Saturday 7.80042215911 5.32216804042 13.1225901995
1995 Sunday 8.05025056188 5.90722775188 13.9574783138
1995 Thursday 9.05237180128 8.47153286399 17.5239046653
1995 Tuesday 7.28963968822 6.37901000413 13.6686496924
1995 Wednesday 8.60818977987 8.10015648423 16.7083462641
1996 Friday 12.5829181088 12.9505063017 25.5334244106
1996 Monday 9.28042186475 9.11807537196 18.3984972367
1996 Saturday 8.85616225196 6.86383155299 15.7199938049
1996 Sunday 9.39000570968 8.07456731547 17.4645730251
1996 Thursday 11.0201536299 11.6344846277 22.6546382576
1996 Tuesday 8.86816139301 9.09206618252 17.9602275755
1996 Wednesday 9.42853006773 9.68544001988 19.1139700876
1997 Friday 10.7728208496 10.6857080551 21.4585289048
1997 Monday 6.87102085762 6.0501161916 12.9211370492
1997 Saturday 7.63487578056 5.41340268792 13.0482784685
1997 Sunday 8.79222230954 7.34330803188 16.1355303414
1997 Thursday 9.1972344053 9.28832853964 18.4855629449
1997 Tuesday 6.18604221663 5.55039055034 11.736432767
1997 Wednesday 7.86273949537 7.90214046993 15.7648799653
1998 Friday 11.0922937774 10.0937574661 21.1860512435
1998 Monday 8.59025579459 7.31878699196 15.9090427866
1998 Saturday 7.13167154689 3.56734487754 10.6990164244
1998 Sunday 9.25385114975 6.94857810567 16.2024292554
1998 Thursday 10.0640498993 9.59767622579 19.6617261251
1998 Tuesday 8.18772954739 7.48000336155 15.6677329089
1998 Wednesday 8.24476719742 7.59752246559 15.842289663
1999 Friday 11.8292449873 11.3936061032 23.2228510905
1999 Monday 9.10851959007 7.97502088385 17.0835404739
1999 Saturday 8.21507977702 5.34656010181 13.5616398788
1999 Sunday 9.83390659635 7.95640921458 17.7903158109
1999 Thursday 10.1254375588 10.0208698099 20.1463073686
1999 Tuesday 7.35992008841 6.62110408727 13.9810241757
1999 Wednesday 8.34272370221 8.00361011747 16.3463338197
2000 Friday 15.2935000751 15.5209098644 30.8144099394
2000 Monday 10.178849739 9.20449937083 19.3833491098
2000 Saturday 9.24696188547 6.52065304118 15.7676149267
2000 Sunday 12.4304406393 11.28502027 23.7154609093
2000 Thursday 13.0918992572 13.2630610439 26.354960301
2000 Tuesday 8.28867212708 7.56582378641 15.8544959135
2000 Wednesday 9.72313807772 9.54950746369 19.2726455414
2001 Friday 10.9634114543 9.20586349686 20.1692749511
2001 Monday 7.18175255005 4.29503395162 11.4767865017
2001 Saturday 7.73789514413 3.70620328259 11.4440984267
2001 Sunday 8.79518320629 5.4889681368 14.2841513431
2001 Thursday 9.15628244192 7.64154854094 16.7978309829
2001 Tuesday 6.05260612567 3.50684129903 9.5594474247
2001 Wednesday 6.89307929832 4.66276791811 11.5558472164
2002 Friday 7.23173962937 5.43533668933 12.6670763187
2002 Monday 5.72076786774 3.53165070871 9.25241857645
2002 Saturday 4.14071749497 0.0751709213417 4.21588841631
2002 Sunday 5.79712281156 2.77774869579 8.57487150735
2002 Thursday 6.47986248325 4.88926352257 11.3691260058
2002 Tuesday 4.47470421992 2.53721301902 7.01191723893
2002 Wednesday 4.49643712678 2.70246575125 7.19890287803
2003 Friday 6.50972401132 5.52351758505 12.0332415964
2003 Monday 5.51452488717 3.96025323148 9.47477811865
2003 Saturday 3.85231124 0.490320543856 4.34263178386
2003 Sunday 6.07695127825 3.95736635672 10.034317635
2003 Thursday 5.92138650308 5.14042883589 11.061815339
2003 Tuesday 4.0877406382 2.46044297666 6.54818361486
2003 Wednesday 4.44335142326 3.2084646085 7.65181603176
2004 Friday 8.9453353904 7.97855837751 16.9238937679
2004 Monday 8.95712432927 7.79787910383 16.7550034331
2004 Saturday 5.78088947441 2.64938303884 8.43027251325
2004 Sunday 8.29169497204 6.28159884545 14.5732938175
2004 Thursday 8.76172841289 7.93805830384 16.6997867167
2004 Tuesday 6.56705238302 5.51074707012 12.0777994531
2004 Wednesday 7.4109023412 6.82317414997 14.2340764912
2005 Friday 10.5532176383 9.51446834701 20.0676859853
2005 Monday 9.11800731573 7.8607605048 16.9787678205
2005 Saturday 6.52256861746 3.30107183028 9.82364044774
2005 Sunday 8.64646898254 6.45401245915 15.1004814417
2005 Thursday 10.1457697589 9.67233187366 19.8181016326
2005 Tuesday 6.84516494561 5.36786910768 12.2130340533
2005 Wednesday 8.39858607185 7.55694563264 15.9555317045
2006 Friday 13.0521618949 12.3207137648 25.3728756597
2006 Monday 10.3028157916 8.84253901797 19.1453548096
2006 Saturday 8.26499445517 5.1691258344 13.4341202896
2006 Sunday 10.1787958171 8.13927497829 18.3180707953
2006 Thursday 11.7679764459 11.5751704275 23.3431468735
2006 Tuesday 7.67670469529 6.19516278298 13.8718674783
2006 Wednesday 8.87057272282 7.97717853485 16.8477512577
2007 Friday 13.536222795 13.0676750007 26.6038977957
2007 Monday 11.865883614 10.5135025566 22.3793861705
2007 Saturday 8.96528713689 5.84660003102 14.8118871679
2007 Sunday 11.9497644394 10.3295774066 22.279341846
2007 Thursday 12.8407578951 12.6859801553 25.5267380504
2007 Tuesday 9.35721385362 8.26368443401 17.6208982876
2007 Wednesday 10.6413316589 9.96294384777 20.6042755067
2008 Friday 12.1011089613 10.9534400796 23.0545490409
2008 Monday 10.2226107893 8.21085049486 18.4334612842
2008 Saturday 8.60527194376 5.78966641043 14.3949383542
2008 Sunday 11.5231982781 9.49588600678 21.0190842848
2008 Thursday 9.73943693983 8.41159915808 18.1510360979
2008 Tuesday 8.91644565762 7.48120760404 16.3976532617
2008 Wednesday 8.23387332288 6.52201731572 14.7558906386
Raw
index.html
<!DOCTYPE html>
<html>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
<style type="text/css">
div {
margin: auto;
text-align: center;
margin-top: 5px;
}
text {
font-weight: bold;
font-size: 15px;
}
li {
margin-left: 20px;
}
p {
margin-bottom: 30px;
}
</style>
<title>Delays by Dogan Askan</title>
<h2>USA Flight Delays between 1987-2008 by Dogan Askan</h2>
<intro><p>I tried to explain the changes in flight delays in the USA between 1987 and 2008 by weekdays. The first animated graph shows the average total (i.e. arrival + departure) delay in days for each year. The second graph shows the changes in departure, arrival or total delay throughout the years for each day, days are represented by colours. It looks <b>Friday</b> leads followed by <b>Thursday</b> for almost every year.</p></intro>
<div id="chartContainer">
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 410);
svg.append("text").attr("x", (svg[0][0].clientWidth / 2))
.attr("y", 14)
.attr("text-anchor", "middle")
.text("Average Total Delays per Flight by Day Throughout the Years");
d3.tsv("data__agg.tsv", function (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 year
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(524, 49, 43, 311);
// Add dates along the y axis
var y = indicator.addCategoryAxis("y", "Year");
y.addOrderRule("Date", "Desc");
// Use sales for bar size and hide the axis
var x = indicator.addMeasureAxis("x", "Day");
x.hidden = true;
// 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 from the y axis
y.titleShape.remove();
// Remove the lines from the y axis
y.shapes.selectAll("line,path").remove();
// Move the y axis text inside the plot area
y.shapes.selectAll("text")
.style("text-anchor", "start")
.style("font-size", "11px")
.attr("transform", "translate(18, 0.5)");
// This block simply adds the legend title.
svg.selectAll("title_text")
.data(["Click bar to select",
"and pause."])
.enter()
.append("text")
.attr("x", 485)
.attr("y", function (d, i) { return 30 + i * 12; })
.style("font-family", "sans-serif")
.style("font-size", "9px")
.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 === '1987' ? indicatorColor.fill : defaultColor.fill) })
.style("stroke", function (d) { return (d.y === '1987' ? indicatorColor.stroke : defaultColor.stroke) })
.style("opacity", 0.4);
// Draw the main chart
var mychart = new dimple.chart(svg, data);
mychart.setBounds(60, 50, 445, 310)
x_axis = mychart.addCategoryAxis("x", "Day");
x_axis.title = ""; // to hide x axis title
x_axis.addOrderRule(["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"])
y_axis = mychart.addMeasureAxis("y", "TotalDelay");
y_axis.tickFormat = ',.1f';
y_axis.title = "Average Total Delay in Minutes";
//mychart.addColorAxis('DepDelay')
mychart.addSeries(null, dimple.plot.line)
//mychart.addLegend(60, 10, 410, 60);
// 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 date
story.addOrderRule("Date");
// Draw the line chart
mychart.draw();
// Orphan the legends as they are consistent but by default they
// will refresh on tick
mychart.legends = [];
// Remove the storyboard label because the chart will indicate the
// current month instead of the 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 month
if (e.yValue === story.getFrameValue()) {
story.startAnimation();
} else {
story.goToFrame(e.yValue);
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) });
}
firstTick = false;
}
});
</script>
</div>
<div id="option">
<input name="updateButton"
type="button"
value="Departure"
onclick="updateData('DepDelay')" />
<input name="updateButton"
type="button"
value="Arrival"
onclick="updateData('ArrDelay')" />
<input name="updateButton"
type="button"
value="Total"
onclick="updateData('TotalDelay')" />
</div>
<div id="chartContainer1">
<script type="text/javascript">
//to fill the empty initial screen
var svg1 = dimple.newSvg("#chartContainer1", 590, 400).attr("id","part2");
// Chart title as explanation for buttons
svg1.append("text").attr("x", (svg1[0][0].clientWidth / 2))
.attr("y", 14)
.attr("text-anchor", "middle")
.text("Click above to see delay types throughout the years");
d3.tsv("data__agg.tsv", function (data) {
var myChart = new dimple.chart(svg1, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Year");
x.addOrderRule("Date");
y_axis = myChart.addMeasureAxis("y", "DepDelay");
y_axis.title = "Average Delays in Minutes";
myChart.draw();
});
//update on click
function updateData(colname) {
d3.select("#part2").remove(); //to remove the previous svg
var svg1 = dimple.newSvg("#chartContainer1", 590, 420).attr("id","part2"); //to create a new one on each update
// Chart title
svg1.append("text").attr("x", (svg1[0][0].clientWidth / 2))
.attr("y", 18)
.attr("text-anchor", "middle")
.text("USA Flight Delays Throughout the Years");
d3.tsv("data__agg.tsv", function (data) {
var myChart = new dimple.chart(svg1, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Year");
x.addOrderRule("Date");
x.title = ""; // to hide x axis title
y_axis = myChart.addMeasureAxis("y", colname);
y_axis.tickFormat = ',.1f';
if (colname==='DepDelay') {
y_axis.title = "Average Departure Delay in Minutes";
}
if (colname==='ArrDelay') {
y_axis.title = "Average Arrival Delay in Minutes";
}
if (colname==='TotalDelay') {
y_axis.title = "Average Total Delay Delay in Minutes";
}
myChart.addSeries("Day", dimple.plot.line);
myChart.addLegend(90, 380, 400, 20, "right");
myChart.draw();
});
}
</script>
</div>
<text2><p>
<h3>Resources</h3>
<li><a href="http://dimplejs.org/" target="_blank">dimple.js</a></li>
<li><a href="https://github.com/PMSI-AlignAlytics/dimple/wiki" target="_blank">dimple Wiki</a></li>
<li><a href="http://stat-computing.org/dataexpo/2009/the-data.html" target="_blank">Data</a></li>
<li><a href="http://stackoverflow.com/" target="_blank">stackoverflow</a></li>
</p></text2>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment