JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.css">
<div id="chart">
  <svg></svg>
</div>

CSS

#chart svg {
  height: 400px;
}

.nv-series.disabled path {
    fill-opacity: 0;
}

JavaScript

function getData(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({
        x: random()
      , y: Math.floor(Math.random() * 33)
      , size: Math.random()
      , shape: shapes[i]
      });
    }
  }

  return data;
};

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

  chart.xAxis.tickFormat(d3.format('.02f'));
  chart.yAxis.tickFormat(d3.format('.02f'));
  chart.yAxis.tickValues(['2','4','8','16','32']);

  chart.scatter.onlyCircles(false);
  d3.select('#chart svg')
      .datum(getData(4,40))
    .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  //return chart;
//});
var shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'];
d3.selectAll('.nv-series').each(function(d,i) {
    var group = d3.select(this),
        circle = group.select('circle');
    var color = circle.style('fill');
    circle.remove();
    var symbol = group.append('path')
        .attr('d', d3.svg.symbol().type(shapes[i]))
        .style('stroke', color)
        .style('fill', color)
        // ADJUST SIZE AND POSITION
        .attr('transform', 'scale(1.5) translate(-2,0)')
});