D3 Examples - Dash2.0

xxxxxxxxxx
 
<html>
​
<head>
  <title>My Exo-cortex Bootstrap</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- External JavaScript! -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 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" />
​
 
  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
​
<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.0;
            
            
        }
        
        .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;    
        }
   
    .x.axis path {
    stroke-width: 1.5;
   }    
    
    .dc-chart g.axis x{
        fill: yellow;
        
    }
        
   text.shadow {
  stroke: #fff;
  stroke-width: 2.5px;
  opacity: 0.9;
}
​
path { 
    stroke: steelblue;
    
    
}
​
.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
​
.grid .tick {
    stroke: lightgrey;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}
.grid path {
          stroke-width: 0;
}
​
.area {
    fill: lightsteelblue;
      stroke-width: 0;
}
​
    
    
</style>
    
    
    
    
    
    
<body class="application">
​
 <div class="navbar navbar-inverse" 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>-->
            <a class="navbar-brand" href="./">Siscoserv Dash</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="https://www.mdic.gov.br/index.php/comercio-servicos/estatisticas-do-comercio-exterior-de-servicos">Estatísticas</a></li>
                    <li><a href="https://www.mdic.gov.br/">Ministério da Indústria, Comércio Exterior e Serviços</a></li>
                </ul>    
                
            </div>
        </div>
     </div>
  
    <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#panel_1">Painel Dinâmico</a></li>
    <li><a data-toggle="tab" href="#company">Empresas</a></li>
    <!--<li><a data-toggle="tab" href="#Dynamic_Data">Gráficos Dinâmicos</a></li>-->
    
      
      
        
      
  </ul>
​
  <div class="tab-content">
    
    <div id="panel_1" class="tab-pane fade in active">
   <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>Capítulo</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>Módulo</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>Top 5 Países</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>Top 5 Estados</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>Info2 !</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>
                    <button type="button" class="btn btn-primary btn-block" id="download3" ><strong>Download</strong></button>
                    <div class="chart-notes"></div>
                    
                </div>
            </div>
        </div>
        <!-- /.row -->
​
    </div>        
        
    </div>
    <div id="company" class="tab-pane fade">
        <div id="GroupedBarChart"  role="main">
        </div>
     </div>    
      
    <div id="Dynamic_Data" class="tab-pane fade">
        <div id="Dynamic_Data_graf"  role="main">
            
            
        </div>
    
      
    </div>  
      
      
      
      
      
        
        
  </div> 
​
    
</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">
        
          
        
         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
        
         f = d3.format("0.2s");
