JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/novus/nvd3/v1.7.1/build/nv.d3.min.js"></script>
<div id="chart"><svg width="500" height="300" /></div>

CSS

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


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

/********************
  Box shadow and border radius styling
*/
.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {
  -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;
}

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

.nvtooltip {
  position: absolute;
  background-color: rgba(255,255,255,1.0);
  padding: 1px;
  border: 1px solid rgba(0,0,0,.2);
  z-index: 10000;

  font-family: Arial;
  font-size: 13px;
  text-align: left;
  pointer-events: none;

  white-space: nowrap;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*Give tooltips that old fade in transition by
    putting a "with-transitions" class on the container div.
*/
.nvtooltip.with-transitions, .with-transitions .nvtooltip {
  transition: opacity 250ms linear;
  -moz-transition: opacity 250ms linear;
  -webkit-transition: opacity 250ms linear;

  transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -webkit-transition-delay: 250ms;
}

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

.nvtooltip h3 {
  margin: 0;
  padding: 4px 14px;
  line-height: 18px;
  font-weight: normal;
  background-color: rgba(247,247,247,0.75);
  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 table {
  margin: 6px;
  border-spacing:0;
}


.nvtooltip table td {
  padding: 2px 9px 2px 0;
  vertical-align: middle;
}

.nvtooltip table td.key {
 ...

JavaScript

var dataSet = [{hour: "01",yval: "188",foo: "0", goo:"0", bar:"0"}, 
               {hour: "02",yval: "63",foo: "33", goo:"0", bar:"1"}, 
               {hour: "14",yval: "241",foo: "0", goo:"2", bar:"0"}, 
               {hour: "15",yval: "241",foo: "27", goo:"0", bar:"0"}, 
               {hour: "19",yval: "241",foo: "0", goo:"0", bar:"0"},
               {hour: "22",yval: "318",foo: "12", goo:"0", bar:"1"},
               {hour: "08",yval: "118",foo: "2", goo:"0", bar:"1"},
               {hour: "22",yval: "48",foo: "0", goo:"2", bar:"0"},
               {hour: "21",yval: "31",foo: "1", goo:"0", bar:"1"},
               {hour: "12",yval: "38",foo: "0", goo:"2", bar:"0"},
               {hour: "16",yval: "138",foo: "36", goo:"0", bar:"0"},
               {hour: "05",yval: "344",foo: "0", goo:"1", bar:"1"},
               {hour: "08",yval: "218",foo: "39", goo:"0", bar:"1"},
               {hour: "03",yval: "18",foo: "41", goo:"0", bar:"0"},
               {hour: "18",yval: "98",foo: "23", goo:"0", bar:"0"},
               {hour: "18",yval: "98",foo: "0", goo:"2", bar:"1"},
];
               
function prepareData (data) {
    return [{
        key:     'Group 1',
        values:  data.map(function (item) {
            item.shape = item.bar == "0" ? 'circle' : 'triangle-down';
            item.x = Number(item.hour);
            item.y = Number(item.yval);
            item.size = 0.1;
            item.disabled = Math.random() > 0.4;
            return item;
        })
    }]
}
               
nv.addGraph(function() {
  var chart = nv.models.scatterChart()
                .showDistX(true)    
                .showDistY(true)
                .showLegend(false)
  
  //Axis settings
  chart.xAxis.tickFormat(d3.format('3.0f'));
  chart.yAxis.tickFormat(d3.format('3.0f'));

  d3.select('#chart svg')
      .datum(prepareData(dataSet))
      .call(chart)
  
  // A bit tacky but works
  var fooscale = d3.scale.linear().domain([0, 50]).range(["#87CEFF", "#0000FF"]);
 ...