Untitled

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


  <style>
    circle.dimple-series-0{
      fill : red;
    }
    h1{
      text-align: center;
    }
  </style>

    <script type="text/javascript">
      function draw(error, data) {

        year_flights = data[0]

        cancelled_flights = data[1]

        month_flights = data[2]

        day_months_flights = data[3]

        console.log("cancelled_flights")
        console.log(cancelled_flights)
        console.log(cancelled_flights['total'])

      /*
        D3.js setup code
      */

          "use strict";
          var margin = 75,
              width = 1400 - margin,
              height = 600 - margin;

          /*debugger;*/

          var svg = d3.select("#chart-01")
            .append("svg")
              .attr("width", "100%")
              .attr("height", "400px")
            .append('g')
                .attr('class','chart');

          var svg2 = d3.select("#chart-02")
            .append("svg")
              .attr("width", "100%")
              .attr("height", "400px")
            .append('g')
                .attr('class','chart');

          var svg3 = d3.select("#chart-03")
            .append("svg")
              .attr("width", "100%")
              .attr("height", "400px")
            .append('g')
                .attr('class','chart');

          var svg4 = d3.select("#chart-04")
            .append("svg")
              .attr("width", "100%")
              .attr("height", "400px")
            .append('g')
                .attr('class','chart');

          var svg5 = d3.select("#chart-05")
            .append("svg")
              .attr("width", "100%")
              .attr("height", "400px")
            .append('g')
                .attr('class','chart');

      /*
        Dimple.js Chart construction code
      */


          var myChart = new dimple.chart(svg, year_flights);
          myChart.setBounds(100, 70, 650, 250)
          var x = myChart.addCategoryAxis("x", "year");
          x.addOrderRule("Date");
          myChart.addColorAxis("c", "yellow");
          myChart.addMeasureAxis("y", "total");
          myChart.addSeries(null, dimple.plot.bar);
          myChart.draw();


          var myChart2 = new dimple.chart(svg2, cancelled_flights);
          myChart2.setBounds(20, 60, 360, 260)
          myChart2.addMeasureAxis("p", "percent");
          myChart2.addSeries("cancelled", dimple.plot.pie);
          myChart2.addLegend(500, 20, 90, 300, "right");
          myChart2.draw();


          var myChart3 = new dimple.chart(svg3, day_months_flights);
          var x = myChart3.addTimeAxis("x", "day_of_month");
          myChart3.addMeasureAxis("y", "total");
          x.dateParseFormat = "%d";
          x.tickFormat = "%d";
          myChart.addColorAxis("c", "orange");
          myChart.addSeries(null, dimple.plot.bar);
          /*myChart.addSeries(null, dimple.plot.line);*/
          /*myChart.addSeries('stage', dimple.plot.line);*/
          myChart3.draw();


          var myChart4 = new dimple.chart(svg4, month_flights);
          var x = myChart4.addTimeAxis("x", "month");
          myChart4.addMeasureAxis("y", "total");
          x.dateParseFormat = "%m";
          x.tickFormat = "%m";
          //x.timeInterval = 4;
          myChart4.addSeries(null, dimple.plot.scatter);
          myChart4.addSeries(null, dimple.plot.line);
          /*myChart.addSeries(null, dimple.plot.line);*/
          /*myChart.addSeries('stage', dimple.plot.line);*/
          myChart4.draw();


          var myChart5 = new dimple.chart(svg5, month_flights);
          var x = myChart5.addTimeAxis("x", "month");
          myChart5.addMeasureAxis("y", "total");
          x.dateParseFormat = "%m";
          x.tickFormat = "%m";
          //x.timeInterval = 4;
          myChart5.addSeries(null, dimple.plot.scatter);
          myChart5.addSeries(null, dimple.plot.line);
          /*myChart.addSeries(null, dimple.plot.line);*/
          /*myChart.addSeries('stage', dimple.plot.line);*/
          myChart5.draw();
        };
      </script>

  <title>Dashboard Starter UI, by Keen IO</title>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />

  <!-- Demo Dependencies -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />


  <!-- Dashboard -->
<link href="css/vizProject.css" rel="stylesheet" type="text/css" />

</head>
<body class="vizProject-dashboard" style="padding-top: 80px;">

  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="./">
          <span class="glyphicon glyphicon glyphicon-barcode"></span>
        </a>
        <a class="navbar-brand" href="./">Data Vizualization Project</a>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row">

      <div class="col-sm-8">
        <div id="chart-01" class="vizProject-dataviz">
          <div class="vizProject-dataviz-title">Number of flights per year (Million)</div>
        </div>
        <br>
      </div>

      <div class="col-sm-4" >
        <div id="chart-02" class="vizProject-dataviz">
          <div class="vizProject-dataviz-title">Number of flights per month (Million)</div>
        </div>
        <br>
      </div>

    </div>


    <div class="row">

      <div class="col-sm-4">
        <div id="chart-03" class="vizProject-dataviz">
          <div class="vizProject-dataviz-title">Grafico 3</div>
        </div>
        <br>
      </div>

      <div class="col-sm-4">
        <div id="chart-04" class="vizProject-dataviz">
          <div class="vizProject-dataviz-title">Grafico 4</div>
        </div>
        <br>
      </div>

      <div class="col-sm-4" >
        <div id="chart-05" class="vizProject-dataviz">
          <div class="vizProject-dataviz-title">Grafico 5</div>
        </div>
        <br>
      </div>

    </div>
    <hr>
    <p class="small text-muted">Built by <a href="http://linkedin.com/in/victor-andres-guijarro">Andres Guijarro</a></p>
  </div>

  <!-- Project Analytics -->
  <script type="text/javascript">
  /*
    Use D3 (not dimple.js) to load the TSV file
    and pass the contents of it to the draw function
    */
 // d3.json("/data/flights.json", draw);

   queue()
    .defer(d3.json, "/data/year_flights.json")
    .defer(d3.json, "/data/cancelled.json")
    .defer(d3.json, "/data/month_flights.json")
    .defer(d3.json, "/data/day_months_flights.json")
    .awaitAll(draw);

  </script>
</body>
</html>