Skip to content

Instantly share code, notes, and snippets.

@tonmcg

tonmcg/.block

Last active November 18, 2019 00:53
Show Gist options
  • Save tonmcg/a7f77ff663c9f77a4cda149f2b06ad9f to your computer and use it in GitHub Desktop.
Save tonmcg/a7f77ff663c9f77a4cda149f2b06ad9f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tonmcg revised this gist Sep 16, 2016. 1 changed file with 1 addition and 4 deletions.
    5 changes: 1 addition & 4 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1 @@
    license: mit
    border: yes
    scrolling: yes
    height: NaN
    license: mit
  2. tonmcg revised this gist Sep 16, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    license: mit
    border: yes
    scrolling: yes
    height: NaN
  3. tonmcg revised this gist Sep 16, 2016. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    license: mit
    border: yes
    scrolling: yes
  4. tonmcg revised this gist Sep 8, 2016. 1 changed file with 7 additions and 6 deletions.
    13 changes: 7 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -229,8 +229,8 @@ <h5 class="text-uppercase">Data as of</h5>
    </div>
    <div class="col-sm-3">
    <div class="tool radius">
    <h5 class="text-uppercase">Total Amount ($)</h5>
    <div class="dc-chart" id="net-commitments"></div>
    <h5 class="text-uppercase">Total Donations ($)</h5>
    <div class="dc-chart" id="net-donations"></div>
    <!-- #data-count -->
    </div>
    </div>
    @@ -262,7 +262,7 @@ <h5 class="text-uppercase">Selected Records</h5>
    <div class="chart-stage">
    <div id="chart-bubble-amount" class="dc-chart">
    <div>selected: <span class="filter"></span>
    <a class="reset" href="javascript:industryChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
    <a class="reset" href="javascript:programBubble.filterAll();dc.redrawAll();" style="display:none;">reset</a>
    </div>
    </div>
    <!-- #chart-bubble-amount -->
    @@ -311,7 +311,7 @@ <h5 class="text-uppercase">Selected Records</h5>
    <div class="chart-stage">
    <div id="chart-bar-resources" class="dc-chart">
    <div>selected: <span class="filter"></span>
    <a class="reset" href="javascript:donorBarChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
    <a class="reset" href="javascript:resourcesBarChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
    </div>
    </div>
    <!-- #chart-bar-resources -->
    @@ -330,7 +330,7 @@ <h5 class="text-uppercase">Selected Records</h5>
    <div class="chart-stage">
    <div id="chart-bar-poverty" class="dc-chart">
    <div>selected: <span class="filter"></span>
    <a class="reset" href="javascript:commitBarChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
    <a class="reset" href="javascript:povBarChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
    </div>
    </div>
    <!-- #chart-bar-poverty -->
    @@ -380,7 +380,7 @@ <h5 class="text-uppercase">Selected Records</h5>
    var fiscalYear = 2016; // default fiscal year in the selection drop down

    // dc.js chart types
    var netCommitments = dc.numberDisplay("#net-commitments"),
    var netCommitments = dc.numberDisplay("#net-donations"),
    resourcesBarChart = dc.barChart("#chart-bar-resources"),
    programBubble = dc.bubbleChart("#chart-bubble-amount"),
    statusRingChart = dc.pieChart('#chart-ring-status'),
    @@ -675,6 +675,7 @@ <h5 class="text-uppercase">Selected Records</h5>
    }
    },
    ])
    .size(1500)
    .on('renderlet', function() {
    dataTable.select('tr.dc-table-group').remove(); // remove unneccesary row dc.js adds beneath the header)
    });
  5. tonmcg revised this gist Sep 8, 2016. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -201,8 +201,7 @@
    </div>
    <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
    <li><a href="https://keen.io">Home</a></li>
    <li><a href="https://data.donorschoose.org/open-data/overview/">Data</a></li>
    <li><a href="https://www.donorschoose.org/">Home</a></li>
    <li><a href="https://data.donorschoose.org/open-data/overview/">Source</a></li>
    </ul>
    </div>
  6. tonmcg revised this gist Sep 8, 2016. 2 changed files with 100 additions and 104 deletions.
    107 changes: 100 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,13 +7,10 @@
    <title>Donors Choose Dashboard</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" type="text/css" href="SiteAssets/bootstrap/css/bootstrap.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- DC Core CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.css" />

    <!-- Keen CSS -->
    <link rel="stylesheet" type="text/css" href="SiteAssets/css/keen-dashboards.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.32/dc.min.css" />

    <style type="text/css">

    @@ -70,6 +67,102 @@
    font-size: 24px;
    }

    /*
    * Full-page application style
    */

    body.application,
    .keen-dashboard {
    background: #f2f2f2;
    padding: 20px 20px 0px;
    }

    body.application > .container-fluid,
    .keen-dashboard > .container-fluid {
    margin: 0px 0px 32px;
    margin: 0px 0px 2rem;
    padding-left: 0px;
    padding-right: 0px;
    }

    body.application div[class^="col-"],
    .keen-dashboard div[class^="col-"] {
    padding-left: 5px;
    padding-right: 5px;
    }

    body.application div[class^="col-"] div[class^="col-"],
    .keen-dashboard div[class^="col-"] div[class^="col-"] {
    padding-left: 15px;
    padding-right: 15px;
    }

    body.application hr,
    .keen-dashboard hr {
    border-color: #d7d7d7;
    margin: 10px 0px;
    }

    body.application .navbar-inverse,
    .keen-dashboard .navbar-inverse {
    /*background-color: #3d4a57;*/
    border-color: #333;
    }

    body.application .navbar-inverse .navbar-nav > li > a,
    body.application .navbar .navbar-brand,
    .keen-dashboard .navbar-inverse .navbar-nav > li > a,
    .keen-dashboard .navbar .navbar-brand {
    color: #fbfbfb;
    text-decoration: none;
    }

    body.application .main-nav > li > a:hover,
    .keen-dashboard .main-nav > li > a:hover {
    border-bottom: 2px solid transparent;
    -webkit-transition: border 300ms ease;
    -o-transition: border 300ms ease;
    transition: border 300ms ease;
    border-bottom-color: white;
    }

    body.application .return-link,
    body.application .return-link:focus,
    body.application .return-link:hover,
    .keen-dashboard .return-link,
    .keen-dashboard .return-link:focus,
    .keen-dashboard .return-link:hover {
    text-decoration: none;
    }


    .chart-wrapper {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    margin-bottom: 10px;
    }
    .chart-wrapper .chart-title {
    border-bottom: 1px solid #d7d7d7;
    color: #666;
    font-size: 14px;
    font-weight: 200;
    padding: 7px 10px 4px;
    }

    .chart-wrapper .chart-stage {
    overflow: hidden;
    padding: 5px 10px;
    position: relative;
    }

    .chart-wrapper .chart-notes {
    background: #fbfbfb;
    border-top: 1px solid #e2e2e2;
    color: #808080;
    font-size: 12px;
    padding: 8px 10px 5px;
    }
    .navbar-inverse {
    background-color: #3182bd;
    }
    @@ -278,7 +371,7 @@ <h5 class="text-uppercase">Selected Records</h5>
    <!-- Crossfilter JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
    <!-- DC.js Core JavaScript -->
    <script type="text/javascript" src="SiteAssets/dc/dc.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.32/dc.min.js"></script>
    <!-- Moment Core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
    <!-- Custom JavaScript -->
    @@ -325,7 +418,7 @@ <h5 class="text-uppercase">Selected Records</h5>
    // if not, the endpoint will point to a json file
    function getData() {

    var url = "SiteAssets/data/donorsChoose.csv";
    var url = "https://gist.github.com/tonmcg/a7f77ff663c9f77a4cda149f2b06ad9f/raw/11c78b4d6894c6d9d1f3f29552197c372780211d/donorsChoose.csv";
    var endpoint = d3.csv(url);

    // Get the data
    97 changes: 0 additions & 97 deletions keen-dashboard.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -1,97 +0,0 @@

    /*
    * Full-page application style
    */

    body.application,
    .keen-dashboard {
    background: #f2f2f2;
    padding: 20px 20px 0px;
    }

    body.application > .container-fluid,
    .keen-dashboard > .container-fluid {
    margin: 0px 0px 32px;
    margin: 0px 0px 2rem;
    padding-left: 0px;
    padding-right: 0px;
    }

    body.application div[class^="col-"],
    .keen-dashboard div[class^="col-"] {
    padding-left: 5px;
    padding-right: 5px;
    }

    body.application div[class^="col-"] div[class^="col-"],
    .keen-dashboard div[class^="col-"] div[class^="col-"] {
    padding-left: 15px;
    padding-right: 15px;
    }

    body.application hr,
    .keen-dashboard hr {
    border-color: #d7d7d7;
    margin: 10px 0px;
    }

    body.application .navbar-inverse,
    .keen-dashboard .navbar-inverse {
    /*background-color: #3d4a57;*/
    border-color: #333;
    }

    body.application .navbar-inverse .navbar-nav > li > a,
    body.application .navbar .navbar-brand,
    .keen-dashboard .navbar-inverse .navbar-nav > li > a,
    .keen-dashboard .navbar .navbar-brand {
    color: #fbfbfb;
    text-decoration: none;
    }

    body.application .main-nav > li > a:hover,
    .keen-dashboard .main-nav > li > a:hover {
    border-bottom: 2px solid transparent;
    -webkit-transition: border 300ms ease;
    -o-transition: border 300ms ease;
    transition: border 300ms ease;
    border-bottom-color: white;
    }

    body.application .return-link,
    body.application .return-link:focus,
    body.application .return-link:hover,
    .keen-dashboard .return-link,
    .keen-dashboard .return-link:focus,
    .keen-dashboard .return-link:hover {
    text-decoration: none;
    }


    .chart-wrapper {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    margin-bottom: 10px;
    }
    .chart-wrapper .chart-title {
    border-bottom: 1px solid #d7d7d7;
    color: #666;
    font-size: 14px;
    font-weight: 200;
    padding: 7px 10px 4px;
    }

    .chart-wrapper .chart-stage {
    overflow: hidden;
    padding: 5px 10px;
    position: relative;
    }

    .chart-wrapper .chart-notes {
    background: #fbfbfb;
    border-top: 1px solid #e2e2e2;
    color: #808080;
    font-size: 12px;
    padding: 8px 10px 5px;
    }
  7. tonmcg revised this gist Sep 8, 2016. 1 changed file with 7 additions and 8 deletions.
    15 changes: 7 additions & 8 deletions keen-dashboard.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -6,16 +6,15 @@
    body.application,
    .keen-dashboard {
    background: #f2f2f2;
    font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 60px 20px 0;
    padding: 20px 20px 0px;
    }

    body.application > .container-fluid,
    .keen-dashboard > .container-fluid {
    margin: 0 0 32px;
    margin: 0 0 2rem;
    padding-left: 0;
    padding-right: 0;
    margin: 0px 0px 32px;
    margin: 0px 0px 2rem;
    padding-left: 0px;
    padding-right: 0px;
    }

    body.application div[class^="col-"],
    @@ -33,12 +32,12 @@ body.application div[class^="col-"] div[class^="col-"],
    body.application hr,
    .keen-dashboard hr {
    border-color: #d7d7d7;
    margin: 10px 0;
    margin: 10px 0px;
    }

    body.application .navbar-inverse,
    .keen-dashboard .navbar-inverse {
    background-color: #3d4a57;
    /*background-color: #3d4a57;*/
    border-color: #333;
    }

  8. tonmcg revised this gist Sep 8, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions keen-dashboard.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -14,6 +14,7 @@ body.application > .container-fluid,
    .keen-dashboard > .container-fluid {
    margin: 0 0 32px;
    margin: 0 0 2rem;
    padding-left: 0;
    padding-right: 0;
    }

  9. tonmcg revised this gist Sep 8, 2016. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion keen-dashboard.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,6 @@ body.application > .container-fluid,
    .keen-dashboard > .container-fluid {
    margin: 0 0 32px;
    margin: 0 0 2rem;
    padding-left: 0;
    padding-right: 0;
    }

  10. tonmcg revised this gist Sep 8, 2016. 1 changed file with 98 additions and 0 deletions.
    98 changes: 98 additions & 0 deletions keen-dashboard.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,98 @@

    /*
    * Full-page application style
    */

    body.application,
    .keen-dashboard {
    background: #f2f2f2;
    font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 60px 20px 0;
    }

    body.application > .container-fluid,
    .keen-dashboard > .container-fluid {
    margin: 0 0 32px;
    margin: 0 0 2rem;
    padding-left: 0;
    padding-right: 0;
    }

    body.application div[class^="col-"],
    .keen-dashboard div[class^="col-"] {
    padding-left: 5px;
    padding-right: 5px;
    }

    body.application div[class^="col-"] div[class^="col-"],
    .keen-dashboard div[class^="col-"] div[class^="col-"] {
    padding-left: 15px;
    padding-right: 15px;
    }

    body.application hr,
    .keen-dashboard hr {
    border-color: #d7d7d7;
    margin: 10px 0;
    }

    body.application .navbar-inverse,
    .keen-dashboard .navbar-inverse {
    background-color: #3d4a57;
    border-color: #333;
    }

    body.application .navbar-inverse .navbar-nav > li > a,
    body.application .navbar .navbar-brand,
    .keen-dashboard .navbar-inverse .navbar-nav > li > a,
    .keen-dashboard .navbar .navbar-brand {
    color: #fbfbfb;
    text-decoration: none;
    }

    body.application .main-nav > li > a:hover,
    .keen-dashboard .main-nav > li > a:hover {
    border-bottom: 2px solid transparent;
    -webkit-transition: border 300ms ease;
    -o-transition: border 300ms ease;
    transition: border 300ms ease;
    border-bottom-color: white;
    }

    body.application .return-link,
    body.application .return-link:focus,
    body.application .return-link:hover,
    .keen-dashboard .return-link,
    .keen-dashboard .return-link:focus,
    .keen-dashboard .return-link:hover {
    text-decoration: none;
    }


    .chart-wrapper {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    margin-bottom: 10px;
    }
    .chart-wrapper .chart-title {
    border-bottom: 1px solid #d7d7d7;
    color: #666;
    font-size: 14px;
    font-weight: 200;
    padding: 7px 10px 4px;
    }

    .chart-wrapper .chart-stage {
    overflow: hidden;
    padding: 5px 10px;
    position: relative;
    }

    .chart-wrapper .chart-notes {
    background: #fbfbfb;
    border-top: 1px solid #e2e2e2;
    color: #808080;
    font-size: 12px;
    padding: 8px 10px 5px;
    }
  11. tonmcg revised this gist Sep 8, 2016. 1 changed file with 1501 additions and 0 deletions.
    1,501 changes: 1,501 additions & 0 deletions donorsChoose.csv
    View file
    1,501 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
  12. tonmcg created this gist Sep 8, 2016.
    704 changes: 704 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,704 @@
    <!DOCTYPE html>
    <html>

    <head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />

    <title>Donors Choose Dashboard</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" type="text/css" href="SiteAssets/bootstrap/css/bootstrap.min.css">

    <!-- DC Core CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.css" />

    <!-- Keen CSS -->
    <link rel="stylesheet" type="text/css" href="SiteAssets/css/keen-dashboards.css" />

    <style type="text/css">

    .tooltip {
    top: 100px;
    left: 100px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 2px solid #000;
    background: #fff;
    opacity: .9;
    color: black;
    padding: 10px;
    width: 375px;
    font-size: 1.6em;
    line-height: 28pt;
    /*font-weight: lighter;*/
    /*visibility: visible;*/
    }

    table.table {
    display: table;
    width: 100%;
    }

    table.table thead,
    table.table tbody {
    float: left;
    width: 100%;
    }

    table.table tbody {
    overflow: auto;
    height: 350px;
    }

    table.table tr {
    width: 100%;
    display: table;
    text-align: left;
    }

    table.table th,
    table.table td {
    width: 20%;
    }

    .filter-count,
    .total-count,
    .number-display,
    #dateHeader {
    color: #3182bd;
    font-weight: bold;
    font-size: 24px;
    }

    .navbar-inverse {
    background-color: #3182bd;
    }

    .dc-chart .selected path {
    stroke-width: 1;
    }

    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-6,
    .col-sm-8,
    .col-sm-9,
    .col-sm-12 {
    /*border: solid;*/
    }
    </style>
    </head>

    <body class="application">

    <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-chevron-left"></span>
    </a>
    <a class="navbar-brand" href="./">Donors Choose Dashboard</a>
    </div>
    <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
    <li><a href="https://keen.io">Home</a></li>
    <li><a href="https://data.donorschoose.org/open-data/overview/">Data</a></li>
    <li><a href="https://data.donorschoose.org/open-data/overview/">Source</a></li>
    </ul>
    </div>
    </div>
    </div>


    <div class="container-fluid">

    <div class="row" style="padding-top:50px;padding-bottom:10px">
    <div class="col-sm-1">
    <div class="tool radius">
    <h5 class="text-uppercase">Fiscal Year</h5>
    <select class="form-control" id="fiscalYears"></select>
    </div>
    </div>
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
    <div class="tool radius">
    <h5 class="text-uppercase">Data as of</h5>
    <div class="dc-chart">
    <span id="dateHeader"></span>
    </div>
    </div>
    </div>
    <div class="col-sm-3">
    <div class="tool radius">
    <h5 class="text-uppercase">Total Amount ($)</h5>
    <div class="dc-chart" id="net-commitments"></div>
    <!-- #data-count -->
    </div>
    </div>
    <div class="col-sm-3">
    <div class="tool radius">
    <h5 class="text-uppercase">Selected Records</h5>
    <div class="dc-chart" id="data-count">
    <span class="filter-count"></span> selected out of
    <span class="total-count"></span> records
    <span>
    <a href='javascript:dc.filterAll();dc.redrawAll();'><font class="text-uppercase" color="#3182bd">Reset All</font></a>
    </span>
    </div>
    <!-- #data-count -->
    </div>
    </div>
    </div>

    <!-- row and ring charts -->
    <div class="row">
    <!-- amount row chart -->
    <div class="col-sm-9">
    <!-- row chart -->
    <div class="chart-wrapper">
    <div class="chart-title">
    <span>By Program</span>
    </div>
    <!-- /.chart-title -->
    <div class="chart-stage">
    <div id="chart-bubble-amount" class="dc-chart">
    <div>selected: <span class="filter"></span>
    <a class="reset" href="javascript:industryChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
    </div>
    </div>
    <!-- #chart-bubble-amount -->
    </div>
    <!-- /.chart-stage -->
    <div class="chart-notes"></div>
    <!-- /.chart-notes -->
    </div>
    <!-- /.chart-wrapper -->
    </div>

    <!-- status ring chart -->
    <div class="col-sm-3">
    <!-- ring chart -->
    <div class="chart-wrapper">
    <div class="chart-title">
    <span>By Status</span>
    </div>
    <!-- /.chart-title -->
    <div class="chart-stage">
    <div id="chart-ring-status" class="dc-chart">
    <div>selected: <span class="filter"></span>
    <a class="reset" href="javascript:statusRingChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
    </div>
    </div>
    <!-- #chart-ring-status -->
    </div>
    <!-- /.chart-stage -->
    <div class="chart-notes"></div>
    <!-- /.chart-notes -->
    </div>
    <!-- /.chart-wrapper -->
    </div>

    </div>
    <!-- /.row -->

    <!-- bar charts -->
    <div class="row">
    <!-- resources bar chart -->
    <div class="col-sm-6">
    <div class="chart-wrapper">
    <div class="chart-title">
    <span>By Resources Needed</span>
    </div>
    <div class="chart-stage">
    <div id="chart-bar-resources" class="dc-chart">
    <div>selected: <span class="filter"></span>
    <a class="reset" href="javascript:donorBarChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
    </div>
    </div>
    <!-- #chart-bar-resources -->
    </div>
    <div class="chart-notes"></div>

    </div>
    </div>

    <!-- poverty level bar chart -->
    <div class="col-sm-6">
    <div class="chart-wrapper">
    <div class="chart-title">
    <span>By Poverty Level</span>
    </div>
    <div class="chart-stage">
    <div id="chart-bar-poverty" class="dc-chart">
    <div>selected: <span class="filter"></span>
    <a class="reset" href="javascript:commitBarChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
    </div>
    </div>
    <!-- #chart-bar-poverty -->
    </div>
    <div class="chart-notes"></div>

    </div>
    </div>
    </div>
    <!-- /.row -->

    <!-- table data -->
    <div class="row">
    <div class="col-sm-12">
    <div class="chart-wrapper">
    <div class="chart-title">Source Data</div>
    <div class="chart-stage">
    <table class="table table-striped table-hover" id="data-table"></table>
    </div>
    <div class="chart-notes"></div>
    </div>
    </div>
    </div>
    <!-- /.row -->

    </div>
    <!-- /.container-fluid -->

    <!-- jQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- D3 Core JavaScript -->
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <!-- D3 Queue JavaScript -->
    <script type="text/javascript" src="https://d3js.org/d3-queue.v3.min.js" charset="utf-8"></script>
    <!-- Crossfilter JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
    <!-- DC.js Core JavaScript -->
    <script type="text/javascript" src="SiteAssets/dc/dc.js"></script>
    <!-- Moment Core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
    <!-- Custom JavaScript -->
    <script type="text/javascript">
    "use strict";

    var fiscalYear = 2016; // default fiscal year in the selection drop down

    // dc.js chart types
    var netCommitments = dc.numberDisplay("#net-commitments"),
    resourcesBarChart = dc.barChart("#chart-bar-resources"),
    programBubble = dc.bubbleChart("#chart-bubble-amount"),
    statusRingChart = dc.pieChart('#chart-ring-status'),
    povBarChart = dc.barChart("#chart-bar-poverty"),
    dataCount = dc.dataCount('#data-count'),
    dataTable = dc.dataTable('#data-table');

    // dimensions for the charts
    var height = 250,
    width = height * 7/4;

    // tick label and tooltip formats
    var sFormat = d3.format("s"),
    dFormat = d3.format("d"),
    currFormat = d3.format("$,.0f");

    // drop down selection
    var selector = d3.select("#fiscalYears");

    // tooptip
    var tooltip = d3.select("body")
    .append("div")
    .style({
    "position": "absolute",
    "z-index": "10",
    "visibility": "hidden"
    })
    .attr({
    "class": "tooltip introCopy"
    });

    // if this JavaScript source file resides on a SharePoint server
    // the function will return an endpoint Url pointing to a specified SharePoint list
    // if not, the endpoint will point to a json file
    function getData() {

    var url = "SiteAssets/data/donorsChoose.csv";
    var endpoint = d3.csv(url);

    // Get the data
    d3.queue()
    .defer(endpoint.get)
    .await(createViz);

    }

    function createViz(error, data) {

    var dataSet = data;

    // set crossfilter
    var ndx = crossfilter(dataSet);

    // define dimensions
    var fiscalYearDim = ndx.dimension(function(d) { return +d.FiscalYear; }),
    programDim = ndx.dimension(function(d) { return d.Program; }),
    povDim = ndx.dimension(function(d) { return d.poverty_level; }),
    resourceDim = ndx.dimension(function(d) { return d.resource_type; }),
    statusDim = ndx.dimension(function(d) { return d.FundingStatus; }),
    idDim = ndx.dimension(function(d) { return d.ID; });

    // group dimensions
    var all = ndx.groupAll(),
    povApplied = povDim.group().reduceSum(function(d) { if (d.Program == 'Applied Learning') { return d.TotalCommitment; } else { return 0; }}),
    povHealth = povDim.group().reduceSum(function(d) { if (d.Program == 'Health & Sports') { return d.TotalCommitment; } else { return 0; }}),
    povMath = povDim.group().reduceSum(function(d) { if (d.Program == 'Math & Science') { return d.TotalCommitment; } else { return 0; }}),
    povMusic = povDim.group().reduceSum(function(d) { if (d.Program == 'Music & The Arts') { return d.TotalCommitment; } else { return 0; }}),
    povLiteracy = povDim.group().reduceSum(function(d) { if (d.Program == 'Literacy & Language') { return d.TotalCommitment; } else { return 0; }}),
    povCivics = povDim.group().reduceSum(function(d) { if (d.Program == 'History & Civics') { return d.TotalCommitment; } else { return 0; }}),
    povSpecial = povDim.group().reduceSum(function(d) { if (d.Program == 'Special Needs') { return d.TotalCommitment; } else { return 0; }}),
    amountByProgram = programDim.group().reduce(
    function (p, v) {
    p.amount += +v.TotalCommitment;
    p.count += 1;
    return p;
    },
    function (p, v) {
    p.amount -= +v.TotalCommitment;
    p.count -= 1;
    return p;
    },
    function () {
    return {amount: 0, count: 0};
    }),
    resourceApplied = resourceDim.group().reduceSum(function(d) { if (d.Program == 'Applied Learning') { return d.TotalCommitment; } else { return 0; }}),
    resourceHealth = resourceDim.group().reduceSum(function(d) { if (d.Program == 'Health & Sports') { return d.TotalCommitment; } else { return 0; }}),
    resourceMath = resourceDim.group().reduceSum(function(d) { if (d.Program == 'Math & Science') { return d.TotalCommitment; } else { return 0; }}),
    resourceMusic = resourceDim.group().reduceSum(function(d) { if (d.Program == 'Music & The Arts') { return d.TotalCommitment; } else { return 0; }}),
    resourceLiteracy = resourceDim.group().reduceSum(function(d) { if (d.Program == 'Literacy & Language') { return d.TotalCommitment; } else { return 0; }}),
    resourceCivics = resourceDim.group().reduceSum(function(d) { if (d.Program == 'History & Civics') { return d.TotalCommitment; } else { return 0; }}),
    resourceSpecial = resourceDim.group().reduceSum(function(d) { if (d.Program == 'Special Needs') { return d.TotalCommitment; } else { return 0; }}),
    amountByStatus = statusDim.group().reduceSum(function(d) { return d.TotalCommitment; }),
    totalAmount = ndx.groupAll().reduceSum(function(d) { return d.TotalCommitment; });

    var fiscalYears = fiscalYearDim.group().top(Infinity).map(function(d) { return d.key; }).sort(function(a, b) { return a - b; });
    var programs = programDim.group().top(Infinity).map(function(d) { return d.key; });
    var povLevels = povDim.group().top(Infinity).map(function(d) { return d.key; });
    var resources = resourceDim.group().top(Infinity).map(function(d) { return d.key; });

    var r_domain = d3.extent(programDim.group().top(Infinity).map(function(d) { return d.value; }));
    // max = d3.max(programDim.group().top(Infinity).map(function(d) { return d.value; }));

    var resources_domain = d3.extent(resourceDim.group().top(Infinity).map(function(d) { return d.value; }));

    // append option values to fiscal year select input
    selector.selectAll("option")
    .data(fiscalYears)
    .enter()
    .append("option")
    .attr("value", function(d) {
    return d;
    })
    .text(function(d) {
    return d;
    });

    // set default fiscal year
    // define on change event
    selector.property("value", fiscalYear).on("change", function() { fiscalYearDim.filter(this.value); dc.redrawAll(); });

    // charts
    netCommitments
    .formatNumber(dFormat)
    .valueAccessor(function(d){ return d; })
    .group(totalAmount)
    .formatNumber(d3.format(".3s"));

    programBubble
    .width(width * 2.75)
    .height(height * 1.25)
    .dimension(programDim)
    .group(amountByProgram)
    .keyAccessor(function(p) {
    return p.value.amount;
    })
    .valueAccessor(function(p) {
    return p.value.count;
    })
    .radiusValueAccessor(function(p) {
    return p.value.count;
    })
    .x(d3.scale.linear().domain([0, 10000]))
    .r(d3.scale.linear().domain(r_domain))
    .minRadiusWithLabel(15)
    .elasticY(true)
    .yAxisPadding(400)
    .elasticX(true)
    .xAxisPadding(400)
    .margins({
    top: 10,
    right: 50,
    bottom: 50,
    left: 50
    })
    .maxBubbleRelativeSize(0.04)
    .ordinalColors(["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b"])
    .renderHorizontalGridLines(true)
    .renderVerticalGridLines(true)
    .renderLabel(true)
    .renderTitle(false)
    .xAxisLabel("Amount ($)")
    .yAxisLabel("# of Donations")
    .transitionDuration(1000)
    .xAxis().tickFormat(sFormat)
    ;

    statusRingChart
    .width(width)
    .height(height * 1.25)
    .radius(height/2)
    .dimension(statusDim)
    .group(amountByStatus)
    .legend(dc.legend().x(width/2.5).y(height/2).itemHeight(18).gap(6))
    .renderLabel(false)
    .innerRadius(85)
    .transitionDuration(500)
    ;

    console.log(resources_domain)

    resourcesBarChart
    .width(width * 1.80)
    .height(height)
    .dimension(resourceDim)
    .group(resourceApplied, "Applied Learning")
    .stack(resourceHealth, "Health & Sports")
    .stack(resourceCivics, "History & Civics")
    .stack(resourceLiteracy, "Literacy & Language")
    .stack(resourceMath, "Math & Science")
    .stack(resourceMusic, "Music & The Arts")
    .stack(resourceSpecial, "Special Needs")
    .x(d3.scale.ordinal().domain(resources))
    .y(d3.scale.linear().domain(resources_domain))
    .elasticX(false)
    .xUnits(dc.units.ordinal)
    .barPadding(0.15)
    .legend(dc.legend().x(width * 1.8 - 130).y(25).itemHeight(18).gap(6))
    .ordinalColors(["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b"])
    .margins({
    top: 25,
    right: 135,
    bottom: 35,
    left: 50
    })
    .renderLabel(false)
    .renderTitle(false)
    .renderHorizontalGridLines(true)
    .elasticY(true)
    .yAxisLabel("Amount ($)")
    .yAxis().tickFormat(sFormat)
    ;

    resourcesBarChart
    .on("preRedraw", function(chart){

    //Remove old values (if found)
    // chart.selectAll('.barLabel').remove();

    })
    .on('renderlet', function(chart) {
    chart.selectAll('.barLabel').text(function(d) {
    console.log(currFormat(d.y0));
    return currFormat(d.y0);
    });
    })
    ;

    povBarChart
    .width(width * 1.8)
    .height(height)
    .dimension(povDim)
    .group(povApplied, "Applied Learning")
    .stack(povHealth, "Health & Sports")
    .stack(povCivics, "History & Civics")
    .stack(povLiteracy, "Literacy & Language")
    .stack(povMath, "Math & Science")
    .stack(povMusic, "Music & The Arts")
    .stack(povSpecial, "Special Needs")
    .x(d3.scale.ordinal().domain(povLevels))
    .elasticX(false)
    .xUnits(dc.units.ordinal)
    .barPadding(0.15)
    .legend(dc.legend().x(width * 1.8 - 130).y(25).itemHeight(18).gap(6))
    .ordinalColors(["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b"])
    .margins({
    top: 25,
    right: 135,
    bottom: 35,
    left: 50
    })
    .renderLabel(false)
    .renderTitle(false)
    .renderHorizontalGridLines(true)
    .elasticY(true)
    .yAxisLabel("Amount ($)")
    .yAxis().tickFormat(sFormat)
    ;

    dataCount
    .dimension(ndx)
    .group(all);

    dataTable
    .dimension(idDim)
    .group(function(d) {
    return d;
    })
    .columns([{
    label: 'Program',
    format: function(d) {
    return d.Program;
    }
    }, {
    label: 'Funding Status',
    format: function(d) {
    return d.FundingStatus;
    }
    }, {
    label: 'Poverty Level',
    format: function(d) {
    return d.poverty_level;
    }
    }, {
    label: 'Resources Needed',
    format: function(d) {
    return d.resource_type;
    }
    }, {
    label: 'Total Amount',
    format: function(d) {
    return currFormat(d.TotalCommitment);
    }
    },
    ])
    .on('renderlet', function() {
    dataTable.select('tr.dc-table-group').remove(); // remove unneccesary row dc.js adds beneath the header)
    });

    fiscalYearDim.filter(fiscalYear);
    dc.renderAll();

    // Change the date header to reflect the date and time of the data
    d3.select('#dateHeader').text(moment().format('LLLL'));

    // format bar charts' x-axis and rotate labels 45 degrees
    // d3.selectAll('#chart-bar-resources g.x.axis text').attr({"transform":"rotate(45)","y":9,"x":0,"dy":".35em"}).style({"text-anchor":"start","cursor":"pointer"});
    // d3.selectAll('#chart-bar-poverty g.x.axis text').attr({"transform":"rotate(45)","y":9,"x":0,"dy":".35em"}).style({"text-anchor":"start","cursor":"pointer"});

    // // define mouseover and mouseout events
    d3.selectAll("#chart-bar-resources g rect").on("mouseover", showResourceDetail).on("mouseout", hideDetail);
    d3.selectAll("#chart-bar-poverty g rect").on("mouseover", showPovertyDetail).on("mouseout", hideDetail);
    d3.selectAll('#chart-bubble-amount g circle').on("mouseover", showProgramDetail).on("mouseout", hideDetail); // using jQuery Starts With Selector [name^=”value”] also works with D3; http://api.jquery.com/attribute-starts-with-selector/
    d3.selectAll("#chart-ring-status g path").on("mouseover", showRingDetail).on("mouseout", hideDetail);

    // // Show tooltip on hover
    function showRingDetail() {

    // show tooltip with information from the __data__ property of the element
    var d = this.__data__;
    var status = d.data.key;
    var amount = d.data.value;

    var content = "<b>Status: </b>" + status + "<br/>" +
    "<b>Amount: </b>" + currFormat(amount) + "<br/>";

    return tooltip.style({
    "visibility": "visible",
    "top": (event.pageY - 10) + "px",
    "left": (event.pageX - 385) + "px"
    })
    .html(content);
    }

    // // Show tooltip on hover
    function showResourceDetail() {

    // show tooltip with information from the __data__ property of the element
    var d = this.__data__;
    var program = d.layer;
    var amount = d.data.value;
    var resource = d.data.key;

    var content = "<b>Program: </b>" + program + "<br/>" +
    "<b>Resource Needed: </b>" + resource + "<br/>" +
    "<b>Amount: </b>" + currFormat(amount) + "<br/>";

    return tooltip.style({
    "visibility": "visible",
    "top": (event.pageY - 10) + "px",
    "left": (event.pageX + 10) + "px"
    })
    .html(content);
    }

    // // Show tooltip on hover
    function showPovertyDetail() {

    // show tooltip with information from the __data__ property of the element
    var d = this.__data__;
    var program = d.layer;
    var amount = d.data.value;
    var poverty = d.data.key;

    var content = "<b>Program: </b>" + program + "<br/>" +
    "<b>Poverty Level: </b>" + poverty + "<br/>" +
    "<b>Amount: </b>" + currFormat(amount) + "<br/>";

    return tooltip.style({
    "visibility": "visible",
    "top": (event.pageY - 10) + "px",
    "left": (event.pageX - 385) + "px"
    })
    .html(content);
    }

    // // Show tooltip on hover
    function showProgramDetail() {

    // show tooltip with information from the __data__ property of the element
    var d = this.__data__;
    var program = d.key;
    var count = d.value.count;
    var amount = d.value.amount;

    var content = "<b>Program: </b>" + program + "<br/>" +
    "<b>Amount: </b>" + currFormat(amount) + "<br/>" +
    "<b>Count: </b>" + count + "<br/>";

    return tooltip.style({
    "visibility": "visible",
    "top": (event.pageY - 10) + "px",
    "left": (event.pageX + 10) + "px"
    })
    .html(content);
    }

    // // Hide tooltip on hover
    function hideDetail() {

    // hide tooltip
    return tooltip.style("visibility", "hidden");
    }

    }

    $(document).ready(function() {
    getData();
    });
    </script>

    </body>

    </html>