All examples By author By category About

ricardofelippe

Full window Github gist

Dash2.0_tabs

<html>

<head>
  <title>My Exo-cortex Bootstrap</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <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>
    
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.32/dc.min.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="./">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>
    
    
      
      
        
      
  </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>
					
				</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>
					
				</div>
			</div>
		</div>

<div class="row">
			
			<div class="col-sm-9">
				
				<div class="chart-wrapper">
					<div class="chart-title">
						<span>Capítulo</span>
					</div>
					
					<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>
						
					</div>
					
					<div class="chart-notes"></div>
					
				</div>
				
			</div>

<div class="col-sm-3">
				
				<div class="chart-wrapper">
					<div class="chart-title">
						<span>Módulo</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> 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>
						
					</div>
					
					<div class="chart-notes"></div>
					
				</div>
				
			</div>
			
		</div>
		
      
        
		
		<div class="row">
			
			<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>
						
					</div>
					<div class="chart-notes"></div>
				
				</div>
			</div>
			
			
			<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>
						
					</div>
					<div class="chart-notes"></div>
				
				</div>
			</div>
		</div>
		
        <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>
						
					</div>
					<div class="chart-notes"></div>
				
				</div>
			</div>
            
            
        
        </div>
       
       
		
		<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>

</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>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	
	<script type="text/javascript" src="https://d3js.org/d3-queue.v3.min.js" charset="utf-8"></script>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.32/dc.min.js"></script>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
	
	<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");

/*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");

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");

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 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 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);

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>

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

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

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

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

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

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

https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.32/dc.min.js

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js