JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.js"></script>
<script src="https://rawgit.com/zigfred/dimple/master/dist/dimple.v2.1.2tmp.js"></script>
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>

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

CSS

/* 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/viz/04._Product_Results_by_Store_Type_Report",

            success: exportJson,

            error: errorHandler
        });
});

function exportJson () {
    report.export({        
        outputFormat: "json",
        //pages: "1-5"
    }, function (link, request) {
        request({
            dataType: "json" 
        })
        .done(parseData)
        .fail(errorHandler);
        
    }, errorHandler);
    //Remove custom loading indicator once data has successfully loaded
    document.getElementById("loader").style.display = "none";
    //Add indicator for D3 build
    document.getElementById("build").style.display = "inline";
}

function parseData(data) {
    //console.log("result: ", data)

    drawD3Chart(data);        
}



function drawD3Chart (data) {
    let width = 1100,
        height = 700;
    let svg = dimple.newSvg("#container", width, height);
    
    let myChart = new dimple.chart(svg, data);
        myChart.setBounds(75, 30, width-90, height-70);
    
        myChart.addMeasureAxis("x", "store_cost");
    
        let yAxis = myChart.addCategoryAxis("y", "store_sales")
    
        let zAxis = myChart.addMeasureAxis("z", "unit_sales");
        zAxis.overrideMax = 400;
    
        myChart.addSeries("recyclable", dimple.plot.bubble);

        myChart.addLegend(180, 10, 360, 20, "right");
        myChart.draw();
    
        cleanAxis(yAxis, 30)
    
}

function errorHandler(error) {
    console.log(error);
}

function cleanYAxis(axis) {
    
}

 var cleanAxis = function (axis, oneInEvery) {
     // This should have been called after draw, otherwise do nothing
     if (axis.shapes.length > 0) {
         // Leave the first label
         let del = false;
         // If there is an...