​
            
        
        var sFormat = d3.format("s");
        //  sFormat =d3.format("a")
        
       
        var 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_6.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
              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; }}),*/
                 povApplied = povDim.group().reduceSum(function(d) { if (d.Program == '1.14-Outros serviços profissionais') { return d.TotalCommitment; } else { return 0; }}),
                povHealth = povDim.group().reduceSum(function(d) { if (d.Program == '1.1402-Serviços de arquitetura"" de planejamento urbano e de áreas rurais e de paisagismo'
                ) { return d.TotalCommitment; } else { return 0; }}),
                povMath = povDim.group().reduceSum(function(d) { if (d.Program == '1.15-Serviços de tecnologia da informação') { return d.TotalCommitment; } else { return 0; }}),
                povMusic = povDim.group().reduceSum(function(d) { if (d.Program == '1.09-Serviços financeiros e relacionados"" securitização de recebíveis e fomento comercial') { return d.TotalCommitment; } else { return 0; }}),
                povLiteracy = povDim.group().reduceSum(function(d) { if (d.Program == '1.10-Serviços imobiliários') { return d.TotalCommitment; } else { return 0; }}),
                povCivics = povDim.group().reduceSum(function(d) { if (d.Program == '1.03-Fornecimento de alimentação e bebidas e serviços de hospedagem') { return d.TotalCommitment; } else { return 0; }}),
                povSpecial = povDim.group().reduceSum(function(d) { if (d.Program == '1.27-Cessão de direitos de propriedade intelectual') { 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; }));
        
            capítulo_1 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.01-Serviços de construção') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_2 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.02-Serviços de distribuição de mercadorias"" serviços de despachante aduaneiro') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_3 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.03-Fornecimento de alimentação e bebidas e serviços de hospedagem') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_4 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.04-Serviços de transporte de passageiros') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_5 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.05-Serviços de transporte de cargas') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_6 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.06-Serviços de apoio aos transportes') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_7 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.07-Serviços postais"" serviços de coleta"" remessa ou entrega de documentos (exceto cartas) ou de pequenos objetos"" serviços de remessas expressas') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_8 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.08-Serviços de transmissão e distribuição de eletricidade"" serviços de distribuição de gás e água') { return d.TotalCommitment; } else { return 0; }}),                
                capítulo_9 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.09-Serviços financeiros e relacionados"" securitização de recebíveis e fomento comercial') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_10 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.10-Serviços imobiliários') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_11 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.11-Arrendamento mercantil operacional"" propriedade intelectual"" franquias empresariais e exploração de outros direitos') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_12 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.12-Serviços de pesquisa e desenvolvimento') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_13 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.13-Serviços jurídicos e contábeis') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_14 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.14-Outros serviços profissionais') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_15 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.15-Serviços de tecnologia da informação') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_16 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.01-Serviços de construção') { return d.TotalCommitment; } else { return 0; }}),
                //capítulo_17 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.01-Serviços de construção') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_18 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.18-Serviços de apoio às atividades empresariais') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_19 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.19-Serviços de apoio às atividades agropecuárias"" silvicultura"" pesca"" aquicultura"" extração mineral"" eletricidade"" gás e água') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_20 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.20-Serviços de manutenção"" reparação e instalação (exceto construção)') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_21 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.21-Serviços de publicação"" impressão e reprodução') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_22 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.22-Serviços educacionais') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_23 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.23-Serviços relacionados à saúde humana e de assistência social') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_24 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.24-Serviços de tratamento"" eliminação e coleta de resíduos sólidos"" saneamento"" remediação e serviços ambientais') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_25 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.25-Serviços recreativos"" culturais e desportivos') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_26 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.26-Serviços pessoais') { return d.TotalCommitment; } else { return 0; }}),
                capítulo_27 = resourceDim.group().reduceSum(function(d) { if (d.Program == '1.27-Cessão de direitos de propriedade intelectual') { return d.TotalCommitment; } else { return 0; }}),
                
            
            
            
            // 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(function(d) { return "USD " + d3.format(",.f")(d); });        
            programBubble
                .width(width * 3)
                .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(30)
                .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 (function (d) { return sFormat(d).replace('G', 'B'); })
            
                ;
        
             
            
            statusRingChart
                .width(width)
                .height(height * 1.25)
                .radius(height/2)
                .dimension(statusDim)
                .group(amountByStatus)
                .ordinalColors(["#F6CC0A","#2E8B57"])
                .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
                .width(width * 2.2)
                .height(height*1.5)
                .ordering(function(d) { return -d.value; })
                .dimension(resourceDim)
                .group(capítulo_1, '1.01-Serviços de construção')
                .stack(capítulo_2, '1.02-Serviços de distribuição de mercadorias"" serviços de despachante aduaneiro')
                .stack(capítulo_3, '1.03-Fornecimento de alimentação e bebidas e serviços de hospedagem')
                .stack(capítulo_4, '1.04-Serviços de transporte de passageiros')
                .stack(capítulo_5, '1.05-Serviços de transporte de cargas')
                .stack(capítulo_6, '1.06-Serviços de apoio aos transportes')
                .stack(capítulo_7, '1.07-Serviços postais"" serviços de coleta"" remessa ou entrega de documentos (exceto cartas) ou de pequenos objetos"" serviços de remessas expressas')
                .stack(capítulo_8, '1.08-Serviços de transmissão e distribuição de eletricidade"" serviços de distribuição de gás e água')
                .stack(capítulo_9, '1.09-Serviços financeiros e relacionados"" securitização de recebíveis e fomento comercial')
                .stack(capítulo_10, '1.10-Serviços imobiliários')
                .stack(capítulo_11, '1.11-Arrendamento mercantil operacional"" propriedade intelectual"" franquias empresariais e exploração de outros direitos')
                .stack(capítulo_12, '1.12-Serviços de pesquisa e desenvolvimento')
                .stack(capítulo_13, '1.13-Serviços jurídicos e contábeis')
                .stack(capítulo_14, '1.14-Outros serviços profissionais')
                .stack(capítulo_15, '1.15-Serviços de tecnologia da informação')
                //.stack(capítulo_17, '1.17-Serviços de telecomunicação"" difusão e fornecimento de informações')
                .stack(capítulo_18, '1.18-Serviços de apoio às atividades empresariais')
                .stack(capítulo_19, '1.19-Serviços de apoio às atividades agropecuárias"" silvicultura"" pesca"" aquicultura"" extração mineral"" eletricidade"" gás e água')
                .stack(capítulo_20, '1.20-Serviços de manutenção"" reparação e instalação (exceto construção)')
                .stack(capítulo_21, '1.21-Serviços de publicação"" impressão e reprodução')
                .stack(capítulo_23, '1.23-Serviços relacionados à saúde humana e de assistência social')
                .stack(capítulo_24, '1.24-Serviços de tratamento"" eliminação e coleta de resíduos sólidos"" saneamento"" remediação e serviços ambientais')
                .stack(capítulo_25, '1.25-Serviços recreativos"" culturais e desportivos')
                .stack(capítulo_26, '1.26-Serviços pessoais')
                .stack(capítulo_27, '1.27-Cessão de direitos de propriedade intelectual')
                .x(d3.scale.ordinal().domain(resources))
                .y(d3.scale.linear().domain(resources_domain))
                .elasticX(true)
                .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*1.5)
                .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)
                ; */
            
            povBarChart
                .width(width*2.2 )
                .height(height*1.5)
                .dimension(povDim)
                .ordering(function(d) { return -d.value; })
                //.rowsCap(15)
                .group(povApplied, '1.14-Outros serviços profissionais')
                .stack(povHealth, '1.02-Serviços de distribuição de mercadorias"" serviços de despachante aduaneiro')
                .stack(povCivics, '1.03-Fornecimento de alimentação e bebidas e serviços de hospedagem')
                .stack(povLiteracy, '1.10-Serviços imobiliários')
                .stack(povMath, '1.15-Serviços de tecnologia da informação')
                .stack(povMusic,'1.09-Serviços financeiros e relacionados"" securitização de recebíveis e fomento comercial')
                .stack(povSpecial, '1.27-Cessão de direitos de propriedade intelectual')
                .x(d3.scale.ordinal().domain(povLevels))
                .elasticX(true)
                .xUnits(dc.units.ordinal)
                .xAxisLabel(false)
                .barPadding(0.315)
                //.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(true)
                .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);
                        }
                    },{
                        label: 'Subitem',
                        format: function(d) {
                            return d.NbsPosicao;
                        }
                    },
                ])
                .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");
            }
    
            
            
   
            
            
        
        
        } // End Func createViz()
        
    function Func_GroupedBarChart(){
    
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
    var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
    
    var x1 = d3.scale.ordinal();
    
    var y = d3.scale.linear()
    .range([height, 0]);
    
    var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
    
    var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");
    
    
    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));
    
    
    var svg = d3.select("#GroupedBarChart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    d3.csv("data_groupedbarchart.csv",function(error,data){
    
    var ageNames=d3.keys(data[0]).filter(function(key){return key !=="State"})
    
    data.forEach(function(d) {
      d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]};});
    });
    
    x0.domain(data.map(function(d) { return d.State; }));
    x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);
    
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
    
    
    
    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
  .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Nº Empresas");
    
    var state = svg.selectAll(".state")
    .data(data)
  .enter().append("g")
    .attr("class", "g")
    .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });
    
    state.selectAll("rect")
    .data(function(d) { return d.ages; })
  .enter().append("rect")
     .attr("width", x1.rangeBand())
     .attr("x", function(d) { return x1(d.name); })
     .attr("y", function(d) { return y(d.value); })
     .attr("height", function(d) { return height - y(d.value); })
     .style("fill", function(d) { return color(d.name); });
    
    var legend = svg.selectAll(".legend")
    .data(ageNames.slice().reverse())
  .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; });
    
    
    legend.append("rect")
    .attr("x", width)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);
    
    
    legend.append("text")
    .attr("x", width )
    .attr("y", 9)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) { return d; });
    
    
    }); //end d3.csv
    
    
    }// end function GroupedBarChart
            
    var change = false;
    var indicador=0;
        
     
        
    function customXAxis(g) {
  g.call(xAxis);
  g.select(".domain").remove();
}
        
    function dynamic_data(){
​
                /*data_1 = [{"name": "Shanghai"        , "population": 18, "rank":  1},
                          {"name": "Guangzhou"       , "population": 11, "rank": 10},
                          {"name": "Dongguan"        , "population":  8, "rank": 20},
                          {"name": "Cairo"           , "population":  7, "rank": 30},
                          {"name": "Saint Petersburg", "population":  5, "rank": 40},
                          {"name": "New Taipei"      , "population":  4, "rank": 50}];
​
​
                data_2 = [{"name": "Shanghai"  , "population": 9, "rank":  1},
                                 {"name": "Guangzhou" , "population": 5, "rank": 10},
                                 {"name": "Dongguan"  , "population": 4, "rank": 20},
                                 {"name": "New Taipei", "population": 2, "rank": 50}]; */
​
​
                /*console.log("change_in:" + change)
                data_now = change ? data_1 : data_2  ;
                console.log("data_now:" + data_now)
​
                if (change===true) {change=false} 
                else if (change===false){change=true} ;
​
                console.log("change_now:" + change)
​
​
​
                //updateData(change)
                console.log("change_inicial"+change)*/
​
          data_now= [{"name": "Shanghai"        , "population": 18, "rank":  1,"color": "purple","ano":2014},
                          {"name": "Guangzhou"       , "population": 11, "rank": 10,"color": "blue","ano":2014},
                          {"name": "Dongguan"        , "population":  8, "rank": 20,"color": "red","ano":2014},
                          {"name": "Cairo"           , "population":  7, "rank": 30,"color": "yellow","ano":2014},
                          {"name": "Saint Petersburg", "population":  5, "rank": 40,"color": "green","ano":2014},
                          {"name": "New Taipei"      , "population":  4, "rank": 50,"color": "purple","ano":2014}];
​
          tempo=["2014","2015","2016"] 
          var    svgViewport = d3.select("#Dynamic_Data_graf")
              .append("svg")
                .attr("width",700)
                .attr("height",1000);
​
          var  margin = {top: 50, right: 110, bottom: 50, left: 50},
                width  = 800 - margin.left - margin.right,           
                height = 600 - margin.top  - margin.bottom;
​
​
            innerSpace = svgViewport.append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");    
​
            /*margin2=margin.right-20
                textArea=svgViewport.append("g")
                .attr("transform", "translate(" + margin2 + "," + margin.top + ")")
                .attr("id","text_date").text(null)   ;  */
            //d3.select("#svgViewport").append("div").attr("id", "x_var").text("X: ");    
​
               xAxisScale = d3.scale.linear().domain([0,20]).range([0,width]);
               yAxisScale = d3.scale.linear().domain([0,50]).range([0,height]);
​
          var   myXAxis = d3.svg.axis().scale(xAxisScale).orient("top");
          var   myYAxis = d3.svg.axis().scale(yAxisScale).orient("left");
          var   axisXGroup = innerSpace.append("g").call( myXAxis ).attr("class", "x axis");
          var   axisyGroup = innerSpace.append("g").call( myYAxis ).attr("class", "y axis");
​
            circles = innerSpace
              .append("g")
                .selectAll("circle")
                .data(data_now)
              .enter().append("circle");    
​
​
            var circleAttributes = circles
                .attr("cx", function(d,i) { return xAxisScale(d.population); })
                .attr("cy", function(d,i) { return yAxisScale(d.rank      ); })
                .attr("r",5)
                .attr("class","circle")
                .attr("fill", function(d,i) {return d.color}) 
                .style("font-size", function(d) { return xAxisScale(d.population) + "px"; });   
​
​
           text_year = innerSpace.append("g")
                  .attr("class", "temp")
                .selectAll("text")
                .data("2014")
              .enter().append("text");  
        
           text = innerSpace.append("g")
                .attr("class", "city-names")
                .selectAll("text")
                .data(data_now)
              .enter().append("text");    
​
              
​
​
            var textAttributes = text
                .attr("x", function(d,i) { return xAxisScale(d.population) + 10; })
                .attr("y", function(d,i) { return yAxisScale(d.rank)       + 10; })
                .attr("class","text_id")
                .text(function(d,i) { return d.name; })
                .style("fill", "red");
                
​
            ano =2014
​
           textAttributes2 = text_year
                .attr("x", function(d,i) { return xAxisScale(16) + 10; })
                .attr("y", function(d,i) { return yAxisScale(30)       + 10; })
                .text(ano)
               .attr("class","text_year")     
               .style("fill", "red");    
​
​
​
​
​
            };//End function dynamic_data()     
    function redraw(){
    
//var  tempo=["2014","2015","2016"]    
 var data_1 = [{"name": "Shanghai"        , "population": 18, "rank":  1,"color": "purple","ano":2014},
              {"name": "Guangzhou"       , "population": 11, "rank": 10,"color": "blue","ano":2014},
              {"name": "Dongguan"        , "population":  8, "rank": 20,"color": "red","ano":2014},
              {"name": "Cairo"           , "population":  7, "rank": 30,"color": "yellow","ano":2014},
              {"name": "Saint Petersburg", "population":  5, "rank": 40,"color": "green","ano":2014},
              {"name": "New Taipei"      , "population":  4, "rank": 50,"color": "purple","ano":2014}];
    
    
var  data_2 = [{"name": "Shanghai"  , "population": 9, "rank":  1,"color": "purple","ano":2015},
                     {"name": "Guangzhou" , "population": 5, "rank": 10,"color": "blue","ano":2015},
                     {"name": "Dongguan"  , "population": 4, "rank": 20,"color": "red","ano":2015},
                     {"name": "New Taipei", "population": 2, "rank": 50,"color": "purple","ano":2015}];
    
 var data_3 = [{"name": "Shanghai"  , "population": 15, "rank":  1,"color": "purple","ano":2016},
                     {"name": "Guangzhou" , "population": 10, "rank": 10,"color": "blue","ano":2016},
                     {"name": "Dongguan"  , "population": 8, "rank": 20,"color": "red","ano":2016},
                     {"name": "New2 Taipei", "population": 5, "rank": 50,"color": "purple","ano":2016}];    
​
/*var margin = {top: 50, right: 50, bottom: 50, left: 50},
    width  = 300 - margin.left - margin.right,           
    height = 300 - margin.top  - margin.bottom;    */
    
    // 2) generate data
    /*console.log("change_in:" + change)*/
    
    //data_now = change ? data_1 : data_2  ;
    //console.log("data_now:" + data_now)
    
       // var svgViewport = d3.select("#Dynamic_Data_graf");
              
        
      //var  innerSpace = svgViewport;
       
        
      /* var circles = innerSpace
                .selectAll("circle")
                .data(data_now); */
              
         // var   xAxisScale = d3.scale.linear().domain([0,20]).range([0,width]);
         // var   yAxisScale = d3.scale.linear().domain([0,50]).range([0,height]);
​
​
          /*  var circleAttributes = circles
                .attr("cx", function(d,i) { return xAxisScale(d.population); })
                .attr("cy", function(d,i) { return yAxisScale(d.rank      ); })
                .attr("r",5)
                .attr("class","circle")
                .attr("fill", function(d,i) {return d.color}) 
                .style("font-size", function(d) { return xAxisScale(d.population) + "px"; });   */
​
​
            /*var text = innerSpace.append("g")
                .attr("class", "city-names")
                .selectAll("text")
                .data(data_now)
              .enter().append("text");    */
        
            
       // var circles=innerSpace.selectAll("circle").data(data_now,function(d,i){return d.name; });
​
       var text = innerSpace.selectAll(".text_id")
           .data(data_now,function(d,i) { return d.name; });
        
            
        text.exit().remove();
        text.enter().append("text"); 
        
        var textAttributes = text
                .attr("x", function(d,i) { return xAxisScale(d.population) + 10; })
                .attr("y", function(d,i) { return yAxisScale(d.rank)       + 10; })
                .text(function(d,i) { return d.name; })
                .style("fill", "black");
        
        text.exit().remove();
  
    var text_year = innerSpace.selectAll("text_year")
                .data(ano);
​
    
    var textAttributes2 = text_year   
               .text(ano)
               .attr("class","text_year")     
               .style("fill", "red") 
   
  
    //.style("font-size", function(d) { return 50 + "px"; });   
    
    
    //.style("fill", "red");   
    
    
        
    //console.log("change_now:" + change)
    //updateData(change)
    //console.log("change_inicial"+change)
    
    /*var svgViewport = d3.select("#Dynamic_Data_graf")
  .append("svg")
    .attr("width",300)
    .attr("height",300);
    
var margin = {top: 50, right: 50, bottom: 50, left: 50},
    width  = 300 - margin.left - margin.right,           
    height = 300 - margin.top  - margin.bottom;*/
    
    // 1) calculate usingSeconds boolean
    
    
    // 5) redraw the Y axis
    // 6) redefine the X scale
    
    // 9) redraw the rectangle
    // 10) redraw the text label
​
​
/*    
// redefine the range and/or domain     
    
var myXAxis = d3.svg.axis().scale(xAxisScale).orient("top");
var myYAxis = d3.svg.axis().scale(yAxisScale).orient("left");
​
// 3) redefine the Y scale
var yAxisScale = d3.scale.linear().domain([0,50]).range([0,height]);
// 4) redefine the Y axis
myYAxis.scale(yAxisScale);    
// 7) redefine the X axis
var xAxisScale = d3.scale.linear().domain([0,20]).range([0,width]);
    
// 8) redraw the X axis
 myXAxis.scale(xAxisScale);
var axisXGroup = innerSpace.append("g").call( myXAxis ).attr("class", "x axis");
var axisyGroup = innerSpace.append("g").call( myYAxis ).attr("class", "y axis"); */
​
   
var circles=innerSpace.selectAll("circle").data(data_now,function(d,i){return d.name; })
​
​
    
circles.exit().remove();
    
circles.enter().append("circle"); 
​
   
var circleAttributes = circles
    .attr("cx", function(d,i) { return xAxisScale(d.population); })
    .attr("cy", function(d,i) { return yAxisScale(d.rank      ); })
    .attr("r",5)
    .attr("fill", function(d,i) {return d.color});
    
  
​
/*var text = innerSpace.append("g")
    .attr("class", "city-names")
    .selectAll("text")
    .data(data_now) */
  
//text.exit().remove();    
//text.enter().append("text");    
    
circles.exit().remove();        
    
    
if (indicador ===0) {data_now=data_2;ano=2015; indicador ++} 
    //else if (change===false){change=true} ;
    else if(indicador===1) {data_now=data_3; ano=2016;indicador ++}
    else if(indicador===2) {data_now=data_1 ; ano=2014;indicador=0}    
    
/*var textAttributes = text
    .attr("x", function(d,i) { return xAxisScale(d.population) + 10; })
    .attr("y", function(d,i) { return yAxisScale(d.rank)       + 10; })
    .text(function(d,i) { return d.name; })
    .style("fill", "blue");    */
    
       
    
    
    
    
    
}       
        
        
 $(document).ready(function() {
            getData();
        }); 
        
 //setInterval(function() {  redraw(); }, 5000);          
