JSFiddle - React, Tailwind, and code Playground

by chrisguzman

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<body>
    <div id='Chart'>
        <h3>Counts of category</h3>
    </div>
    <div id='UniqueCounts'>
        <h3>Counts of unique IDs per Category</h3>
    </div>
</body>

JavaScript

//UNIQUE COUNTS ROW CHART 

var data = [{
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "2"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "4"
}, {
    Category: "C",
    ID: "1"
}, {
    Category: "C",
    ID: "2"
}, {
    Category: "C",
    ID: "3"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "5"
}];

var ndx = crossfilter(data);

var XDimension = ndx.dimension(function (d) {
    return d.Category;
});

var YDimension = XDimension.group()

var N = "ID"

var YDimensionUnique = XDimension.group().reduce(
function reduceAdd(p, d) {
    ++p.count;
    if (d[N] in p.IDs) p.IDs[d[N]]++;
    else {
        p.IDs[d[N]] = 1;
        p.unique++;
    }
    return p;
},

function reduceRemove(p, d) {
    --p.count;
    p.IDs[d[N]]--;
    if (p.IDs[d[N]] === 0) {
        delete p.IDs[d[N]];
        p.unique--;
    }
    return p;
},

function reduceInitial() {
    return {
        count:0,
        unique: 0,
        IDs: {}
    };
});

var NDDimension = XDimension.groupAll();

dc.rowChart("#Chart")
    .width(480).height(300)
    .dimension(XDimension)
    .group(YDimension)
    .label(function (d) {
    return d.key + "  " + d.value;
})
    .ordering(function (d) {
    return -d.value
});

dc.rowChart("#UniqueCounts")
    .width(480).height(300)
    .dimension(XDimension)
    .valueAccessor(function (d) { // must use valueAccessor
            return d.value.unique;
        })
    .group(YDimensionUnique)
    .label(function (d) {
    return d.key + "  " + d.value.unique;
})
    .ordering(function (d) {
    return -d.value
});

dc.renderAll();