JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/novus/nvd3/master/lib/d3.v2.min.js"></script>
<script src="https://raw.github.com/novus/nvd3/master/nv.d3.min.js"></script>
<link rel="stylesheet" href="https://raw.github.com/novus/nvd3/master/src/nv.d3.css">
<script src="https://raw.github.com/novus/nvd3/master/src/tooltip.js"></script>
<script src="https://raw.github.com/novus/nvd3/master/src/utils.js"></script>
<script src="https://raw.github.com/novus/nvd3/master/src/models/legend.js"></script>
<script src="https://raw.github.com/novus/nvd3/master/src/models/axis.js"></script>
<script src="https://raw.github.com/novus/nvd3/master/src/models/distribution.js"></script>
<script src="https://raw.github.com/novus/nvd3/master/src/models/scatter.js"></script>
<script src="https://raw.github.com/novus/nvd3/master/src/models/scatterPlusLineChart.js"></script>
<script src="https://raw.github.com/novus/nvd3/master/lib/fisheye.js"></script>
<div id="offsetDiv">
  <div id="test1" class="chartWrap">
    <svg></svg>
  </div>
</div>




<script src="src/nv.d3.js"></script>

CSS

/********************
 * HTML CSS
 */

.chartWrap {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/********************
 * TOOLTIP CSS
 */

.nvtooltip {
  position: absolute;
  background-color: rgba(255, 255, 255, 1);
  padding: 1px;
  border: 1px solid rgba(0, 0, 0, .2);
  z-index: 10000;
  font-family: Arial;
  font-size: 13px;
  transition: opacity 500ms linear;
  -moz-transition: opacity 500ms linear;
  -webkit-transition: opacity 500ms linear;
  transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -webkit-transition-delay: 500ms;
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.nvtooltip.x-nvtooltip,
.nvtooltip.y-nvtooltip {
  padding: 8px;
}

.nvtooltip h3 {
  margin: 0;
  padding: 4px 14px;
  line-height: 18px;
  font-weight: normal;
  background-color: #f7f7f7;
  text-align: center;
  border-bottom: 1px solid #ebebeb;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

.nvtooltip p {
  margin: 0;
  padding: 5px 14px;
  text-align: center;
}

.nvtooltip span {
  display: inline-block;
  margin: 2px 0;
}

.nvtooltip-pending-removal {
  position: absolute;
  pointer-events: none;
}

/********************
 * SVG CSS
 */

svg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Trying to get SVG to act like a greedy block in all browsers */
  display: block;
  width: 100%;
  height: 100%;
}

svg text {
  font: normal 12px Arial;
}

svg .title {
  font: bold 14px Arial;
}

.nvd3 .nv-background {
  fill: white;
  fill-opacity: 0;
...

JavaScript

// nvd3 scatterpluslinechart example from https://github.com/novus/nvd3/tree/master/examples
var chart1;
nv.addGraph(function() {
  chart1 = nv.models.scatterPlusLineChart()
    .showDistX(true)
    .showDistY(true)
    .height(400)
    .color(d3.scale.category10().range());

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

  d3.select('#test1 svg')
    .datum(randomData(4, 40))
    .transition().duration(500)
    .call(chart1);

  nv.utils.windowResize(chart1.update);

  chart1.dispatch.on('stateChange', function(e) {
    nv.log('New State:', JSON.stringify(e));
  });

  return chart1;
});


function randomData(groups, points) { //# groups,# points per group
  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: [],
      slope: Math.random() - 0.01,
      intercept: Math.random() - 0.5
    });

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

  return data;
}