JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.7/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.7/dc.min.css">
<div id="chart-container"></div>

JavaScript

//'use strict';
let compositeChart = dc.compositeChart("#chart-container");

const BAR_PADDING = 0.1; // percentage the padding will take from the bar
const RANGE_BAND_PADDING = 0.5; // padding between 'groups'
const OUTER_RANGE_BAND_PADDING = 0.5; // padding from each side of the chart

let sizing = chart => {
    chart
        .width(window.innerWidth)
        .height(window.innerHeight)
        .redraw();
};

let resizing = chart => window.onresize = () => sizing(chart);

let barPadding;
let scaleSubChartBarWidth = chart => {
    let subs = chart.selectAll(".sub");

    if (typeof barPadding === 'undefined') { // first draw only
        // to percentage
        barPadding = BAR_PADDING / subs.size() * 100;
        // each bar gets half the padding
        barPadding = barPadding / 2;
    }

    let startAt, endAt,
        subScale = d3.scale.linear().domain([0, subs.size()]).range([0, 100]);

    subs.each(function (d, i) {

        startAt = subScale(i + 1) - subScale(1);
        endAt = subScale(i + 1);

        startAt += barPadding;
        endAt -= barPadding;

        // polygon(
        //  top-left-vertical top-left-horizontal,
        //  top-right-vertical top-right-horizontal,
        //  bottom-right-vertical bottom-right-horizontal,
        //  bottom-left-vertical bottom-left-horizontal,
        // )

        d3.select(this)
            .selectAll('rect')
            .attr("clip-path", `polygon(${startAt}% 0, ${endAt}% 0, ${endAt}% 100%, ${startAt}% 100%)`);

    });
};

let data = [
    {
        key: "First",
        value: [
            {key: 1, value: 0.18},
            {key: 2, value: 0.28},
            {key: 3, value: 0.68}
        ]
    },
    {
        key: "Second",
        value: [
            {key: 1, value: 0.72},
            {key: 2, value: 0.32},
            {key: 3, value: 0.82}
        ]
    },
    {
        key: "Third",
        value: [
            {key: 1, value: 0.3},
            {key: 2, value: 0.22},
            {key: 3,...