D3 Examples - 4airlines

xxxxxxxxxx
 
<!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>
​
    <div id="d3Chart">
​
    <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 = 340 - 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>
    </div>
​
​
​
​
    <p class="sourceline">Source: <a href="https://www.transtats.bts.gov/OT_Delay/OT_DelayCause1.asp">Bureau of Transportation Statistics</a></p>
​
    
​
​
​
</body> 
​
​
​
</html>
​
​
    