Student Census (work in progress)

forked from saraquigley's block: Student Census (work in progress)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Student Census</title>

</head>
<style>

/* testing out d3 tooltip */
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 8px;
    }

/* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }

/* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }

body {
        font-size: 16px;
        line-height: 20px;
        color: #525252;

}

h3 {
        font-family: "Helvetica Neue";
    }

#count-reset-row {
    width: 100%;
   }

#ethnicity-chart {
        font-family: 'Lato', futura, georgia;
    }

#entry-status-chart {
        font-family: 'Lato', futura, georgia;
    }

#grad-status-chart {
        width: 250px;
        font-family: 'Lato', futura, georgia;
    }

#gender-chart {
        width: 250px;
        font-family: 'Lato', futura, georgia;
    }

#year-chart {
        width: 500px;
        font-family: 'Lato', futura, georgia;
    }

#series-chart {
        width: 500px;
        font-family: 'Lato', futura, georgia;
    }

#data-count-top {
        width: 100%;
    }

.navbar-text-q {
        font: 400 24px "Helvetica Neue";
        vertical-align: middle;
    }

#data-table {
      padding-top: 100px;
    }

#data-count-bottom {
      padding-top: 30px;
    }

#census-container {
        margin-top: 46px;
        max-width: 1100px;
    }

span.filter {
        font-size: 14px;
        color: #cc4c02;
        font-weight: 500;
        }

span.filter-count {
        color: #428BCA;
        font-weight: bold;
        width: 20px;
        font-size: 18px;
    }

span.total-count {
        color: #525252;
        font-weight: bold;
        width: 20px;
    }

span.reset {
        font-size: 12px;
        color: #cc4c02;
    }

span.company-desc {
        color: #525252;
        font-size: 16px;
        font-weight: normal;
    }

span.chart-footnotes {
        font: 200 14px "Helvetica Neue";
        stroke: #969696;
    }

span.exit-desc {
        background-color: yellow;
    }

#reset-all {
        color: #CC4C02;
    }

tr.header {
        
        color: #696969;
    }

tr {
        font: 100 14px 'Lato';
        color: #969696;
    }
</style>
<body>
   
      <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
        Current Census (Work in Progress)
         <span class="navbar-text-q">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#969696"> </span><span style="color:#969696"></span><span style="color:#969696"></span></span> 
            <span class="btn-group"> 
              <button type="button" class="btn btn-default" data-toggle="modal" href="#myModal">
                About</span>
              </button>
            </span>   
        </div>
      </div>
    </div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">About this graph</h4>
            </div>
            <div class="modal-body">
              <h4 class="modal-title">The technology</h4>
              <p>These interactive graphs were made using an excellent javascript charting library called <a target="_blank" href="https://nickqizhu.github.io/dc.js/">dc.js</a>, which was built to work natively with <a target="_blank" href="https://square.github.com/crossfilter/">crossfilter</a> and leverages the super awesome <a target="_blank" href="https://d3js.org">d3.js</a>.
              <p>Another dc.js resource is this <a target="_blank" href="https://dc-js.github.io/dc.js/docs/stock.html">annotated source</a> which steps through the dc.js Nasdaq 100 Index.
              <hr>
              <p>- Sara
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>

<div id="data-count-top" class="row">
                <span class="filter-count"></span> selected out of <span class="total-count"></span> records |&nbsp;
                <span id="reset-all">
                    <a href="javascript:dc.filterAll();dc.redrawAll();">Reset ALL Filters</a>
                </span> 
                 <p>
            </div>   
       
       <div class="row">
            <div id="ethnicity-chart">
                <strong>Ethnicity</strong>
                <a class="reset" href="javascript:ethnicityChart.filterAll();dc.redrawAll();" style="display: none;"> | reset</a><br>
                <div class="clearfix"></div>
            </div>

<div id="series-chart">
                    <strong>Headcount by Ethnicity</strong><span class="chart-footnotes"></span>
                    <a class="reset" href="javascript:seriesChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
                    <span class="reset" style="display: none;"> | <span class="filter"></span></span>

<div class="clearfix"></div>
            </div>
        </div>
       <div class="row">
            <div id="entry-status-chart">
                <strong>Entry Status</strong>
                <a class="reset" href="javascript:entryStatusChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
                <span class="reset" style="display: none;"> | <span class="filter"></span></span>

<div class="clearfix"></div>
            </div>
            <div id="year-chart">
                    <strong>Total Headcount</strong><span class="chart-footnotes"></span>
                    <a class="reset" href="javascript:yearChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
                    <span class="reset" style="display: none;"> | <span class="filter"></span></span>

<div class="clearfix"></div>
                </div>
                <div id="grad-status-chart">
                    <strong>Level</strong>
                    <a class="reset" href="javascript:gradStatusChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
                    <div class="clearfix"></div>
                </div>
              <div id="gender-chart">
                  <strong>Gender</strong>
                  <a class="reset" href="javascript:undergradChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

<div id="data-count-bottom" class="row">
                <span class="filter-count"></span> selected out of <span class="total-count"></span> records |&nbsp;
            <span id="reset-all">
            <a href="javascript:dc.filterAll();dc.redrawAll();">Reset ALL Filters</a>
            </span>
        </div>
        <div id="data-table">
             <table class="table table-hover dc-data-table">
                <thead>
                <tr class="header">
                    <th>Level</th>
                    <th>Entry Status</th>
                    <th>Gender</th>
                    <th>Race Ethnicity</th>
                    <th>Year</th>
                    <th>Count</th>
                </tr>
                </thead>
            </table>
        </div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.min.js"></script>
<script type="text/javascript" src="dc.js"></script>
<script type="text/javascript" src="d3.tip.min.js"></script>
<script type="text/javascript" src="studentCensus.js"></script>

</body>
</html>

Modified http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.min.js to a secure url

https://code.jquery.com/jquery-1.11.0.min.js

https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.min.js