​
    function start() {
    
    Func_GroupedBarChart();
    //dynamic_data();
        
};
    
window.onload = start;        
      
      
        
var saveAs = saveAs || (function(view) {
    
        
        
        "use strict";
    // IE <10 is explicitly unsupported
    if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
        return;
    }
    var
          doc = view.document
          // only get URL when necessary in case Blob.js hasn't overridden it yet
        , get_URL = function() {
            return view.URL || view.webkitURL || view;
        }
        , save_link = doc.createElementNS("https://www.w3.org/1999/xhtml", "a")
        , can_use_save_link = "download" in save_link
        , click = function(node) {
            var event = new MouseEvent("click");
            node.dispatchEvent(event);
        }
        , is_safari = /constructor/i.test(view.HTMLElement) || view.safari
        , is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent)
        , throw_outside = function(ex) {
            (view.setImmediate || view.setTimeout)(function() {
                throw ex;
            }, 0);
        }
        , force_saveable_type = "application/octet-stream"
        // the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to
        , arbitrary_revoke_timeout = 1000 * 40 // in ms
        , revoke = function(file) {
            var revoker = function() {
                if (typeof file === "string") { // file is an object URL
                    get_URL().revokeObjectURL(file);
                } else { // file is a File
                    file.remove();
                }
            };
            setTimeout(revoker, arbitrary_revoke_timeout);
        }
        , dispatch = function(filesaver, event_types, event) {
            event_types = [].concat(event_types);
            var i = event_types.length;
            while (i--) {
                var listener = filesaver["on" + event_types[i]];
                if (typeof listener === "function") {
                    try {
                        listener.call(filesaver, event || filesaver);
                    } catch (ex) {
                        throw_outside(ex);
                    }
                }
            }
        }
        , auto_bom = function(blob) {
            
            
            // prepend BOM for UTF-8 XML and text/* types (including HTML)
            // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
            if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
                return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
            }
            return blob;
        }
        , FileSaver = function(blob, name, no_auto_bom) {
            if (!no_auto_bom) {
                blob = auto_bom(blob);
            }
            // First try a.download, then web filesystem, then object URLs
            var
                  filesaver = this
                , type = blob.type
                , force = type === force_saveable_type
                , object_url
                , dispatch_all = function() {
                    dispatch(filesaver, "writestart progress write writeend".split(" "));
                }
                // on any filesys errors revert to saving with object URLs
                , fs_error = function() {
                    if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {
                        // Safari doesn't allow downloading of blob urls
                        var reader = new FileReader();
                        reader.onloadend = function() {
                            var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/,'data:attachment/file;');
                            var popup = view.open(url,'_blank');
                            if(!popup) view.location.href = url;
                            url=undefined; // release reference before dispatching
                            filesaver.readyState = filesaver.DONE;
                            dispatch_all();
                        };
                        reader.readAsDataURL(blob);
                        filesaver.readyState = filesaver.INIT;
                        return;
                    }
                    // don't create more object URLs than needed
                    if (!object_url) {
                        object_url = get_URL().createObjectURL(blob);
                    }
                    if (force) {
                        view.location.href = object_url;
                    } else {
                        var opened = view.open(object_url, "_blank");
                        if (!opened) {
                            // Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
                            view.location.href = object_url;
                        }
                    }
                    filesaver.readyState = filesaver.DONE;
                    dispatch_all();
                    revoke(object_url);
                }
            ;
            filesaver.readyState = filesaver.INIT;
