D3 Examples - dc.js test

xxxxxxxxxx
 
<!-- Bootstrap & JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.12/dc.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
​
​
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.12/dc.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
​
​
<!-- ##################################################################### -->
<h3>IFR Flights</h3>
<div class="container">
  <div class="row">
    <div id="ifr-chart" class="dc-chart">
      <strong>Average Daily IFR Flights</strong>
      <div class="loading">Loading...</div>
      <a class="reset" href="javascript:dc.filterAll();dc.redrawAll();"
         style="display: none;">reset</a>
      <div class="clearfix"></div>
    </div>
  </div>
  <div class="clearfix"></div>
</div>
​
<!-- ##################################################################### -->
<h3>Airport ATFM Arrival Delay</h3>
<div class="container">
  <p>Some questions to consider: How do delay patterns differ between <a href="javascript:seasonChart.filterAll('Airport ATFMArrival Delay');seasonChart.filter('Summer');dc.redrawAll('Airport ATFMArrival Delay')">summer</a> and <a href="javascript:seasonChart.filterAll('Airport ATFMArrival Delay');seasonChart.filter('Winter');dc.redrawAll('Airport ATFMArrival Delay')">winter</a>?
  </p>
​
  <div class="row">
    <div id="country-chart" class="dc-chart">
      <strong>Country</strong>
      <div class="loading">Loading...</div>
      <a class="reset" href="javascript:dc.filterAll('Airport ATFMArrival Delay');dc.redrawAll('Airport ATFMArrival Delay');"
         style="display: none;">reset</a>
      <div class="clearfix"></div>
    </div>
​
    <div id="season-chart" class="dc-chart">
      <strong>Season</strong>
      <div class="loading">Loading...</div>
      <a class="reset" href="javascript:dc.filterAll('Airport ATFMArrival Delay');dc.redrawAll('Airport ATFMArrival Delay');"
         style="display: none;">reset</a>
      <div class="clearfix"></div>
    </div>
​
    <div id="delay-chart" class="dc-chart">
      <strong>Delay</strong>
      <div class="loading">Loading...</div>
      <div class="clearfix"></div>
    </div>
  </div>
  <div class="clearfix"></div>
</div>
​
​
<!-- LOAD IT HERE to have global references, i.e. div's have to be defined before the .js is loaded -->
<!-- local files -->
<link rel="stylesheet" type="text/css" href="dashboard.css" />
<script type="text/javascript" src="colorbrewer.js"></script>
<script type="text/javascript" src="dashboard.js"></script>
​
  <div class="container">
    <p class="muted credit" style="font-size: x-small; float: right">
      Libraries:
        <a href="https://d3js.org">D3.js</a> <span id="d3js-version"></span>.
        <a href="https://github.com/mbostock/queue">queue</a> <span id="queue-version"></span>.
        <a href="https://square.github.io/crossfilter/">Crossfilter</a> <span id="crossfilter-version"></span>.
        <a href="https://dc-js.github.io/dc.js/">dc.js</a> <span id="dcjs-version"></span>.
        <a href="https://momentjs.com/">Moment.js</a> <span id="momentjs-version"></span>.
        <a href="https://underscorejs.org/">Underscore</a> <span id="underscore-version"></span>.
        <!-- <a href="https://select2.github.io/">Select2</a> <span id="select2-version"></span>.
        <a href="https://jquery.com/">jQuery</a> <span id="jquery-version"></span>. -->
    </p>
  </div>
​
    