JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>
 <!DOCTYPE html>
        <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>            
    <body>
        <div id="chartdiv" style="height: 500px; width: 600px;">                                </div>
    </body>

CSS

.title {
    font: 20px Calibri;
    font-weight: bold;
    fill: #1F497D;
}
.bar {
    fill: steelblue;
}

 .bar:hover {
        fill: brown;
    }

.axis {
    font: 10px sans-serif;
}
.axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
}
.x.label 
{
    font-family: Calibri;
    font-weight: bold;
    color: darkgreen;
}
.d3-tip {
    line-height: 1;
    font-weight: bold;
    font-family: Calibri;
    padding: 12px;
    background: #C6D9F1;
    color: #1F497D;
    border-radius: 2px;
}
    /* Creates a small triangle extender for the tooltip */
 .d3-tip:after {
   box-sizing: border-box;
   display: inline;
   font-size: 10px;
   font-family: Calibri;
   width: 100%;
   line-height: 1;
   color: #C6D9F1;
   content: "\25BC";
   position: absolute;
   text-align: center;
   }
/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

JavaScript

var data = [
                   {
                       "PAG": "FACT",
                       "Projects": "3",
                       "High Level Design": "1",
                       "Business Requirements": "1",
                       "Change Impact Document": "2",
                       "MAC Reviews": "3"
                   }
                   ,
                   {
                       "PAG": "Advisory Platforms & Solutions",
                       "Projects": "1",                                                              "MAC Reviews": "1"
                   },
                   {
                       "PAG": "Capital Markets",
                       "Projects": "2"                                                                                                                                          },
                   {
                       "PAG": "Field Management Home Office",
                       "Projects": "3"
                       
                   },
                   {
                       "PAG": "Institutional Wealth Services",
                       "Projects": "1",
                       "Business Requirements": "1",
                       "Change Impact Document": "1"                             
                       
                   },
                   {
                       "PAG": "Traditional Invest Products",
                       "Projects": "2"                                                                                                               
                   },
                   {
                       "PAG": "WM Operations",
                       "Projects": "2",
                       "High Level Design": "2",
                       "Low Level Design": "1"
                   }
                  ];                                                           
                   function keysLen(obj) {
                count = 0;
                index = 0;
                obj.map(function (d, i)...