<commit_before><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>

  <style> 

  /* Change all lines tagged 'dimple-series-0' to gray. 
  This is intended to differentiate color in the second visualization*/
  path.dimple-series-0{
    stroke: gray;
  }
  /*Since the tag also applied to first visualization, 'on-time-flights' also grayed.
  Change this back to original color  */
  path.dimple-on-time-flights{
    stroke: #6b94b0;
  }

  /*Change the Southwest Airlines  to red so it stand out among the rest*/
  path.dimple-southwest-airlines-co-{
    stroke: red;
  }
 h2 {
  text-align: center;
 }


  </style>
    <script type="text/javascript">


      function appendTitle(title){
        return d3.select("body")
                .append("h2")
                .text(title);
      }

      //Append SVG Element, with predefined size. This will affect both graph.
      function appendSVG(){
              var margin = 75,
              width = 1400 - margin,
              height = 600 - margin;

        return d3.select("body")
                .append("svg")
                  .attr("width", width + margin)
                  .attr("height", height + margin)
                .append('g')
                    .attr('class','chart');
      }

      //Get the baseline chart. This will create time series chart, and its correlated measure axis
      function getBaselineChart(data,x_col,y_col){
            var svg = appendSVG();
            var chart = new dimple.chart(svg, data);
            var x = chart.addTimeAxis("x", x_col, "%m", "%b");
            var y =  chart.addMeasureAxis("y", y_col);
            

            return [chart,x,y];
          }


      function drawFlight(data) {
      
          "use strict";
          appendTitle("Total US Flight Operations 2015");
          
          var baselines = getBaselineChart(data,"month","on_time_flights");
          var chart = baselines[0];
          var x = baselines[1];
          var y = baselines[2];
          y.title = "Number of Flight Operations";

          var otf_ser = chart.addSeries("On Time Flights", dimple.plot.line);
          otf_ser.lineMarkers = true;

          function addFlightMeasure(col, label){
            var y_add = chart.addMeasureAxis(y, col);
            var ser = chart.addSeries(label, dimple.plot.line, [x,y_add]);
            ser.lineMarkers = true;
          }

          // Add additional causes that makes number  of on time flights decreased.
          addFlightMeasure("arr_cancelled", "Cancelled Flights");
          addFlightMeasure("arr_del15", "Delayed(>15min) Flights");
          addFlightMeasure("arr_diverted", "Diverted Flights");
          var legend = chart.addLegend("10%,20px",10,"left");

          chart.draw()

        };


      function drawCarrierDelay(data){

        "use strict";
        appendTitle("Delay Flights Based on Carrier");
        var baselines = getBaselineChart(data,"month","arr_delay");
        var chart = baselines[0];
        var x = baselines[1];
        var y = baselines[2];
        y.title = "Delay in Minutes";
        var carr_ser = chart.addSeries("carrier_name",dimple.plot.line);
        carr_ser.lineMarkers = true;

        //Manually add legend (text and red color) just for Southwest Airlines

        chart.svg
        .append("text")
        .text("Southwest Airlines")
        .attr("class","legend-southwest")
        .attr("x",180)
        .attr("y", 20)
        .attr("width","left")
        .attr("height",9)
        .style("opacity",1)
        .style("font-family","sant-serif")
        .style("font-size","15px");

        chart.svg
        .append("rect")
        .attr("height",12)
        .attr("width", 18)
        .attr("x", 160)
        .attr("y", 10)
        .style("fill","red")
        .style("opacity",0.8)
        .style("shape-rendering","crispEdges");


        chart.draw();
        

      }
      </script>
  </head>
