JSFiddle - React, Tailwind, and code Playground

by gartz

HTML

<script src="https://raw.github.com/square/crossfilter/master/crossfilter.min.js"></script>
<div id="out"></div>

CSS

p {
  padding: 1em;
  border-bottom: 1px solid #ccc;
}

JavaScript

var cf = crossfilter([
    { cat: "A", val:1 },
    { cat: "B", val:2 },
    { cat: "A", val:11 },
    { cat: "B", val:5 },
    { cat: "A", val:3 },
    { cat: "B", val:2 },
    { cat: "A", val:11 },
    { cat: "B", val:100 }
]);

function pad (str, max) {
    str = String(str);
    return str.length < max ? pad("0" + str, max) : str;
}


var cats = cf.dimension(function(d) { return d.cat; }),
    vals = cf.dimension(function(d) { return d.val; }),
    maxCatsLength = cats.top(1)[0].cat.length;
    maxValsLength = vals.top(1)[0].val.length;
    combos = cf.dimension(function(d) { return pad(d.cat, maxCatsLength) + '|' + pad(d.val, 10); });

function print(data) {
  $('<p/>').html(
    data.map(function(d) { return JSON.stringify(d) }).join('<br>')
  ).appendTo('#out');
}

print(combos.bottom(Infinity));
console.log(cats.top(1),vals.top(1));