btahir · October 8, 2015 18:52
diff --git a/README.md b/README.md
diff --git a/airports_2.csv b/airports_2.csv
diff --git a/flights-airport_all.csv b/flights-airport_all.csv
diff --git a/flights-airport_all_old.csv b/flights-airport_all_old.csv
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
    <style type="text/css">



 .chart .legend {
  fill: black;
  font: 14px sans-serif;
  text-anchor: start;
  font-size: 12px;
 }

 .legend circle {
  stroke: #ccc;
 }

 .legend text {
  fill: #777;
  font: 10px sans-serif;
 }

 .chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
 }

 .chart .label {
  fill: black;
  font: 14px sans-serif;
  text-anchor: end;
 }

 .bar:hover {
  fill: brown;
 }

 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }

 #states path {
  fill: #ccc;
  stroke: #fff;
 }

 path.arc {
  pointer-events: none;
  fill: none;
  stroke: #000;
  display: none;
 }

 path.cell {
  fill: none;
  pointer-events: all;
 }

 .graticule {
  fill: none;
  stroke: #777;
  stroke-width: .001px;
  stroke-opacity: .5;
 }

 .land {
  fill: none;
  stroke: lightgrey;
 }

 .state-boundary {
  fill: none;
  stroke: lightgrey;
 }

 #cells.voronoi path.cell {
  stroke: brown;
 }

 #cells g:hover path.arc {
  display: inherit;
 }

    </style>
  </head>
  <body>
    <h1>   
     <div> <div style="position:absolute;left: 400px;font-family: sans-serif;font-style: normal;font-weight: normal;">
    </h1>
    <h2>
      <div> <div style="position:absolute;bottom: 25%;left:2%;font-size: 16px;
        font-family: sans-serif;font-style: normal;font-weight: normal; opacity: 0.7;">
      <span></span>
    </h2>

      <h3>
        <div> <div style="position:absolute;right: 500px;
        font-family: sans-serif;font-style: normal;font-weight: normal;font-size: 18px;">
      <span></span>
    </h3>
    </div>
    <div id='dashboard' style="position:absolute;bottom: 0px;left: 100px; opacity: 0.9;">

    <style>

 .axis {  font: 8px sans-serif; }
 .legend tr{    border-bottom:1px solid grey; }
 .legend tr:first-child{    border-top:1px solid grey; }

 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }

 .x.axis path {  display: none; }
 .legend{
    margin-bottom:76px;
    display:inline-block;
    border-collapse: collapse;
    border-spacing: 0px;
 }

 .legend td{
    padding:4px 5px;
    vertical-align:bottom;
 }

 .legendFreq, .legendPerc{
    align:right;
    width:50px;
 }

 </style>
    </div>

    <script type="text/javascript">

 //Drawiing US Map

 // Map dimensions
 var w = 1280,
    h = 800
    opacityCircle = 0.7,
    magnifier = 100;

 var origin = [-98, 38];

 // Projection setup
 var projection = d3.geo.albers()
    .rotate([96, 0])
    .center([-.6, 38.7])
    .parallels([29.5, 45.5])
    .scale(900)
    .translate([w / 2 - 200, h / 2 - 100])
    .precision(.1);

 // flight paths
 var path = d3.geo.path()
    .projection(projection);

 var graticule = d3.geo.graticule()
    .extent([[-98 - 45, 38 - 45], [-98 + 45, 38 + 45]])
    .step([5, 5]);

 // Actual drawing of graticules
 var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

 svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

 d3.json("us.json", function(error, us) {
  if (error) throw error;

  svg.insert("path", ".graticule")
      .datum(topojson.feature(us, us.objects.land))
      .attr("class", "land")
      .attr("d", path);

  svg.insert("path", ".graticule")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "state-boundary")
      .attr("d", path);
 });

 // Defining locations
 d3.select(self.frameElement).style("height", h + "px");

 var states = svg.append("svg:g")
    .attr("id", "states");

 var circles = svg.append("svg:g")
    .attr("id", "circles");

 var cells = svg.append("svg:g")
    .attr("id", "cells");


 // Load in flights data
 d3.csv("flights-airport_all.csv", function(flights) {
  
  var linksByOrigin = {},
      countByAirport = {},
      cancelledByAirport = {},
      locationByAirport = {},
      Airport_count = {},
      Cancelled_count = {},
      Diverted_count = {},
      arr_delay = {},
      sec_delay = {},
      weather_delay = {},
      carrier_delay = {},
      nas_delay = {},
      late_aircraft_delay = {},
      max_delay = {},
      positions = [],

      data_series_1 = {};


  var arc = d3.geo.greatArc()
      .source(function(d) { return locationByAirport[d.source]; })
      .target(function(d) { return locationByAirport[d.target]; });


  // assigning flight data to variables
  flights.forEach(function(flight) {
  var origin = flight.origin,
      destination = flight.destination,
      count_airport = +flight.count,
      cancelled_Airport = +flight.count_cancelled,
      diverted_Airport = +flight.count_diverted,


      // assigning average delay fields
      arr_delay_airport = +flight.TOTAL_AVG_ARR_DELAY,
      security_delay_airport = +flight.TOTAL_AVG_SECURITY_DELAY,
      weather_delay_airport = +flight.TOTAL_AVG_WEATHER_DELAY,
      nas_delay_airport = +flight.TOTAL_AVG_NAS_DELAY,
      late_aircraft_delay_airport = +flight.TOTAL_AVG_LATE_AIRCRAFT_DELAY,
      carrier_delay_airport = +flight.TOTAL_AVG_CARRIER_DELAY,

      // assigning frequency of delays (counts)
      sum_arr_delay_airport = +flight.TOTAL_ARR_DELAY,
      sum_security_delay_airport = +flight.TOTAL_SECURITY_DELAY,
      sum_weather_delay_airport = +flight.TOTAL_WEATHER_DELAY,
      sum_nas_delay_airport = +flight.TOTAL_NAS_DELAY,
      sum_late_aircraft_delay_airport = +flight.TOTAL_LATE_AIRCRAFT_DELAY,
      sum_carrier_delay_airport = +flight.TOTAL_CARRIER_DELAY,

      links = linksByOrigin[origin] || (linksByOrigin[origin] = []);
      links.push({source: origin, target: destination});

  // counting flights at airport location for circle size
  countByAirport[origin] = (countByAirport[origin] || 0) + 5;
  countByAirport[destination] = (countByAirport[destination] || 0) + 5;

  // getting counts for flights, cancellations, diverted
  Airport_count[origin] = (Airport_count[origin]|| 0)  + count_airport; 
  Cancelled_count[origin] = (Cancelled_count[origin]|| 0)  + cancelled_Airport;
  Diverted_count[origin] = (Diverted_count[origin]|| 0)  + diverted_Airport;

  // calulating average delays per airport
  arr_delay[origin] = (arr_delay[origin]|| 0)  + arr_delay_airport;
  sec_delay[origin] = (sec_delay[origin]|| 0)  + security_delay_airport;
  weather_delay[origin] = (weather_delay[origin]|| 0)  + weather_delay_airport;
  carrier_delay[origin] = (carrier_delay[origin]|| 0)  + carrier_delay_airport;
  nas_delay[origin] = (nas_delay[origin]|| 0)  + nas_delay_airport;
  late_aircraft_delay[origin] = (late_aircraft_delay[origin]|| 0)  + late_aircraft_delay_airport;

  //calculate delay with maximum frequency 
  var max_i = Math.max(sum_carrier_delay_airport,sum_weather_delay_airport,sum_security_delay_airport,
    sum_late_aircraft_delay_airport,sum_nas_delay_airport);
  
  if (sum_carrier_delay_airport >= max_i) {
    max_delay[origin] = "Carrier";
  } else if (sum_weather_delay_airport >= max_i) {
    max_delay[origin] = "Weather";
  } else if (sum_nas_delay_airport >= max_i) {
    max_delay[origin] = "National Air System";
  } else if (sum_security_delay_airport >= max_i) {
    max_delay[origin] = "Security";
  } else { max_delay[origin] = "Late Aircraft";
  }

 });
    
  // Load airport data
  d3.csv("airports_2.csv", function(airports) {


    // Only consider airports with at least one flight.
    airports = airports.filter(function(airport) {
      if (countByAirport[airport.iata]) {
        var location = [+airport.longitude, +airport.latitude];
        locationByAirport[airport.iata] = location;
        positions.push(projection(location)); 
        return true;
      }

    });

    // Compute the Voronoi diagram of airports' projected positions.
    var polygons = d3.geom.voronoi(positions);

    var g = cells.selectAll("g")
        .data(airports)
      .enter().append("svg:g");


    g.append("svg:path")
        .attr("class", "cell")
        .attr("d", function(d, i) { return "M" + polygons[i].join("L") + "Z"; })
        .on("mouseover", function(d, i) { 


         d3.select("h2 span").text("")
         .append("p").text(d.name).style("font-size", "18px")
         .append("p").text(d.city + ", " + d.state)
         .append("p").text("Flights: " + Airport_count[d.iata]);
         

        // Call function to update bar chart 
        updateBarChart(d, i);
      

         });

          //Create color legend for indicating the biggest reason of cancellation
            var z = d3.scale.category10();
            var reasons = ['Carrier', 'Weather', 'Security', 'National Air System', 'Late Aircraft'];
            var legend_color = svg.append("g")
                .attr("class", "legend")
                .attr("transform", "translate(" + (w - 450) + "," + (h - 300) + ")")
              .selectAll("g")
              .data([0, 1, 2, 3, 4])
              .enter().append("g");

              legend_color.append("circle")
                  .attr("cy", function (d) { return - 25*(8-d);  })
                  .attr("cx", function(d) {return -15;})
                  .attr("r", function (d) { return 5; })
                  .attr("fill", function (d) {return z(d); })
                  .attr('opacity', opacityCircle);

              legend_color.append("text")
                  .attr("y", function (d) { return - 25*(8-d)+2.5; })
                  .attr("x", function (d) {return -5;})
                  .attr("text-anchor", "start")
                  .text(function (d) {return reasons[d];})

              legend_color.append("text")
                  .attr("y", - 220 )
                  .attr("x", -20)
                  .attr("text-anchor", "start")
                  .attr('fill', 'lightgrey')
                  .text("most frequent delay")


              g.selectAll("path.arc")
                  .data(function(d) { return linksByOrigin[d.iata] || []; })
                .enter().append("svg:path")
                  .attr("class", "arc")
                  .attr("d", function(d) { return path(arc(d)); });

              circles.selectAll("circle")
                  .data(airports)
                .enter().append("svg:circle")
                  .attr("cx", function(d, i) { return positions[i][0]; })
                  .attr("cy", function(d, i) { return positions[i][1]; })
                  .attr("r", function(d, i) { return Math.sqrt(countByAirport[d.iata]); })
                  .sort(function(a, b) { return countByAirport[b.iata] - countByAirport[a.iata]; })
                  .attr("fill", function (d) { return z(reasons.indexOf(max_delay[d.iata])) })
                  .attr('opacity', opacityCircle);


 // umbrella function to create bar chart
 function dashboard(id, fData){
    var barColor = 'steelblue';
    function segColor(c){ return {Normal:"#807dba", Cancelled:"#e08214",Diverted:"#41ab5d"}[c]; }
    
    // compute total for each state.
    fData.forEach(function(d){d.total=d.freq.Normal+d.freq.Cancelled+d.freq.Diverted;});
    
    // function to handle histogram.
    function histoGram(fD){
        var hG={},    hGDim = {t: 60, r: 0, b: 30, l: 0};
        hGDim.w = 500 - hGDim.l - hGDim.r, 
        hGDim.h = 200 - hGDim.t - hGDim.b;
            
        //create svg for histogram.
        var hGsvg = d3.select(id).append("svg")
            .attr("width", hGDim.w + hGDim.l + hGDim.r)
            .attr("height", hGDim.h + hGDim.t + hGDim.b).append("g")
            .attr("transform", "translate(" + hGDim.l + "," + hGDim.t + ")");

        // create function for x-axis mapping.
        var x = d3.scale.ordinal().rangeRoundBands([0, hGDim.w], 0.1)
                .domain(fD.map(function(d) { return d[0]; }));

        // Add x-axis to the histogram svg.
        hGsvg.append("g").attr("class", "x axis")
            .attr("transform", "translate(0," + hGDim.h + ")")
            .call(d3.svg.axis().scale(x).orient("bottom"));

        // Create function for y-axis map.
        var y = d3.scale.linear().range([hGDim.h, 0])
                .domain([0, d3.max(fD, function(d) { return d[1]; })]);

        // Create bars for histogram to contain rectangles and freq labels.
        var bars = hGsvg.selectAll(".bar").data(fD).enter()
                .append("g").attr("class", "bar");
        
        //create the rectangles.
        bars.append("rect")
            .attr("x", function(d) { return x(d[0]); })
            .attr("y", function(d) { return y(d[1]); })
            .attr("width", x.rangeBand())
            .attr("height", function(d) { return hGDim.h - y(d[1]); })
            .attr('fill',barColor);

            
        //Create the frequency labels above the rectangles.
        bars.append("text").text(function(d){ return d3.format(",")(d[1])})
            .attr("x", function(d) { return x(d[0])+x.rangeBand()/2; })
            .attr("y", function(d) { return y(d[1])-5; })
            .attr("text-anchor", "middle");

        var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left");

        bars.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .style("text-anchor", "end")
            .text("Average Delay in minutes")
            .style("font-size", "8px")
            // .style("font-family","sans-serif")
            // .style("font-weight", "normal")
            .style("opacity",0.4);
   
        
        
        // create function to update the bars. This will be used by pie-chart.
        hG.update = function(nD, color){
            // update the domain of the y-axis map to reflect change in frequencies.
            y.domain([0, d3.max(nD, function(d) { return d[1]; })]);
            
            // Attach the new data to the bars.
            var bars = hGsvg.selectAll(".bar").data(nD);
            
            // transition the height and color of rectangles.
            bars.select("rect").transition().duration(500)
                .attr("y", function(d) {return y(d[1]); })
                .attr("height", function(d) { return hGDim.h - y(d[1]); })
                .attr("fill", color);

            // transition the frequency labels location and change value.
            bars.select("text").transition().duration(500)
                .text(function(d){ return d3.format(",")(d[1])})
                .attr("y", function(d) {return y(d[1])-5; });            
        }        
        return hG;
    }
    

    
    // calculate total frequency by segment for all state.
    var tF = ['Normal','Cancelled','Diverted'].map(function(d){ 
        return {type:d, freq: d3.sum(fData.map(function(t){ return t.freq[d];}))}; 
    });    
    
    // calculate total frequency by state for all segment.
    var sF = fData.map(function(d){return [d.State,d.total];});

    var hG = histoGram(sF) // create the histogram.
  
 }



 var freqData = [
        {State:'Carrier Delay',freq:{Normal:0, Cancelled:0, Diverted:0}}
        ,{State:'Weather Delay',freq:{Normal:0, Cancelled:0, Diverted:0}}
        ,{State:'Security Delay',freq:{Normal:0, Cancelled:0, Diverted:0}}
        ,{State:'National Air System Delay',freq:{Normal:0, Cancelled:0, Diverted:0}}
        ,{State:'Late Aircraft Delay',freq:{Normal:0, Cancelled:0, Diverted:0}}
        ]



 dashboard('#dashboard',freqData);
  
 // function to update bar chart data 
 function updateBarChart(d, i) {

            fD = [
              {State:'Carrier Delay',freq:{Total:Math.round(carrier_delay[d.iata])}},
              {State:'Weather Delay',freq:{Total:Math.round(weather_delay[d.iata])}},
              {State:'Security Delay',freq:{Total:Math.round(sec_delay[d.iata])}},
              {State:'National Air System Delay',freq:{Total:Math.round(nas_delay[d.iata])}},
              {State:'Late Aircraft Delay',freq:{Total:Math.round(late_aircraft_delay[d.iata])}}
            ];

            // These constants and scales could go elsewhere
            var barColor = 'steelblue';
            var hG={},    hGDim = {t: 60, r: 0, b: 30, l: 0};
            hGDim.w = 500 - hGDim.l - hGDim.r;
            hGDim.h = 200 - hGDim.t - hGDim.b;

            var x = d3.scale.ordinal().rangeRoundBands([0, hGDim.w], 0.1)
                      .domain(fD.map(function(d) { return d.State; } ));

            var y = d3.scale.linear().range([hGDim.h, 0])
                    .domain([0, d3.max(fD, function(d) { return d.freq.Total; })]);


            // Update Exit and Enter selections
            var bars = d3.select("div#dashboard")
                         .selectAll("g.bar")
                         .data(fD);

            bars.exit().remove();

            bars.enter()
                .append("rect")
                .attr("class", "bar")
                .append("text")
                .attr("text-anchor", "middle");

            // Update the rectangles.
            bars.transition().duration(250)
                .select("rect")
                .attr("x", function(d) { return x(d.State); })
                .attr("y", function(d) { return y(d.freq.Total); })
                .attr("width", x.rangeBand())
                .attr("height", function(d) { return hGDim.h - y(d.freq.Total); })
                .attr('fill', barColor);

            // Update the text labels
            bars.transition().duration(250)
                .select("text")
                .text(function(d){ return d3.format(",")(d.freq.Total); })
                .attr("x", function(d) { return x(d.State) + x.rangeBand()/2; })
                .attr("y", function(d) { return y(d.freq.Total)-5; })
                .attr("text-anchor", "middle");
          }



  });
 });


 </script>


  </body>
 </html>


