JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.6.0/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.6.0/nv.d3.min.js"></script>
<style>

#chart svg {
  height: 400px;
}

</style>


<div id="chart">
  <svg></svg>
</div>

JavaScript

var rndColor = function() {
    var rnd = function(){
      return Math.floor(Math.random() * (255 - 0 + 1) + 0);
    };
    return "rgb("+rnd() + "," + rnd() +"," + rnd() +")";
  };
  
function data(groups, points) {
  var data = [],
      shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
      random = d3.random.normal();

  for (i = 0; i < groups; i++) {
    data.push({
      key: 'Group ' + i,
      values: []
    });

    for (j = 0; j < points; j++) {
      data[i].values.push({
        color: rndColor(),
        x: random(),
        y: random(),
        size: Math.random()
      //, shape: shapes[j % 6]
      });
    }
  }

  return data;
}

nv.addGraph(function() {
  var chart = nv.models.scatterChart()
                .showDistX(true)
                .showDistY(true)
                //.color(d3.scale.category10().range());
   chart.options.color = rndColor;

  chart.xAxis.tickFormat(d3.format('.02f'));
  chart.yAxis.tickFormat(d3.format('.02f'));

  d3.select('#chart svg')
      .datum(data(1,40))
    .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});