Skip to content

Instantly share code, notes, and snippets.

@ptim
Forked from atmccann/airbus_data.tsv
Created December 3, 2019 12:54
Show Gist options
  • Save ptim/33fa8d2b5334fed3def075aad0f0cb99 to your computer and use it in GitHub Desktop.
Save ptim/33fa8d2b5334fed3def075aad0f0cb99 to your computer and use it in GitHub Desktop.

Revisions

  1. @atmccann atmccann created this gist Feb 12, 2014.
    165 changes: 165 additions & 0 deletions airbus_data.tsv
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,165 @@
    date Airbus Boeing
    2000-07-31 0 0
    2000-08-31 -0.884 9.8912
    2000-09-29 9.6685 32.1383
    2000-10-31 32.5967 38.9245
    2000-11-30 33.1492 41.4853
    2000-12-29 30.7182 35.2113
    2001-01-31 27.0718 19.8464
    2001-02-28 24.3094 27.4264
    2001-03-30 16.0773 14.1306
    2001-04-30 13.2597 26.6069
    2001-05-31 28.2873 28.8399
    2001-06-29 20.1657 13.9052
    2001-07-31 25.4144 19.9078
    2001-08-31 3.9779 4.8912
    2001-09-28 -34.5304 -31.37
    2001-10-31 -28.7293 -33.2138
    2001-11-30 -26.2983 -28.0922
    2001-12-31 -24.6409 -20.5531
    2002-01-31 -28.1768 -16.1076
    2002-02-28 -19.5028 -5.8438
    2002-03-29 -10.7182 -1.1524
    2002-04-30 -8.1768 -8.63
    2002-05-31 -3.9227 -12.6248
    2002-06-28 -13.9779 -7.8105
    2002-07-31 -11.326 -14.9398
    2002-08-30 -24.6961 -24.0563
    2002-09-30 -40.6077 -30.0794
    2002-10-31 -38.3425 -39.0525
    2002-11-29 -29.337 -30.2433
    2002-12-31 -45.5801 -32.4149
    2003-01-31 -46.4088 -35.283
    2003-02-28 -55.4144 -43.5391
    2003-03-31 -61.8785 -48.6607
    2003-04-30 -53.9779 -44.1127
    2003-05-30 -47.6796 -37.1677
    2003-06-30 -40.9945 -29.6901
    2003-07-31 -21.7127 -32.1485
    2003-08-29 -20.442 -23.4008
    2003-09-30 -26.8508 -29.6697
    2003-10-31 -3.3149 -21.1472
    2003-11-28 0.5525 -21.3521
    2003-12-31 4.1436 -13.6697
    2004-01-30 -3.5359 -14.4686
    2004-02-27 2.8177 -11.1498
    2004-03-31 -3.0387 -15.8617
    2004-04-30 16.5746 -12.5429
    2004-05-31 12.4309 -6.1716
    2004-06-30 26.4088 4.6658
    2004-07-30 26.5193 3.9693
    2004-08-31 18.674 6.9808
    2004-09-30 17.8453 5.7516
    2004-10-29 23.4807 2.2279
    2004-11-30 25.6906 9.7465
    2004-12-31 18.1768 6.0589
    2005-01-31 29.558 3.662
    2005-02-28 31.1602 12.6146
    2005-03-31 27.4033 19.7644
    2005-04-29 21.326 21.936
    2005-05-31 32.7624 30.9091
    2005-06-30 45.5801 35.2113
    2005-07-29 53.2044 35.2318
    2005-08-31 51.1602 37.3009
    2005-09-30 62.9834 39.2061
    2005-10-31 59.6685 32.4251
    2005-11-30 73.6464 39.6978
    2005-12-30 76.2431 43.8976
    2006-01-31 78.1768 39.9437
    2006-02-28 69.9447 48.9168
    2006-03-31 92.0994 59.6517
    2006-04-28 72.8177 70.9603
    2006-05-31 53.5912 70.5506
    2006-06-30 24.0884 67.8054
    2006-07-31 24.5856 58.6069
    2006-08-31 30.0553 53.4443
    2006-09-29 25.3039 61.5365
    2006-10-31 17.4033 63.6056
    2006-11-30 22.7072 81.3675
    2006-12-29 44.1989 82.0026
    2007-01-31 40.663 83.4776
    2007-02-28 43.1492 78.7657
    2007-03-30 28.2873 82.146
    2007-04-30 31.0497 90.525
    2007-05-31 29.116 106.0743
    2007-06-29 33.2597 96.9987
    2007-07-31 23.0387 111.8924
    2007-08-31 20.3315 98.105
    2007-09-28 19.116 115.0883
    2007-10-31 29.5028 101.977
    2007-11-30 21.2155 89.5826
    2007-12-31 20.6077 79.1754
    2008-01-31 -5.8564 70.4072
    2008-02-29 -3.7017 69.6082
    2008-03-31 -17.0718 52.3585
    2008-04-30 -10.7735 73.8489
    2008-05-30 -17.0166 69.5672
    2008-06-30 -33.4807 34.6376
    2008-07-31 -32.6519 25.1933
    2008-08-29 -15.3039 34.3099
    2008-09-30 -33.7017 17.4904
    2008-10-31 -28.5083 7.3905
    2008-11-28 -31.1602 -12.6658
    2008-12-31 -33.5359 -12.5839
    2009-01-30 -24.2818 -13.3214
    2009-02-27 -35.5801 -35.5903
    2009-03-31 -51.6022 -27.1088
    2009-04-30 -39.2265 -17.9513
    2009-05-29 -36.7127 -8.1178
    2009-06-30 -36.4088 -12.9321
    2009-07-31 -26.0773 -12.0922
    2009-08-31 -20.1105 1.7567
    2009-09-30 -15.221 10.9347
    2009-10-30 -29.3646 -2.0743
    2009-11-30 -34.1713 7.37
    2009-12-31 -22.1823 10.8937
    2010-01-29 -21.547 24.1485
    2010-02-26 -16.2707 29.3931
    2010-03-31 -17.7072 48.7529
    2010-04-30 -22.4862 48.3841
    2010-05-31 -10 31.4827
    2010-06-30 -6.7956 28.5531
    2010-07-30 0.442 39.5954
    2010-08-31 -4.0608 25.2343
    2010-09-30 1.0773 36.3175
    2010-10-29 4.337 44.717
    2010-11-30 -4.6409 30.6428
    2010-12-31 -3.6464 33.6953
    2011-01-31 16.2983 42.3406
    2011-02-28 15.8011 47.5237
    2011-03-31 13.4807 51.4571
    2011-04-29 15.4144 63.4417
    2011-05-31 26.4088 59.8566
    2011-06-30 27.5138 51.4571
    2011-07-29 33.7017 44.3688
    2011-08-31 22.0166 36.9731
    2011-09-30 17.1547 23.9641
    2011-10-31 18.0663 34.7811
    2011-11-30 22.6243 40.7222
    2011-12-30 33.4254 50.2689
    2012-01-31 41.8785 51.9693
    2012-02-29 50.6354 53.5467
    2012-03-30 69.6409 52.3585
    2012-04-30 64.779 57.3367
    2012-05-31 49.558 42.6069
    2012-06-29 54.3646 52.2151
    2012-07-31 61.6575 51.4161
    2012-08-31 67.5138 46.274
    2012-09-28 36.2707 42.5762
    2012-10-31 51.4365 44.3073
    2012-11-30 43.0387 52.1741
    2012-12-31 62.9834 54.3867
    2013-01-31 91.1878 51.3342
    2013-02-28 116.4641 57.5416
    2013-03-29 119.337 75.8771
    2013-04-30 121.5746 87.2676
    2013-05-31 145.5801 102.8579
    2013-06-28 126.8784 109.8643
    2013-07-31 147.9834 115.3137
    2013-08-30 140.9116 112.8963
    2013-09-30 160.1934 140.717
    2013-10-31 179.6133 167.3495
    2013-11-29 188.7293 175.032
    2013-12-31 208.3425 179.621
    2014-01-31 190.663 156.6146
    2014-02-12 194.1436 162.8835
    168 changes: 168 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,168 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    body {
    font: 12px Helvetica;
    }

    .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
    }

    .x.axis path {
    display: none;
    }

    .line {
    fill: none;
    stroke: steelblue;
    stroke-width: 2px;
    }

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.js"></script>
    <script>

    var margin = {top: 20, right: 50, bottom: 30, left: 50},
    width = 630 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%Y-%m-%d").parse;

    var x = d3.time.scale()
    .range([0, width]);

    var y = d3.scale.linear()
    .range([height, 0]);

    var color = d3.scale.category10();

    var xAxis = d3.svg.axis()
    .scale(x)
    .ticks(5)
    .innerTickSize(15)
    .outerTickSize(0)
    .orient("bottom");

    var yAxis = d3.svg.axis()
    .scale(y)
    .tickFormat(function(d) { return d + "%";})
    .ticks(5)
    .innerTickSize(15)
    .outerTickSize(0)
    .orient("left");

    var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });


    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.tsv("airbus_data.tsv", function(error, data) {
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

    data.forEach(function(d) {
    d.date = parseDate(d.date);
    });

    var companies = color.domain().map(function(name) {
    return {
    name: name,
    values: data.map(function(d) {
    return {date: d.date, price: +d[name]};
    })
    };
    });


    x.domain(d3.extent(data, function(d) { return d.date; }));

    y.domain([
    d3.min(companies, function(c) { return d3.min(c.values, function(v) { return v.price; }); }),
    d3.max(companies, function(c) { return d3.max(c.values, function(v) { return v.price; }); })
    ]);

    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);


    svg.append("line")
    .attr(
    {
    "class":"horizontalGrid",
    "x1" : 0,
    "x2" : width,
    "y1" : y(0),
    "y2" : y(0),
    "fill" : "none",
    "shape-rendering" : "crispEdges",
    "stroke" : "black",
    "stroke-width" : "1px",
    "stroke-dasharray": ("3, 3")
    });


    var company = svg.selectAll(".company")
    .data(companies)
    .enter().append("g")
    .attr("class", "company");



    var path = svg.selectAll(".company").append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { if (d.name == "Airbus")
    {return "rgb(000,255,000)"}
    else {return "#000";}
    });



    //var totalLength = path.node().getTotalLength();
    /*
    console.log(path);
    console.log(path.node());
    console.log(path[0][0]);
    console.log(path[0][1]);
    */
    var totalLength = [path[0][0].getTotalLength(), path[0][1].getTotalLength()];

    console.log(totalLength);


    d3.select(path[0][0])
    .attr("stroke-dasharray", totalLength[0] + " " + totalLength[0] )
    .attr("stroke-dashoffset", totalLength[0])
    .transition()
    .duration(5000)
    .ease("linear")
    .attr("stroke-dashoffset", 0);

    d3.select(path[0][1])
    .attr("stroke-dasharray", totalLength[1] + " " + totalLength[1] )
    .attr("stroke-dashoffset", totalLength[1])
    .transition()
    .duration(5000)
    .ease("linear")
    .attr("stroke-dashoffset", 0);

    });

    </script>