forked from saraquigley's block: Student Census (work in progress)
xxxxxxxxxx<html lang="en"><head> <title>Student Census</title> <meta charset="UTF-8"> <link href="bootstrapQ.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Lato:200,400' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="dc.css"/></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> <!-- Fixed navbar at the top--> <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"> <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> <!-- Modal Box--> <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">×</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><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --><div class="container" id="census-container"> <div id="data-count-top" class="row"> <span class="filter-count"></span> selected out of <span class="total-count"></span> records | <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 class="clearfix"></div> </div> </div> <div id="data-count-bottom" class="row"> <span class="filter-count"></span> selected out of <span class="total-count"></span> records | <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