delays-grouped.json

[
  [{
    "airline": "American",
    "totalDelay": 10914,
    "count": 164,
    "averageDelay": 67,
    "x": 0,
    "y": 67
  }, {
    "airline": "American",
    "totalDelay": 16978,
    "count": 301,
    "averageDelay": 56,
    "x": 1,
    "y": 56
  }, {
    "airline": "American",
    "totalDelay": 155078,
    "count": 2970,
    "averageDelay": 52,
    "x": 2,
    "y": 52
  }, {
    "airline": "American",
    "totalDelay": 57473,
    "count": 994,
    "averageDelay": 58,
    "x": 3,
    "y": 58
  }, {
    "airline": "American",
    "totalDelay": 4124,
    "count": 67,
    "averageDelay": 62,
    "x": 4,
    "y": 62
  }, {
    "airline": "American",
    "totalDelay": 11095,
    "count": 118,
    "averageDelay": 94,
    "x": 5,
    "y": 94
  }, {
    "airline": "American",
    "totalDelay": 7708,
    "count": 149,
    "averageDelay": 52,
    "x": 6,
    "y": 52
  }, {
    "airline": "American",
    "totalDelay": 12281,
    "count": 219,
    "averageDelay": 56,
    "x": 7,
    "y": 56
  }, {
    "airline": "American",
    "totalDelay": 6939,
    "count": 83,
    "averageDelay": 84,
    "x": 8,
    "y": 84
  }, {
    "airline": "American",
    "totalDelay": 4764,
    "count": 67,
    "averageDelay": 71,
    "x": 9,
    "y": 71
  }],
  [{
    "airline": "JetBlue",
    "totalDelay": 3480,
    "count": 58,
    "averageDelay": 60,
    "x": 0,
    "y": 60
  }, {
    "airline": "JetBlue",
    "totalDelay": 3109,
    "count": 63,
    "averageDelay": 49,
    "x": 1,
    "y": 49
  }, {
    "airline": "JetBlue",
    "totalDelay": 593,
    "count": 13,
    "averageDelay": 46,
    "x": 2,
    "y": 46
  }, {
    "airline": "JetBlue",
    "totalDelay": 1658,
    "count": 33,
    "averageDelay": 50,
    "x": 3,
    "y": 50
  }, {
    "airline": "JetBlue",
    "totalDelay": 0,
    "count": 0,
    "averageDelay": 0,
    "x": 4,
    "y": 0
  }, {
    "airline": "JetBlue",
    "totalDelay": 3297,
    "count": 54,
    "averageDelay": 61,
    "x": 5,
    "y": 61
  }, {
    "airline": "JetBlue",
    "totalDelay": 1353,
    "count": 23,
    "averageDelay": 59,
    "x": 6,
    "y": 59
  }, {
    "airline": "JetBlue",
    "totalDelay": 12061,
    "count": 203,
    "averageDelay": 59,
    "x": 7,
    "y": 59
  }, {
    "airline": "JetBlue",
    "totalDelay": 743,
    "count": 15,
    "averageDelay": 50,
    "x": 8,
    "y": 50
  }, {
    "airline": "JetBlue",
    "totalDelay": 0,
    "count": 0,
    "averageDelay": 0,
    "x": 9,
    "y": 0
  }],
  [{
    "airline": "Delta",
    "totalDelay": 4054,
    "count": 49,
    "averageDelay": 83,
    "x": 0,
    "y": 83
  }, {
    "airline": "Delta",
    "totalDelay": 9523,
    "count": 223,
    "averageDelay": 43,
    "x": 1,
    "y": 43
  }, {
    "airline": "Delta",
    "totalDelay": 3230,
    "count": 52,
    "averageDelay": 62,
    "x": 2,
    "y": 62
  }, {
    "airline": "Delta",
    "totalDelay": 5528,
    "count": 84,
    "averageDelay": 66,
    "x": 3,
    "y": 66
  }, {
    "airline": "Delta",
    "totalDelay": 108103,
    "count": 2335,
    "averageDelay": 46,
    "x": 4,
    "y": 46
  }, {
    "airline": "Delta",
    "totalDelay": 5128,
    "count": 83,
    "averageDelay": 62,
    "x": 5,
    "y": 62
  }, {
    "airline": "Delta",
    "totalDelay": 4763,
    "count": 100,
    "averageDelay": 48,
    "x": 6,
    "y": 48
  }, {
    "airline": "Delta",
    "totalDelay": 23726,
    "count": 453,
    "averageDelay": 52,
    "x": 7,
    "y": 52
  }, {
    "airline": "Delta",
    "totalDelay": 4033,
    "count": 57,
    "averageDelay": 71,
    "x": 8,
    "y": 71
  }, {
    "airline": "Delta",
    "totalDelay": 1338,
    "count": 31,
    "averageDelay": 43,
    "x": 9,
    "y": 43
  }],
  [{
    "airline": "SkyWest",
    "totalDelay": 60370,
    "count": 911,
    "averageDelay": 66,
    "x": 0,
    "y": 66
  }, {
    "airline": "SkyWest",
    "totalDelay": 41340,
    "count": 730,
    "averageDelay": 57,
    "x": 1,
    "y": 57
  }, {
    "airline": "SkyWest",
    "totalDelay": 7142,
    "count": 104,
    "averageDelay": 69,
    "x": 2,
    "y": 69
  }, {
    "airline": "SkyWest",
    "totalDelay": 72658,
    "count": 1085,
    "averageDelay": 67,
    "x": 3,
    "y": 67
  }, {
    "airline": "SkyWest",
    "totalDelay": 6393,
    "count": 91,
    "averageDelay": 70,
    "x": 4,
    "y": 70
  }, {
    "airline": "SkyWest",
    "totalDelay": 3880,
    "count": 56,
    "averageDelay": 69,
    "x": 5,
    "y": 69
  }, {
    "airline": "SkyWest",
    "totalDelay": 73783,
    "count": 1242,
    "averageDelay": 59,
    "x": 6,
    "y": 59
  }, {
    "airline": "SkyWest",
    "totalDelay": 118,
    "count": 1,
    "averageDelay": 118,
    "x": 7,
    "y": 118
  }, {
    "airline": "SkyWest",
    "totalDelay": 12213,
    "count": 197,
    "averageDelay": 62,
    "x": 8,
    "y": 62
  }, {
    "airline": "SkyWest",
    "totalDelay": 16152,
    "count": 280,
    "averageDelay": 58,
    "x": 9,
    "y": 58
  }],
  [{
    "airline": "United",
    "totalDelay": 42632,
    "count": 784,
    "averageDelay": 54,
    "x": 0,
    "y": 54
  }, {
    "airline": "United",
    "totalDelay": 27561,
    "count": 491,
    "averageDelay": 56,
    "x": 1,
    "y": 56
  }, {
    "airline": "United",
    "totalDelay": 1789,
    "count": 30,
    "averageDelay": 60,
    "x": 2,
    "y": 60
  }, {
    "airline": "United",
    "totalDelay": 102671,
    "count": 1520,
    "averageDelay": 68,
    "x": 3,
    "y": 68
  }, {
    "airline": "United",
    "totalDelay": 2356,
    "count": 47,
    "averageDelay": 50,
    "x": 4,
    "y": 50
  }, {
    "airline": "United",
    "totalDelay": 8902,
    "count": 166,
    "averageDelay": 54,
    "x": 5,
    "y": 54
  }, {
    "airline": "United",
    "totalDelay": 63315,
    "count": 1291,
    "averageDelay": 49,
    "x": 6,
    "y": 49
  }, {
    "airline": "United",
    "totalDelay": 10005,
    "count": 170,
    "averageDelay": 59,
    "x": 7,
    "y": 59
  }, {
    "airline": "United",
    "totalDelay": 6287,
    "count": 102,
    "averageDelay": 62,
    "x": 8,
    "y": 62
  }, {
    "airline": "United",
    "totalDelay": 60857,
    "count": 1273,
    "averageDelay": 48,
    "x": 9,
    "y": 48
  }],
  [{
    "airline": "US Airways",
    "totalDelay": 1969,
    "count": 40,
    "averageDelay": 49,
    "x": 0,
    "y": 49
  }, {
    "airline": "US Airways",
    "totalDelay": 2319,
    "count": 51,
    "averageDelay": 45,
    "x": 1,
    "y": 45
  }, {
    "airline": "US Airways",
    "totalDelay": 3559,
    "count": 64,
    "averageDelay": 56,
    "x": 2,
    "y": 56
  }, {
    "airline": "US Airways",
    "totalDelay": 5403,
    "count": 106,
    "averageDelay": 51,
    "x": 3,
    "y": 51
  }, {
    "airline": "US Airways",
    "totalDelay": 2311,
    "count": 53,
    "averageDelay": 44,
    "x": 4,
    "y": 44
  }, {
    "airline": "US Airways",
    "totalDelay": 2130,
    "count": 36,
    "averageDelay": 59,
    "x": 5,
    "y": 59
  }, {
    "airline": "US Airways",
    "totalDelay": 2738,
    "count": 47,
    "averageDelay": 58,
    "x": 6,
    "y": 58
  }, {
    "airline": "US Airways",
    "totalDelay": 7434,
    "count": 130,
    "averageDelay": 57,
    "x": 7,
    "y": 57
  }, {
    "airline": "US Airways",
    "totalDelay": 33437,
    "count": 637,
    "averageDelay": 52,
    "x": 8,
    "y": 52
  }, {
    "airline": "US Airways",
    "totalDelay": 3126,
    "count": 52,
    "averageDelay": 60,
    "x": 9,
    "y": 60
  }],
  [{
    "airline": "Southwest",
    "totalDelay": 16017,
    "count": 267,
    "averageDelay": 60,
    "x": 0,
    "y": 60
  }, {
    "airline": "Southwest",
    "totalDelay": 37026,
    "count": 818,
    "averageDelay": 45,
    "x": 1,
    "y": 45
  }, {
    "airline": "Southwest",
    "totalDelay": 0,
    "count": 0,
    "averageDelay": 0,
    "x": 2,
    "y": 0
  }, {
    "airline": "Southwest",
    "totalDelay": 0,
    "count": 0,
    "averageDelay": 0,
    "x": 3,
    "y": 0
  }, {
    "airline": "Southwest",
    "totalDelay": 42201,
    "count": 884,
    "averageDelay": 48,
    "x": 4,
    "y": 48
  }, {
    "airline": "Southwest",
    "totalDelay": 62969,
    "count": 1396,
    "averageDelay": 45,
    "x": 5,
    "y": 45
  }, {
    "airline": "Southwest",
    "totalDelay": 62589,
    "count": 1318,
    "averageDelay": 47,
    "x": 6,
    "y": 47
  }, {
    "airline": "Southwest",
    "totalDelay": 14059,
    "count": 233,
    "averageDelay": 60,
    "x": 7,
    "y": 60
  }, {
    "airline": "Southwest",
    "totalDelay": 47817,
    "count": 1153,
    "averageDelay": 41,
    "x": 8,
    "y": 41
  }, {
    "airline": "Southwest",
    "totalDelay": 0,
    "count": 0,
    "averageDelay": 0,
    "x": 9,
    "y": 0
  }]
]

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <style>
      body {
        margin: 0;
        font-family: Helvetica, Arial, sans-serif;
      }
      #container {
        background-color: white;
        box-shadow: 0 0 5px #888;
        margin: 50px auto;
        padding: 50px;
        position: relative;
        width: 700px;
      }
      h1 {
        font-size: 24px;
        margin: 0;
      }
      p {
        font-size: 14px;
        margin: 15px 0 10px 0;
      }
      a:link {
        text-decoration: none;
        color: gray;
      }
      a:hover {
        text-decoration: underline;
      }
      a:visited {
        color: gray;
      }
      a:active {
        color: steelBlue;
      }
      svg {
        background-color: white;
      }
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
      .axis path {
        fill: none;
        stroke: none;
      }
      .axis text {
        font-family: sans-serif;
        font-size: 11px;
      }
      .tip {
        background: #fff;
        border: none;
        box-shadow: 0 0 5px #888;
        display: none;
        left: 1em;
        padding: 0.5em;
        position: absolute;
        top: 1em;
        width: 200px;
      }
    </style>
  </head>
  <body>

    <div id="container">
      <h1>For Delayed Flights, Average Length of Delay</h1>

      <p>The <a href="http://transtats.bts.gov/DL_SelectFields.asp?Table_ID=236&DB_Short_Name=On-Time">Bureau of Transportation Statistics provides data on delayed flights</a>. Below is a stacked bar chart showing average delay length for delayed flights at several large US airports.</p>
    </div>

    <script>    
      var w = 700;
      var h = 300;
      var padding = [ 1, 10, 30, 120 ];  //Top, right, bottom, left

      d3.json('delays-grouped.json', function(dataset) {
        var stack = d3.layout.stack();
        stack(dataset);

        var xScale = d3.scale.ordinal()
          .domain(d3.range(dataset[0].length))
          .rangeRoundBands([0, w], 0.05);
        var yScale = d3.scale.linear()
          .domain([0,       
            d3.max(dataset, function(d) {
              return d3.max(d, function(d) {
                return d.y0 + d.y;
              });
            })
          ])
          .range([0, h - padding[0] - padding[2]]);

        // Color Brewer qualitative colors.
        var colors = ['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628'];

        var tip = d3.select('#container')
          .append('div')
          .attr('class', 'tip');
        var tipTimer;

        var svg = d3.select('#container')
          .append('svg')
          .attr('width', w)
          .attr('height', h);

        var groups = svg.selectAll('g')
          .data(dataset)
          .enter()
          .append('g')
          .style('fill', function(d, i) {
            return colors[i];
          });

        // Add a rect for each data value
        var rects = groups.selectAll('rect')
          .data(function(d) { return d; })
          .enter()
          .append('rect')
          .attr('x', function(d, i) {
            return xScale(i);
          })
          .attr('width', xScale.rangeBand())
          .attr('y', function(d) {
            return h - yScale(d.y0) - yScale(d.y) - padding[2];
          })
          .attr('height', function(d) {
            return yScale(d.y);
          })
          .on('mousemove', function(d) {
            // Show and position the tool tip.
            var where = d3.mouse(this);
            // Left side of the chart:  show tool tip to the right of curosr.
            // Right side of the chart:  show tool tip to the left of cursor.
            var leftPad = (where[0] < 350) ? 60 : -170;
            tip.style({
              'display': 'block',
              'left': where[0] + leftPad + 'px',
              'top': where[1] + 30 + 'px'
              })
              .html('Airline:  ' + d.airline + '<br>' + 
                'Average Delay:  ' + d.averageDelay + ' minutes<br>' +
                'Total flights:  ' + d.count
              );
          })
          .on('mouseout', function() {
            // Add a short delay to hide the tool tip to prevent
            // flickering when moving between bars.
            tipTimer = setTimeout(function() {
              tip.style('display', 'none');
            }, 200)
          })
          .on('mouseenter', function() {
            // Don't hide the tool tip if mouseenter fires quickly after
            // mouseout.
            clearTimeout(tipTimer);
          });

        // Add an x axis.
        var ports = [ 'SFO', 'LAX', 'DFW', 'ORD', 'ATL', 'LAS', 'DEN', 'LGA', 'PHX', 'IAH' ];
        var xAxis = d3.svg.axis()
          .scale(xScale)
          .ticks(10)
          .tickFormat(function(d) { return ports[d]; })
          .orient('bottom');
        svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + (h - padding[2]) + ")")
          .call(xAxis);
      });
    </script>

  </body>
</html>