JSFiddle - React, Tailwind, and code Playground

by nrabinowitz

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

var vals = cf.dimension(function(d) { return d.val }),
    min = vals.bottom(1)[0].val,
    offset =  min < 0 ? Math.abs(min) : 0,
    max = vals.top(1)[0].val + offset,
    valAccessor = function(d) {
        // offset ensures positive numbers, fraction ensures sort order
        return ((d.val + offset) / max).toFixed(8);
    },
    combos = cf.dimension(function(d) { 
        return d.cat + '|' + valAccessor(d); 
    });

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

print(combos.bottom(Infinity));