JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overview-graph"></div>

CSS

.chart-bg{fill:#f8f8f8;stroke:#dfdfdf}
.range{fill:#CCC;shape-rendering:geometricPrecision}
.measure{fill:#a7c573;shape-rendering:geometricPrecision}
.marker{stroke:#666;stroke-width:1px;shape-rendering:geometricPrecision}
.value{font-size:0.75em;font-weight:300;fill:#58702f}

JavaScript

var sets = [
 
            {"title": "Set-1", "count": 17, "measures": [10, 13, 16, 14]},
            {"title": "Set-2", "count": 23, "measures": [12, 18, 19, 23]},
            {"title": "Set-3", "count": 25, "measures": [19, 22, 23, 20]},
            {"title": "Set-4", "count": 4, "measures": [4, 4, 4, 4]},
            {"title": "Set-5", "count": 8, "measures": [5, 7, 8, 6]}
];

d3  .select('#overview-graph')
    .datum(sets)
    .call(relativeCompletionChart()
    //options
    );


function relativeCompletionChart() {
    var width = 1200,
        margin = {top: 16, right: 16, bottom: 16, left: 16},
        onSetMouseOver = null,
        onSetClick = null;

    function chart(selection) {
        selection.each(function(data) {
            var titleColWidth = 0.3*width,
                setHeight = 24,
                barHeight = 22,
                setCount = data.length,
                colCount = data[0].measures.length,
                colWidth = (width - titleColWidth)/colCount,
                rangeWidth = colWidth - 4,
                height = ((setHeight * setCount) + margin.top + margin.bottom);
            

            var svg = d3.select(this)
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height)
                        .attr("viewBox", "0 0 " + width + " " + height )
                        .attr("preserveAspectRatio", "xMidYMin meet");

            svg         .append('rect')
                        .attr("x", 0)
                        .attr('y', 0)
                        .attr('height', height)
                        .attr('width', width)
                        .attr('class', 'chart-bg');

            function update(data) {

                var set = svg.selectAll("g.set")
                    .data(data);
                                
                set.exit().remove();
                
                var setEnter = set
                       ...