d3airlines

<!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="https://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>

<p class="sourceline">Source: <a href="https://www.transtats.bts.gov/OT_Delay/OT_DelayCause1.asp">Bureau of Transportation Statistics</a></p>

// 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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js