D3 Examples - Dash2

xxxxxxxxxx
 
<!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 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/2.0.0-beta.32/dc.min.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;
        }
        
        /*
         * 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;
        }
        
        .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;*/
        }
    .dc-chart g.row text {
    fill: black;
    font-size: 12px;
    cursor: pointer;    
        }
   
        
        
    </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://www.donorschoose.org/">Home</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 Donations ($)</h5>
                    <div class="dc-chart" id="net-donations"></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:programBubble.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 class="alert alert-info alert-dismissable">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                            <strong>Info !</strong> Selecione o Módulo
                          </div>
                        <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:resourcesBarChart.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:povBarChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
                            </div>
                        </div>
                        <!-- #chart-bar-poverty -->
                    </div>
                    <div class="chart-notes"></div>
                
                </div>
            </div>
        </div>
        <!-- /.row -->
        <div class="row">
        <div class="col-sm-12">
                <div class="chart-wrapper">
                    <div class="chart-title">
                        <span>Serviços</span>
                    </div>
                    <div class="chart-stage">
                        <div class="alert alert-info alert-dismissable">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                            <strong>Info !</strong> This alert box could indicate a neutral informative change or action.
                          </div>
​
                        <div id="subitem-row-chart" class="dc-chart">
                            <div>selected: <span class="filter"></span>
                                <a class="reset" href="javascript:servRowChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
                            </div>
                        </div>
                        <!-- #chart-bar-poverty -->
                    </div>
                    <div class="chart-notes"></div>
                
                </div>
            </div>
            
            
        
        </div>
​
        <!-- 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="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 -->
    <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-donations"),
            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'),
            servRowChart=dc.rowChart("#subitem-row-chart"),
            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 = "massa_teste_5.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; }),
                NbsPosicaoDim=ndx.dimension(function(d){return d.NbsPosicao});
            //My Edition 1    
            
                
            // group dimensions
            //My Edition 2
            var valorPerServiço = NbsPosicaoDim.group().reduceSum(function(d) {return d.TotalCommitment;});
            
            
                
            // 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)
                ;
                
                
        
            resourcesBarChart
                .width(width * 2)
                .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 * 2)
                .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)
                ; 
            
         servRowChart
            .dimension(NbsPosicaoDim) //y-axis
            .group(valorPerServiço) // x-axis
            .width(1250)
            .height(450)
            .ordering(function(d) { return -d.value; })
            .rowsCap(15) 
            .elasticX(true)
            .ordinalColors(["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b"])
            .controlsUseVisibility(true);    
            
            
            
        
            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);
                        }
                    },
                ])
                .size(1500)
                .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; https://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>
    