​
            if (can_use_save_link) {
                object_url = get_URL().createObjectURL(blob);
                setTimeout(function() {
                    save_link.href = object_url;
                    save_link.download = name;
                    click(save_link);
                    dispatch_all();
                    revoke(object_url);
                    filesaver.readyState = filesaver.DONE;
                });
                return;
            }
​
            fs_error();
        }
        , FS_proto = FileSaver.prototype
        , saveAs = function(blob, name, no_auto_bom) {
            return new FileSaver(blob, name || blob.name || "download", no_auto_bom);
        }
    ;
    // IE 10+ (native saveAs)
    if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
        return function(blob, name, no_auto_bom) {
            name = name || blob.name || "download";
​
            if (!no_auto_bom) {
                blob = auto_bom(blob);
            }
            return navigator.msSaveOrOpenBlob(blob, name);
        };
    }
​
    FS_proto.abort = function(){};
    FS_proto.readyState = FS_proto.INIT = 0;
    FS_proto.WRITING = 1;
    FS_proto.DONE = 2;
​
    FS_proto.error =
    FS_proto.onwritestart =
    FS_proto.onprogress =
    FS_proto.onwrite =
    FS_proto.onabort =
    FS_proto.onerror =
    FS_proto.onwriteend =
        null;
 
        
        
        
    return saveAs;
}(
       typeof self !== "undefined" && self
    || typeof window !== "undefined" && window
    || this.content
));
// `self` is undefined in Firefox for Android content script context
// while `this` is nsIContentFrameMessageManager
// with an attribute `content` that corresponds to the window
​
if (typeof module !== "undefined" && module.exports) {
  module.exports.saveAs = saveAs;
} else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) {
  define("FileSaver.js", function() {
    return saveAs;
  });
}        
            
        
​
          d3.select('#download3')
    .on('click', function() {
         data = programDim.top(Infinity);
       /* if(d3.select('#download-type3 input:checked').node().value==='dataTable') {
            data = data.map(function(d) {
                var row = {};
                dataTable.columns().forEach(function(c) {
                    row[dataTable._doColumnHeaderFormat(c)] = dataTable._doColumnValueFormat(c, d);
                });
                return row;
            });
        } */
        blob = new Blob([d3.csv.format(data)], {type: "text/csv;charset=utf-8"});
        saveAs(blob,'data.csv');
    });   
        
        
    
      
        
        
    </script>    
    </body>
​
</html>
    