JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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>
<div id='Chart'></div>

JavaScript

var data = [{Owner: "Alyssa", Type: "New", ID: "A"}, {Owner: "Alyssa", Type: "Old", ID: "A"}, {Owner: "Alyssa", Type: "Old", ID: "A"}, {Owner: "Alyssa", Type: "Old", ID: "A"}, {Owner: "Alyssa", Type: "New", ID: "B"}, {Owner: "Bob", Type: "New", ID: "A"}, {Owner: "Bob", Type: "New", ID: "A"}, {Owner: "Bob", Type: "Old", ID: "C"}, {Owner: "Bob", Type: "Old", ID: "C"}, {Owner: "Bob", Type: "New", ID: "C"}, {Owner: "Bob", Type: "New", ID: "C"}, {Owner: "Bob", Type: "New", ID: "C"}, {Owner: "Bob", Type: "New", ID: "D"}, {Owner: "Joe", Type: "Old", ID: "A"}, {Owner: "Joe", Type: "Old", ID: "A"}, {Owner: "Joe", Type: "New", ID: "D"}, {Owner: "Joe", Type: "New", ID: "D"}, {Owner: "Joe", Type: "New", ID: "E"}];
var ndx = crossfilter(data);


var XDimension = ndx.dimension(function (d) {return d.Owner;});
var YDimension = XDimension.group().reduceCount(function (d) {
    return d.Owner;
});



function sel_stack(i) {
  return function(d) {
    return d.value[i];
  };
}
          
var chart = dc.barChart("#Chart")

chart
    .width(480).height(300)
    .dimension(XDimension)
    .group(YDimension,"1",sel_stack('1'))
    .centerBar(true)
    .gap(56)
    .x(d3.scale.ordinal().domain(XDimension))
    .xUnits(dc.units.ordinal);


for(var i = 2; i<6; ++i)
  chart.stack(YDimension, ''+i, sel_stack(i));
  
chart.render();

dc.renderAll();