JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="chart"></div>

JavaScript

function requestData(){
var address = "1JCe8z4jJVNXSjohjM4i9Hh813dLCNx2Sy";
var request1 = jQuery.ajax( {url: "https://api.bitcoinprivacy.net/utxos/"+address+"/0/1000", dataType: "json"} );
var request2 = jQuery.ajax( {url: "https://api.bitcoinprivacy.net/movements/"+address+"/0/1000", dataType: "json"} );
var result1 = false;
var result2 = false;
request1.done(function(j){ result1 = j; if (result1 && result2) drawChart(result1, result2); });
request2.done(function(j){ result2 = j; if (result1 && result2) drawChart(result1, result2); });
request1.fail(function(jqXHR, textStatus){ alert("error"); });
request2.fail(function(jqXHR, textStatus){ alert("error"); });

}

function drawChart(utxos, moves){
  var svg = dimple.newSvg("#chart", 600, 400);

  var data = [];
  for (i=0;i<utxos.length;i++){
    data.push({value:utxos[i].value/100000000, status:"unspend", tx:utxos[i].tx});
  }
  for (i=0;i<moves.length;i++){
    data.push({value:moves[i].value/100000000, status:"spend", tx:moves[i].tx});
  }
  var myChart = new dimple.chart(svg, data);
  myChart.setBounds(95, 25, 475, 335)
  myChart.addCategoryAxis("x", "tx");
  myChart.addCategoryAxis("y", "status");
  myChart.addMeasureAxis("z", "value");
  myChart.addSeries("status", dimple.plot.bubble);
  myChart.addLegend(240, 10, 330, 20, "right");
  myChart.draw();
  
}

requestData();