<body>
  <script type="text/javascript">
  /*
    Use D3 (not dimple.js) to load the TSV file
    and pass the contents of it to the draw function
    */
          //The visualization will consist on two part. 
          //Number of flights and total delayed minutes across carrier.<commit_msg>Feedback 1 Visualization<commit_after><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>

  <style> 

  /* Change all lines tagged 'dimple-series-0' to gray. 
  This is intended to differentiate color in the second visualization*/
  path.dimple-series-0{
    stroke: gray;
  }
  /*Since the tag also applied to first visualization, 'on-time-flights' also grayed.
  Change this back to original color  */
  path.dimple-on-time-flights{
    stroke: #6b94b0;
  }

  /*Change the Southwest Airlines  to red so it stand out among the rest*/
  path.dimple-southwest-airlines-co-{
    stroke: red;
  }
 h2 {
  text-align: center;
 }


  </style>
    <script type="text/javascript">


      function appendTitle(title){
        return d3.select("body")
                .append("h2")
                .text(title);
      }

      //Append SVG Element, with predefined size. This will affect both graph.
      function appendSVG(){
              var margin = 75,
              width = 1400 - margin,
              height = 600 - margin;

        return d3.select("body")
                .append("svg")
                  .attr("width", width + margin)
                  .attr("height", height + margin)
                .append('g')
                    .attr('class','chart');
      }

      //Get the baseline chart. This will create time series chart, and its correlated measure axis
      function getBaselineChart(data,x_col,y_col){
            var svg = appendSVG();
            var chart = new dimple.chart(svg, data);
            var x = chart.addTimeAxis("x", x_col, "%m", "%b");
            var y =  chart.addMeasureAxis("y", y_col);
            

            return [chart,x,y];
          }


      function drawFlight(data) {
      
          "use strict";
          appendTitle("Total US Flight Operations 2015");
          
          var baselines = getBaselineChart(data,"month","on_time_flights");
          var chart = baselines[0];
          var x = baselines[1];
          var y = baselines[2];
          y.title = "Number of Flight Operations";

          var otf_ser = chart.addSeries("On Time Flights", dimple.plot.line);
          otf_ser.lineMarkers = true;

          function addFlightMeasure(col, label){
            var y_add = chart.addMeasureAxis(y, col);
            var ser = chart.addSeries(label, dimple.plot.line, [x,y_add]);
            ser.lineMarkers = true;
          }

          // Add additional causes that makes number  of on time flights decreased.
          addFlightMeasure("arr_cancelled", "Cancelled Flights");
          addFlightMeasure("arr_del15", "Delayed(>15min) Flights");
          addFlightMeasure("arr_diverted", "Diverted Flights");
          var legend = chart.addLegend("10%,20px",10,"left");

          chart.draw()

        };


      function drawCarrierDelay(data){

        "use strict";
        appendTitle("Delay Flights Based on Carrier");
        var baselines = getBaselineChart(data,"month","arr_delay");
        var chart = baselines[0];
        var x = baselines[1];
        var y = baselines[2];
        y.title = "Delay in Minutes";
        var carr_ser = chart.addSeries("carrier_name",dimple.plot.line);
        carr_ser.lineMarkers = true;

        //Manually add legend (text and red color) just for Southwest Airlines

        chart.svg
        .append("text")
        .text("Southwest Airlines")
        .attr("class","legend-southwest")
        .attr("x",180)
        .attr("y", 20)
        .attr("width","left")
        .attr("height",9)
        .style("opacity",1)
        .style("font-family","sant-serif")
        .style("font-size","15px");

        chart.svg
        .append("rect")
        .attr("height",12)
        .attr("width", 18)
        .attr("x", 160)
        .attr("y", 10)
        .style("fill","red")
        .style("stroke","rgb(107, 148, 176)")
        .style("opacity",0.8)
        .style("shape-rendering","crispEdges");


        chart.draw();
        

      }
      </script>
  </head>
<body>
  <script type="text/javascript">
  /*
    Use D3 (not dimple.js) to load the TSV file
    and pass the contents of it to the draw function
    */
          //The visualization will consist on two part. 
          //Number of flights and total delayed minutes across carrier.
{'fraction_non_alphanumeric': 0.13334860808798257, 'fraction_numerical': 0.016496735021193722, 'mean_word_length': 2.0113832355984824, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5768691', 'n_tokens_mistral': 2753, 'n_tokens_neox': 2555, 'n_words': 660}