diff --git a/us.json b/us.json

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
	<style type="text/css">



	.chart .legend {
	fill: black;
	font: 14px sans-serif;
	text-anchor: start;
	font-size: 12px;
	}

	.legend circle {
	stroke: #ccc;
	}

	.legend text {
	fill: #777;
	font: 10px sans-serif;
	}

	.chart text {
	fill: white;
	font: 10px sans-serif;
	text-anchor: end;
	}

	.chart .label {
	fill: black;
	font: 14px sans-serif;
	text-anchor: end;
	}

	.bar:hover {
	fill: brown;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	#states path {
	fill: #ccc;
	stroke: #fff;
	}

	path.arc {
	pointer-events: none;
	fill: none;
	stroke: #000;
	display: none;
	}

	path.cell {
	fill: none;
	pointer-events: all;
	}

	.graticule {
	fill: none;
	stroke: #777;
	stroke-width: .001px;
	stroke-opacity: .5;
	}

	.land {
	fill: none;
	stroke: lightgrey;
	}

	.state-boundary {
	fill: none;
	stroke: lightgrey;
	}

	#cells.voronoi path.cell {
	stroke: brown;
	}

	#cells g:hover path.arc {
	display: inherit;
	}

	</style>
	</head>
	<body>
	<h1>
	<div> <div style="position:absolute;left: 400px;font-family: sans-serif;font-style: normal;font-weight: normal;">
	</h1>
	<h2>
	<div> <div style="position:absolute;bottom: 25%;left:2%;font-size: 16px;
	font-family: sans-serif;font-style: normal;font-weight: normal; opacity: 0.7;">
	<span></span>
	</h2>

	<h3>
	<div> <div style="position:absolute;right: 500px;
	font-family: sans-serif;font-style: normal;font-weight: normal;font-size: 18px;">
	<span></span>
	</h3>
	</div>
	<div id='dashboard' style="position:absolute;bottom: 0px;left: 100px; opacity: 0.9;">

	<style>

	.axis { font: 8px sans-serif; }
	.legend tr{ border-bottom:1px solid grey; }
	.legend tr:first-child{ border-top:1px solid grey; }

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path { display: none; }
	.legend{
	margin-bottom:76px;
	display:inline-block;
	border-collapse: collapse;
	border-spacing: 0px;
	}

	.legend td{
	padding:4px 5px;
	vertical-align:bottom;
	}

	.legendFreq, .legendPerc{
	align:right;
	width:50px;
	}

	</style>
	</div>

	<script type="text/javascript">

	//Drawiing US Map

	// Map dimensions
	var w = 1280,
	h = 800
	opacityCircle = 0.7,
	magnifier = 100;

	var origin = [-98, 38];

	// Projection setup
	var projection = d3.geo.albers()
	.rotate([96, 0])
	.center([-.6, 38.7])
	.parallels([29.5, 45.5])
	.scale(900)
	.translate([w / 2 - 200, h / 2 - 100])
	.precision(.1);

	// flight paths
	var path = d3.geo.path()
	.projection(projection);

	var graticule = d3.geo.graticule()
	.extent([[-98 - 45, 38 - 45], [-98 + 45, 38 + 45]])
	.step([5, 5]);

	// Actual drawing of graticules
	var svg = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h);

	svg.append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);

	d3.json("us.json", function(error, us) {
	if (error) throw error;

	svg.insert("path", ".graticule")
	.datum(topojson.feature(us, us.objects.land))
	.attr("class", "land")
	.attr("d", path);

	svg.insert("path", ".graticule")
	.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
	.attr("class", "state-boundary")
	.attr("d", path);
	});

	// Defining locations
	d3.select(self.frameElement).style("height", h + "px");

	var states = svg.append("svg:g")
	.attr("id", "states");

	var circles = svg.append("svg:g")
	.attr("id", "circles");

	var cells = svg.append("svg:g")
	.attr("id", "cells");


	// Load in flights data
	d3.csv("flights-airport_all.csv", function(flights) {

	var linksByOrigin = {},
	countByAirport = {},
	cancelledByAirport = {},
	locationByAirport = {},
	Airport_count = {},
	Cancelled_count = {},
	Diverted_count = {},
	arr_delay = {},
	sec_delay = {},
	weather_delay = {},
	carrier_delay = {},
	nas_delay = {},
	late_aircraft_delay = {},
	max_delay = {},
	positions = [],

	data_series_1 = {};


	var arc = d3.geo.greatArc()
	.source(function(d) { return locationByAirport[d.source]; })
	.target(function(d) { return locationByAirport[d.target]; });


	// assigning flight data to variables
	flights.forEach(function(flight) {
	var origin = flight.origin,
	destination = flight.destination,
	count_airport = +flight.count,
	cancelled_Airport = +flight.count_cancelled,
	diverted_Airport = +flight.count_diverted,


	// assigning average delay fields
	arr_delay_airport = +flight.TOTAL_AVG_ARR_DELAY,
	security_delay_airport = +flight.TOTAL_AVG_SECURITY_DELAY,
	weather_delay_airport = +flight.TOTAL_AVG_WEATHER_DELAY,
	nas_delay_airport = +flight.TOTAL_AVG_NAS_DELAY,
	late_aircraft_delay_airport = +flight.TOTAL_AVG_LATE_AIRCRAFT_DELAY,
	carrier_delay_airport = +flight.TOTAL_AVG_CARRIER_DELAY,

	// assigning frequency of delays (counts)
	sum_arr_delay_airport = +flight.TOTAL_ARR_DELAY,
	sum_security_delay_airport = +flight.TOTAL_SECURITY_DELAY,
	sum_weather_delay_airport = +flight.TOTAL_WEATHER_DELAY,
	sum_nas_delay_airport = +flight.TOTAL_NAS_DELAY,
	sum_late_aircraft_delay_airport = +flight.TOTAL_LATE_AIRCRAFT_DELAY,
	sum_carrier_delay_airport = +flight.TOTAL_CARRIER_DELAY,

	links = linksByOrigin[origin] \|\| (linksByOrigin[origin] = []);
	links.push({source: origin, target: destination});

	// counting flights at airport location for circle size
	countByAirport[origin] = (countByAirport[origin] \|\| 0) + 5;
	countByAirport[destination] = (countByAirport[destination] \|\| 0) + 5;

	// getting counts for flights, cancellations, diverted
	Airport_count[origin] = (Airport_count[origin]\|\| 0) + count_airport;
	Cancelled_count[origin] = (Cancelled_count[origin]\|\| 0) + cancelled_Airport;
	Diverted_count[origin] = (Diverted_count[origin]\|\| 0) + diverted_Airport;

	// calulating average delays per airport
	arr_delay[origin] = (arr_delay[origin]\|\| 0) + arr_delay_airport;
	sec_delay[origin] = (sec_delay[origin]\|\| 0) + security_delay_airport;
	weather_delay[origin] = (weather_delay[origin]\|\| 0) + weather_delay_airport;
	carrier_delay[origin] = (carrier_delay[origin]\|\| 0) + carrier_delay_airport;
	nas_delay[origin] = (nas_delay[origin]\|\| 0) + nas_delay_airport;
	late_aircraft_delay[origin] = (late_aircraft_delay[origin]\|\| 0) + late_aircraft_delay_airport;

	//calculate delay with maximum frequency
	var max_i = Math.max(sum_carrier_delay_airport,sum_weather_delay_airport,sum_security_delay_airport,
	sum_late_aircraft_delay_airport,sum_nas_delay_airport);

	if (sum_carrier_delay_airport >= max_i) {
	max_delay[origin] = "Carrier";
	} else if (sum_weather_delay_airport >= max_i) {
	max_delay[origin] = "Weather";
	} else if (sum_nas_delay_airport >= max_i) {
	max_delay[origin] = "National Air System";
	} else if (sum_security_delay_airport >= max_i) {
	max_delay[origin] = "Security";
	} else { max_delay[origin] = "Late Aircraft";
	}

	});

	// Load airport data
	d3.csv("airports_2.csv", function(airports) {


	// Only consider airports with at least one flight.
	airports = airports.filter(function(airport) {
	if (countByAirport[airport.iata]) {
	var location = [+airport.longitude, +airport.latitude];
	locationByAirport[airport.iata] = location;
	positions.push(projection(location));
	return true;
	}

	});

	// Compute the Voronoi diagram of airports' projected positions.
	var polygons = d3.geom.voronoi(positions);

	var g = cells.selectAll("g")
	.data(airports)
	.enter().append("svg:g");


	g.append("svg:path")
	.attr("class", "cell")
	.attr("d", function(d, i) { return "M" + polygons[i].join("L") + "Z"; })
	.on("mouseover", function(d, i) {


	d3.select("h2 span").text("")
	.append("p").text(d.name).style("font-size", "18px")
	.append("p").text(d.city + ", " + d.state)
	.append("p").text("Flights: " + Airport_count[d.iata]);


	// Call function to update bar chart
	updateBarChart(d, i);


	});

	//Create color legend for indicating the biggest reason of cancellation
	var z = d3.scale.category10();
	var reasons = ['Carrier', 'Weather', 'Security', 'National Air System', 'Late Aircraft'];
	var legend_color = svg.append("g")
	.attr("class", "legend")
	.attr("transform", "translate(" + (w - 450) + "," + (h - 300) + ")")
	.selectAll("g")
	.data([0, 1, 2, 3, 4])
	.enter().append("g");

	legend_color.append("circle")
	.attr("cy", function (d) { return - 25*(8-d); })
	.attr("cx", function(d) {return -15;})
	.attr("r", function (d) { return 5; })
	.attr("fill", function (d) {return z(d); })
	.attr('opacity', opacityCircle);

	legend_color.append("text")
	.attr("y", function (d) { return - 25*(8-d)+2.5; })
	.attr("x", function (d) {return -5;})
	.attr("text-anchor", "start")
	.text(function (d) {return reasons[d];})

	legend_color.append("text")
	.attr("y", - 220 )
	.attr("x", -20)
	.attr("text-anchor", "start")
	.attr('fill', 'lightgrey')
	.text("most frequent delay")


	g.selectAll("path.arc")
	.data(function(d) { return linksByOrigin[d.iata] \|\| []; })
	.enter().append("svg:path")
	.attr("class", "arc")
	.attr("d", function(d) { return path(arc(d)); });

	circles.selectAll("circle")
	.data(airports)
	.enter().append("svg:circle")
	.attr("cx", function(d, i) { return positions[i][0]; })
	.attr("cy", function(d, i) { return positions[i][1]; })
	.attr("r", function(d, i) { return Math.sqrt(countByAirport[d.iata]); })
	.sort(function(a, b) { return countByAirport[b.iata] - countByAirport[a.iata]; })
	.attr("fill", function (d) { return z(reasons.indexOf(max_delay[d.iata])) })
	.attr('opacity', opacityCircle);


	// umbrella function to create bar chart
	function dashboard(id, fData){
	var barColor = 'steelblue';
	function segColor(c){ return {Normal:"#807dba", Cancelled:"#e08214",Diverted:"#41ab5d"}[c]; }

	// compute total for each state.
	fData.forEach(function(d){d.total=d.freq.Normal+d.freq.Cancelled+d.freq.Diverted;});

	// function to handle histogram.
	function histoGram(fD){
	var hG={}, hGDim = {t: 60, r: 0, b: 30, l: 0};
	hGDim.w = 500 - hGDim.l - hGDim.r,
	hGDim.h = 200 - hGDim.t - hGDim.b;

	//create svg for histogram.
	var hGsvg = d3.select(id).append("svg")
	.attr("width", hGDim.w + hGDim.l + hGDim.r)
	.attr("height", hGDim.h + hGDim.t + hGDim.b).append("g")
	.attr("transform", "translate(" + hGDim.l + "," + hGDim.t + ")");

	// create function for x-axis mapping.
	var x = d3.scale.ordinal().rangeRoundBands([0, hGDim.w], 0.1)
	.domain(fD.map(function(d) { return d[0]; }));

	// Add x-axis to the histogram svg.
	hGsvg.append("g").attr("class", "x axis")
	.attr("transform", "translate(0," + hGDim.h + ")")
	.call(d3.svg.axis().scale(x).orient("bottom"));

	// Create function for y-axis map.
	var y = d3.scale.linear().range([hGDim.h, 0])
	.domain([0, d3.max(fD, function(d) { return d[1]; })]);

	// Create bars for histogram to contain rectangles and freq labels.
	var bars = hGsvg.selectAll(".bar").data(fD).enter()
	.append("g").attr("class", "bar");

	//create the rectangles.
	bars.append("rect")
	.attr("x", function(d) { return x(d[0]); })
	.attr("y", function(d) { return y(d[1]); })
	.attr("width", x.rangeBand())
	.attr("height", function(d) { return hGDim.h - y(d[1]); })
	.attr('fill',barColor);


	//Create the frequency labels above the rectangles.
	bars.append("text").text(function(d){ return d3.format(",")(d[1])})
	.attr("x", function(d) { return x(d[0])+x.rangeBand()/2; })
	.attr("y", function(d) { return y(d[1])-5; })
	.attr("text-anchor", "middle");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	bars.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.style("text-anchor", "end")
	.text("Average Delay in minutes")
	.style("font-size", "8px")
	// .style("font-family","sans-serif")
	// .style("font-weight", "normal")
	.style("opacity",0.4);



	// create function to update the bars. This will be used by pie-chart.
	hG.update = function(nD, color){
	// update the domain of the y-axis map to reflect change in frequencies.
	y.domain([0, d3.max(nD, function(d) { return d[1]; })]);

	// Attach the new data to the bars.
	var bars = hGsvg.selectAll(".bar").data(nD);

	// transition the height and color of rectangles.
	bars.select("rect").transition().duration(500)
	.attr("y", function(d) {return y(d[1]); })
	.attr("height", function(d) { return hGDim.h - y(d[1]); })
	.attr("fill", color);

	// transition the frequency labels location and change value.
	bars.select("text").transition().duration(500)
	.text(function(d){ return d3.format(",")(d[1])})
	.attr("y", function(d) {return y(d[1])-5; });
	}
	return hG;
	}



	// calculate total frequency by segment for all state.
	var tF = ['Normal','Cancelled','Diverted'].map(function(d){
	return {type:d, freq: d3.sum(fData.map(function(t){ return t.freq[d];}))};
	});

	// calculate total frequency by state for all segment.
	var sF = fData.map(function(d){return [d.State,d.total];});

	var hG = histoGram(sF) // create the histogram.

	}



	var freqData = [
	{State:'Carrier Delay',freq:{Normal:0, Cancelled:0, Diverted:0}}
	,{State:'Weather Delay',freq:{Normal:0, Cancelled:0, Diverted:0}}
	,{State:'Security Delay',freq:{Normal:0, Cancelled:0, Diverted:0}}
	,{State:'National Air System Delay',freq:{Normal:0, Cancelled:0, Diverted:0}}
	,{State:'Late Aircraft Delay',freq:{Normal:0, Cancelled:0, Diverted:0}}
	]



	dashboard('#dashboard',freqData);

	// function to update bar chart data
	function updateBarChart(d, i) {

	fD = [
	{State:'Carrier Delay',freq:{Total:Math.round(carrier_delay[d.iata])}},
	{State:'Weather Delay',freq:{Total:Math.round(weather_delay[d.iata])}},
	{State:'Security Delay',freq:{Total:Math.round(sec_delay[d.iata])}},
	{State:'National Air System Delay',freq:{Total:Math.round(nas_delay[d.iata])}},
	{State:'Late Aircraft Delay',freq:{Total:Math.round(late_aircraft_delay[d.iata])}}
	];

	// These constants and scales could go elsewhere
	var barColor = 'steelblue';
	var hG={}, hGDim = {t: 60, r: 0, b: 30, l: 0};
	hGDim.w = 500 - hGDim.l - hGDim.r;
	hGDim.h = 200 - hGDim.t - hGDim.b;

	var x = d3.scale.ordinal().rangeRoundBands([0, hGDim.w], 0.1)
	.domain(fD.map(function(d) { return d.State; } ));

	var y = d3.scale.linear().range([hGDim.h, 0])
	.domain([0, d3.max(fD, function(d) { return d.freq.Total; })]);


	// Update Exit and Enter selections
	var bars = d3.select("div#dashboard")
	.selectAll("g.bar")
	.data(fD);

	bars.exit().remove();

	bars.enter()
	.append("rect")
	.attr("class", "bar")
	.append("text")
	.attr("text-anchor", "middle");

	// Update the rectangles.
	bars.transition().duration(250)
	.select("rect")
	.attr("x", function(d) { return x(d.State); })
	.attr("y", function(d) { return y(d.freq.Total); })
	.attr("width", x.rangeBand())
	.attr("height", function(d) { return hGDim.h - y(d.freq.Total); })
	.attr('fill', barColor);

	// Update the text labels
	bars.transition().duration(250)
	.select("text")
	.text(function(d){ return d3.format(",")(d.freq.Total); })
	.attr("x", function(d) { return x(d.State) + x.rangeBand()/2; })
	.attr("y", function(d) { return y(d.freq.Total)-5; })
	.attr("text-anchor", "middle");
	}



	});
	});


	</script>


	</body>
	</html>