JSFiddle - React, Tailwind, and code Playground

by justinbrown

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>

JavaScript

console.clear();
//console.log(crossfilter);
var livingThings = crossfilter([
  // Fact data.
  { name: "Rusty",  type: "human", legs: 2 },
  { name: "Alex",   type: "human", legs: 2 },
  { name: "Lassie", type: "dog",   legs: 4 },
  { name: "Spot",   type: "dog",   legs: 4 },
  { name: "Polly",  type: "bird",  legs: 2 },
  { name: "Fiona",  type: "plant", legs: 0 }
]);

// === Calculating Totals ===
// groupAll - selects all records into a single group
// reduceCount - creates a count of the records
var n = livingThings.groupAll().reduceCount().value();
// console.log('groupAll()', livingThings.groupAll());
console.log("There are " + n + " living things in my house.");

// How many total legs are in my house?
// reduceSum - this is going to sum values together
var legs = livingThings.groupAll().reduceSum(function(fact) { return fact.legs; }).value();
console.log("There are " + legs + " legs in my house.");

// === Filtering ===
// A dimension is something you want to group or filter by.

// Crossfilter can filter on dimensions in two ways, either by exact value, or by range.

// Filter for dogs.
var typeDimension = livingThings.dimension(function(d) { return d.type; });
typeDimension.filter("dog");

var n = livingThings.groupAll().reduceCount().value();
console.log("There are " + n + " dogs in my house.");

var legs = livingThings.groupAll().reduceSum(function(fact) {
  return fact.legs;
}).value();
console.log("There are " + legs + " dog legs in my house.");

// Clear the filter.
typeDimension.filterAll()

// I want to know how many living things of each type are in my house.
/* 
Using typeDimension , I’m going to group the records by type, and then create a measure that returns the count called countMeasure . Once countMeasure is created, we can find the number of entries by calling countMeasure.size() (a.k.a the cardinality of the type dimension), and we can get the actual counts by calling countMeasure.top(size).
*/

console.log("How many living things of...