JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>
<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">
<script src="http://nvd3.org/nv.d3.js"></script>
<div class="social-graph">
    <svg>
    </svg>
</div>

JavaScript

var data =  {
    "key": "Series2",
    "color": "#16BECF",
    "values": [
      { 
        "label" : "facebook" ,
        "value" : 8
      } , 
      { 
        "label" : "linkedIn" ,
        "value" : 6
      } , 
      { 
        "label" : "twitter" ,
        "value" : 0
      } , 
      { 
        "label" : "tripadvisor" ,
        "value" : 0
      } , 
      {
        "label" : "googleplus" ,
        "value" : 0
      } 
    ]
  };

  nv.addGraph(function() {
     var chart = nv.models.multiBarHorizontalChart()
         .x(function(d) { return d.label })
         .y(function(d) { return d.value })
         .margin({top: 0, right: 0, bottom: 0, left: 40})
         .showValues(true)
         .tooltips(false)
         .showControls(false).color(['#8EC7D8','#16BECF']);
 
     chart.yAxis
         .tickFormat(d3.format('d'));
      
      chart.xAxis
         .tickFormat(d3.format('d'));
 
     d3.select('.social-graph svg')
         .datum([data])
       .transition().duration(500)
         .call(chart);
 
       nv.utils.windowResize( function() {
         chart.update(); 
      });

   
       return chart;
     },function(){
          d3.selectAll(".nv-bar").on('click',
               function(){
                GD.router.navigate('#guestProfiles', {trigger: true});
                     // petran
           });
     });