Skip to content

Instantly share code, notes, and snippets.

@toxford

toxford/airlinesData.csv

Created May 18, 2015 00:38
Show Gist options
  • Save toxford/d7e32dfbf4ff1c61bf92 to your computer and use it in GitHub Desktop.
Save toxford/d7e32dfbf4ff1c61bf92 to your computer and use it in GitHub Desktop.
Download ZIP
d3airlines
Raw
airlinesData.csv
date Airtran Alaska American Delta ExpressJet Frontier Hawaiian JetBlue SkyWest Southwest United USAirways VirginAmerica
20140101 7.4 3.3 6.8 6.0 7.1 7.1 5.2 8.6 5.4 8.0 8.7 6.0 3.5
20140201 5.2 2.9 6.0 5.8 8.5 6.1 6.2 8.8 5.2 7.7 9.1 5.8 3.8
20140301 5.3 3.2 5.4 5.3 6.8 4.6 5.0 6.5 4.6 8.0 7.2 5.8 2.7
20140401 3.9 2.3 4.8 4.6 5.9 4.1 3.5 5.6 4.2 7.5 5.2 5.1 2.4
20140501 4.5 2.5 6.0 5.0 6.3 4.5 3.8 6.0 4.7 8.4 6.5 5.7 2.7
20140601 4.9 3.5 7.4 5.8 7.3 5.5 3.2 6.0 5.4 9.4 8.7 6.7 3.8
20140701 4.7 3.3 7.1 4.6 6.5 4.1 4.0 8.4 5.2 9.1 7.5 7.0 3.1
20140801 4.5 3.7 7.2 4.9 6.3 3.9 3.7 6.6 5.0 7.4 7.0 5.5 3.4
20140901 3.3 3.0 5.6 4.1 6.0 3.5 4.6 3.5 4.0 5.4 5.3 4.7 3.1
20141001 3.1 3.0 6.0 3.9 5.7 3.2 5.9 4.1 4.0 5.5 7.1 5.0 3.4
20141101 2.7 3.4 6.2 4.0 4.9 4.3 5.8 4.9 4.9 5.5 6.8 5.4 2.8
20141201 4.1 4.2 7.9 3.7 6.2 6.1 6.8 5.8 6.5 8.6 9.9 5.5 4.9
Raw
d3-styles.css
body, svg {
background-color: #EEEEEE;
font-family: "Helvetica", sans-serif;
}
h1 {
font-size: 1.4rem;
line-height: 1.8rem;
color: #272727;
}
p {
font-size: 1rem;
line-height: 1.2rem;
color: #272727;
width: 100%;
max-width: 700px;
}
p.sourceline {
font-size: 0.8rem;
}
a {
color: #367492;
text-decoration: none;
}
a:hover {
color: #4DAAD8;
}
path {
stroke: #663366;
stroke-width: 2;
fill: none;
}
.axis path, .axis line {
fill: none;
stroke: #666666;
stroke-width: 1;
shape-rendering: crispEdges;
}
.axis .minor line {
stroke: #777;
}
.legend {
font-size: 12px;
}
rect {
stroke-width: 2;
}
.y path {
display: none;
}
.axis text {
margin: 20px;
}
.airline {
opacity: 0.2;
-webkit-transition: opacity .2s;
transition: opacity .2s;
}
.airline .line {
stroke: #666;
stroke-width: 4;
opacity: 0.5;
}
.airline:hover {
opacity: 1;
cursor: pointer;
}
.airline:hover {
opacity: 1;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>d3-linechart-mod6</title>
<link rel="stylesheet" type="text/css" href="d3-styles.css" />
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>Flight delays</h1>
<p>Unlike weather delays, carrier delays can be prevented. This chart shows the percentage of U.S. domestic flights delayed by circumstances within the airline&#146;s control (e.g. maintenance, crew problems, fueling).</p>
<div id="d3Chart"></div>
<p class="sourceline">Source: <a href="http://www.transtats.bts.gov/OT_Delay/OT_DelayCause1.asp">Bureau of Transportation Statistics</a></p>
<script type="text/javascript" src="d3multiline.js"></script>
<script type="text/javascript">
// 1. SETUP MARGIN AND WIDTH, HEIGHT VARIABLES
var margin = { top: 30, right: 20, bottom: 30, left: 50 },
width = 800 - margin.left - margin.right,
height = 440 - margin.top - margin.bottom;
// 3b. SETUP DATE, TIME PARSER
var parseDate = d3.time.format('%Y%m%d').parse;
// 4. SET UP RANGES (PIXEL DIMENSIONS)
var x = d3.time.scale().range([0, (width - margin.right*5)]);
var y = d3.scale.linear().range([height, 0]);
/////////COLOR SCALE
var color = d3.scale.category10();
// 6. SET UP X,Y AXIS GENERATORS
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.tickFormat(d3.time.format("%b"));
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.tickFormat(function(d) {
return d + "%";
});
// 7. DEFINE LINE
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.delays); });
// 2. SET UP VARIABLE FOR SVG 'CANVAS'
var svg = d3.select('#d3Chart').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 + ')');
// ------------- THE CHART BLOCK ----------------
// 3a. LOAD CSV DATA & PARSE IT
d3.csv('airlinesData.csv', function(error, data) {
color.domain(d3.keys(data[0])
.filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(d.date);
});
///NOT SURE---------------
var airlines = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, delays: +d[name]};
})
};
});
// 5. SCALE THE RANGE OF THE DATA (SETUP DOMAIN)
x.domain(d3.extent(data, function(d) { return d.date; }));//extent returns a min and max value
///NOT SURE---------------
y.domain([0, d3.max(airlines, function(c) { return d3.max(c.values, function(v) { return v.delays; }); })
]);
//---------------
var airline = svg.selectAll(".airline")
.data(airlines)
.enter().append("g")
.attr("class", "airline");
// 9. ADD X AXIS SVG
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
// 10. ADD Y AXIS SVG
var gy = svg.append("g")
.attr("class", "y axis")
.call(yAxis);
gy.selectAll("g").filter(function(d) { return d; })
.classed("minor", true);
// 8. ADD LINE
airline.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); });
// ADD TEXT LABELS
airline.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.delays) + ")"; })
.attr("class" , (function(d) { return d.name; }))
.attr("x", 10)
.attr("dy", ".35em")
.attr("class", "textLabel")
.text(function(d) { return d.name; });
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment