D3 Examples - CrossfilterDestrinchado

xxxxxxxxxx
 
<html>
<head>
<title>Dados Consolidados- Por Posição</title>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
​
<script src="https://d3js.org/d3.v3.min.js"></script>
​
    <!--<script src="https://d3js.org/d3.v3.min.js" type="text/JavaScript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.2.0/dimple.latest.min.js"></script>-->
<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>    
    
    
    
    
    
​
​
    
​
    
    
    
    <script type="text/javascript"> 
    
    
function example1(){
    
    
​
        
    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> 
​
    