JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>

<div id="App"></div>

CSS

body {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

svg text {
    font-size: 12px;
}

rect {
    shape-rendering: crispEdges;
}

.mainrect {
    fill-opacity: 0;
    stroke-width: 0.5;
    stroke: black;
    stroke-opacity: 0;
    shape-rendering: auto;
}

    .mainrect.selected {
        stroke-opacity: 1;
    }

.barlabel, .barvalue, .barpercent {
    font-weight: normal;
}

.barpercent {
    fill: grey;
}

    .barlabel.selected,
    .barvalue.selected,
    .barpercent.selected {
        font-weight: bold;
    }

.header {
    font-size: 15px;
    text-anchor: middle;
    font-weight: bold;
}

.header text {
    fill: grey;
}

/* You can replace the following with your own custom loading indicator */
@import "compass/css3";

@keyframes fadeIn { 
  from { opacity: 0; } 
}

h3 {
  position: relative;
  top: 50px;
  
  font: italic bold 1.2em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  
  animation: fadeIn 1s infinite alternate;
}

React

function RenderVisualize () {
  React.useEffect(function () {
visualize({
    auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1"
    }
}, function (v) {
        report = v.report({
            resource: "/public/Samples/Reports/Cascading_Report_2_Updated",
            success: exportCsv,
            error: errorHandler
        });
});

function exportCsv () {
    report.export({        
        outputFormat: "csv"
    }, function (link, request) {
        request()
        .done(parseData)
        .fail(errorHandler);
    }, errorHandler);
    document.getElementById("loader").style.display = "none";
}

function parseData(data) {
    data = d3.csv.parseRows(data, accessor);
    drawD3Chart(data);        
}

function accessor(row, index) {
    let cleaned = [];
    if (row[8][0] === "$") {
        cleaned.push(
            //row[0],
            //row[2],
            row[4],
            row[7],
            +row[8].slice(2),
            +row[9].slice(2)
        );
        return cleaned;
    } else if (row[6][0] === "$" && row[3] !== "") {
        cleaned.push(
            //row[0],
            //row[1],
            row[3],
            row[5],
            +row[6].slice(2),
            +row[7].slice(2)
        );
        return cleaned;
    } else {
        return null;
    }
}

function drawD3Chart (data) {
    let data1 = [ 
        {data:bP.partData(data,2), id:'Sales', header:["Channel","State", "Sales"]},
        {data:bP.partData(data,3), id:'Cost', header:["Channel","State", "Cost"]}
    ];
        
    bP.setOptions({
            colors: ["#3366CC", "#DC3912", "#FF9900", "#109618", "#990099", "#0099C6"],
            labelColumn: [-195, 38],
            valueColumn: [-38, 149], //(count (%)) first value is left position x, second value is right position x
            barpercentColumn: [-3, 185], //Column positions of labels.
            headerX: 90,
            headerY: -20,
            transitionWidth: 130,
  ...