CrossfilterDestrinchado

<html>
<head>
<title>Dados Consolidados- Por Posição</title>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
 
    <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>

</head>

<body >

<div class="container">
  <h2>Crossfilter</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#Example1">Exemplo 1</a></li>
      
        
      
  </ul>

<div class="tab-content">
    
    <div id="Example1" class="tab-pane fade in active">
   <div class="container">
        
       
    <div class="alert alert-info alert-dismissable">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
    <strong>Reference:</strong>  https://blog.rusty.io/2012/09/17/crossfilter-tutorial/.
  </div>
       
       
    <button type="button" onclick="example1()" class="alert alert-info">Button</button>    
        
        <p id=size> </p>    
      
    
    </div>
      </div>    
    
  
         
      
    </div>

</div>

d3.tsv("data_crossfilter.tsv", function (data) {    
        
        
        
        
var cf= crossfilter(data);

document.getElementById("size").innerHTML = "Size: " +cf.size();
	
        
//Dimensions

var dateDimension = cf.dimension(function(d) {return d.date;})

document.getElementById("row3").innerHTML = dateDimension.top(3);

console.log(dateDimension.top(3));
//Verificando todos os dados:
	    console.log(data);
//Derived dimensions
	var     DateQuantitydimension=cf.dimension(function(d){return d.date + '-' + d.quantity})
	
        console.log(DateQuantitydimension);
	var n=cf.groupAll().reduceCount().value();
	console.log('n: ' + n);
	 
	var quantity=cf.groupAll().reduceSum(function(fact){ return fact.quantity;}).value()    
	console.log('Quantity: ' + quantity);
	
	var typeDimension=cf.dimension(function(fact){ return fact.type});
	    typeDimension.filter("visa")
	
	 var n=cf.groupAll().reduceCount().value();
	console.log('There are' + n + "visa records");
	 //clear the filter
	    typeDimension.filterAll();
	    
	 var countMeasure = typeDimension.group().reduceCount();
	var a = countMeasure.top(4);
	console.log('There are ' + a[0].value + ' ' + a[0].key + ' (s) in my house.');
	console.log('There are ' + a[1].value + '' + a[1].key + ' (s) in my house.');
	console.log('There are ' + a[2].value + '' + a[2].key + ' (s) in my house.');
	 
	    
	    
	    
	
    });

};

</script>
    
    </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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

https://cdnjs.cloudflare.com/ajax/libs/dimple/2.2.0/dimple.latest.min.js

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

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