Skip to content

Instantly share code, notes, and snippets.

@yangpu2007360

yangpu2007360/Pu Yang, flight delay.html

Created October 29, 2016 06:27
Show Gist options
  • Save yangpu2007360/df0897bbbf38b4c143f864f4f46bfb5f to your computer and use it in GitHub Desktop.
Save yangpu2007360/df0897bbbf38b4c143f864f4f46bfb5f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Pu Yang, flight delay.html
<!DOCTYPE html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8">
<title>A test chart</title>
<script src = "https://d3js.org/d3.v3.min.js"></script>
<script src = "http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
<h1>United State flight delays and performance data visulization</h1>
</head>
<body>
<div id = "chartContainer"></div>
<script type="text/javascript">
"use strict";
var margin = 100;
var width = 1200 - margin;
var height = 700 - margin;
var svg = dimple.newSvg("#chartContainer", width,height);
d3.csv("YearlyMaxTotal.csv").row(function(d) {
return {
Year : d.Year,
DepDelay : d.DepDelay,
Carrier : d.UniqueCarrier
};
}).get(function(error, data) {
var myChart = new dimple.chart(svg, data);
//add legend
var myLegend = myChart.addLegend(120, 70, 150, 300, "left");
//define a color palette
myChart.defaultColors = [
new dimple.color("#3498db", "#2980b9", 1), // blue
new dimple.color("#e74c3c", "#c0392b", 1), // red
new dimple.color("#2ecc71", "#27ae60", 1), // green
new dimple.color("#9b59b6", "#8e44ad", 1), // purple
new dimple.color("#e67e22", "#d35400", 1), // orange
new dimple.color("#f1c40f", "#f39c12", 1), // yellow
new dimple.color("#1abc9c", "#16a085", 1), // turquoise
new dimple.color("#95a5a6", "#7f8c8d", 1) // gray
];
// change to time series plot
var x = myChart.addTimeAxis("x", "Year", "%Y", "%Y");
x.overrideMin = d3.time.format("%Y").parse("1986");
x.overrideMax = d3.time.format("%Y").parse("2009");
x.ticks = 5;
x.fontSize = "14px";
var y1 = myChart.addMeasureAxis("y", "DepDelay");
y1.fontSize = "18px";
y1.overrideMax = 3000;
y1.tickFormat = "f";
y1.ticks = 5;
var dots = myChart.addSeries(["Index", "Carrier"], dimple.plot.scatter);
var lines = myChart.addSeries(["Index", "Carrier"], dimple.plot.line);
myChart.draw();
//fine-tune the axises
y1.titleShape.text("Depature Delay [minute]");
x.titleShape.text("");
svg.append("text")
.attr("x", myChart._xPixels() + myChart._widthPixels() / 2)
.attr("y", myChart._yPixels() - 30)
.style("text-anchor", "middle")
.style("font-family", "sans-serif")
.style("font-weight", "bold")
.text("Departure Delay Time Over Twenty Years For Each Carrier");
});
</script>
</body>
Raw
YearlyMaxTotal.csv
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
UniqueCarrier ArrDelay DepDelay Year
AA 851 855 1987
AS 690 694 1987
CO 800 800 1987
DL 520 1439 1987
NW 940 915 1987
UA 534 533 1987
US 556 548 1987
WN 397 392 1987
AA 1394 1377 1988
AS 453 445 1988
CO 984 945 1988
DL 586 1439 1988
NW 965 970 1988
UA 914 914 1988
US 481 403 1988
WN 420 372 1988
AA 1356 1373 1989
AS 852 800 1989
CO 944 931 1989
DL 599 1439 1989
NW 1195 1195 1989
UA 943 937 1989
US 538 530 1989
WN 356 361 1989
AA 1421 1357 1990
AS 715 705 1990
CO 797 795 1990
DL 594 1439 1990
NW 1188 1175 1990
UA 951 957 1990
US 552 543 1990
WN 333 334 1990
AA 1188 1185 1991
AS 630 629 1991
CO 1088 1080 1991
DL 600 1439 1991
NW 926 949 1991
UA 889 878 1991
US 485 485 1991
WN 420 420 1991
AA 1433 1369 1992
AS 609 600 1992
CO 950 975 1992
DL 586 1439 1992
NW 800 811 1992
UA 972 989 1992
US 533 532 1992
WN 403 404 1992
AA 1291 1293 1993
AS 362 372 1993
CO 878 880 1993
DL 591 1439 1993
NW 580 589 1993
UA 897 903 1993
US 527 534 1993
WN 360 368 1993
AA 1313 1344 1994
AS 419 380 1994
CO 708 698 1994
DL 549 1439 1994
NW 991 1007 1994
UA 940 946 1994
US 508 480 1994
WN 422 410 1994
AA 1348 1355 1995
AS 472 475 1995
CO 830 831 1995
DL 567 1439 1995
NW 1331 1325 1995
UA 981 991 1995
US 577 529 1995
WN 439 431 1995
AA 1377 1369 1996
AS 665 664 1996
CO 737 754 1996
DL 600 1438 1996
NW 1416 1424 1996
UA 941 970 1996
US 569 490 1996
WN 496 497 1996
AA 1364 1358 1997
AS 646 652 1997
CO 1178 1187 1997
DL 569 1437 1997
NW 1609 1618 1997
UA 972 984 1997
US 508 483 1997
WN 568 580 1997
AA 1343 1370 1998
AS 642 639 1998
CO 1081 1048 1998
DL 594 1435 1998
NW 1808 1800 1998
UA 1285 1297 1998
US 623 627 1998
WN 476 477 1998
AA 1434 1358 1999
AS 682 678 1999
CO 881 886 1999
DL 593 1435 1999
NW 1724 1740 1999
UA 1204 1211 1999
US 616 633 1999
WN 566 551 1999
AA 1330 1361 2000
AS 712 696 2000
CO 746 722 2000
DL 1189 1435 2000
NW 1441 1430 2000
UA 1285 1277 2000
US 709 714 2000
WN 625 635 2000
AA 1425 1377 2001
AS 630 625 2001
CO 929 947 2001
DL 875 884 2001
NW 1688 1692 2001
UA 1297 1289 2001
US 880 903 2001
WN 509 509 2001
AA 1421 1366 2002
AS 806 703 2002
CO 1143 1140 2002
DL 823 818 2002
NW 2137 2119 2002
UA 1428 1433 2002
US 508 524 2002
WN 625 622 2002
AA 1385 1379 2003
AS 743 833 2003
CO 846 844 2003
DL 698 693 2003
NW 1584 1582 2003
UA 1612 1437 2003
US 645 626 2003
WN 488 512 2003
AA 1379 1376 2004
AS 871 667 2004
CO 1033 1008 2004
DL 743 773 2004
NW 1879 1882 2004
UA 1393 1405 2004
US 966 958 2004
WN 615 620 2004
AA 1320 1339 2005
AS 1139 1140 2005
CO 992 1001 2005
DL 706 728 2005
NW 1925 1930 2005
UA 1362 1371 2005
US 690 679 2005
WN 616 629 2005
AA 1374 1379 2006
AS 690 711 2006
CO 1111 1139 2006
DL 1147 1163 2006
NW 1779 1752 2006
UA 1390 1410 2006
US 993 1021 2006
WN 889 883 2006
AA 1386 1369 2007
AS 794 819 2007
CO 941 908 2007
DL 809 815 2007
NW 2598 2601 2007
UA 1351 1360 2007
US 1073 1003 2007
WN 650 672 2007
AA 1525 1521 2008
AS 948 947 2008
CO 1017 1011 2008
DL 1007 1003 2008
NW 2461 2467 2008
UA 1322 1303 2008
US 876 886 2008
WN 702 668 2008
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment