Skip to content

Instantly share code, notes, and snippets.

@guilhermesimoes

guilhermesimoes/airbus_data.tsv

Forked from atmccann/airbus_data.tsv
Last active September 26, 2019 14:57
Show Gist options
  • Save guilhermesimoes/68d51695e1544978402e to your computer and use it in GitHub Desktop.
Save guilhermesimoes/68d51695e1544978402e to your computer and use it in GitHub Desktop.
Download ZIP
D3.js: Synchronously animating multiple paths in a multi-series line chart
Raw
airbus_data.tsv
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
Raw
index.html
<!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;
}
.overlay {
fill: none;
stroke: none;
}
</style>
<body>
<div class="js-chart-container">
<script src="http://d3js.org/d3.v3.js"></script>
<script type="text/javascript">
"use strict";
/*global d3*/
var margin = {top: 10, right: 20, bottom: 40, left: 60},
containerWidth = document.querySelector(".js-chart-container").clientWidth,
containerHeight = 500,
width = containerWidth - margin.left - margin.right,
height = containerHeight - 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 companiesData = 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(companiesData, function(c) { return d3.min(c.values, function(v) { return v.price; }); }),
d3.max(companiesData, 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 overlay = svg.append("defs").append("clipPath")
.attr("id", "overlay")
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 0)
.attr("height", height);
var container = svg.append("g")
.attr("class", ".container")
.attr("clip-path", "url(#overlay)");
var companies = container.selectAll(".company")
.data(companiesData)
.enter().append("g")
.attr("class", "company");
var path = companies.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";
}
});
overlay.transition()
.duration(5000)
.ease("linear")
.attr("width", width);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment