JSFiddle - React, Tailwind, and code Playground

by Nivaldo

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>
        <title>
            New Projects Count
        </title>    
    <body>
        <div id="chartdiv" style="height: 500px; width: 600px;">                        
<h4>Projects By PAG</h4>
<input id="sorting" type="checkbox" name="SortChart" />&nbsp;
            <label for="sorting" class="label">Sort Values</label>
 </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 PAGdetails=
            [
             {
                 "PAG": "FACT",
                 "Count": "2"
             },
             {
                 "PAG": "Traditional Invest Products",
                 "Count": "6"
             },             
             {
                 "PAG": "WM Operations",
                 "Count": "2"
             },
             {
                 "PAG": "Capital Markets",
                 "Count": "2"
             },
             {
                 "PAG": "Field Management Home Office",
                 "Count": "3"
             },
             {
                 "PAG": "Institutional Wealth Services",
                 "Count": "1"
             },
            {
                "PAG": "Advisory Platforms & Solutions",
                "Count": "1"
            }];
            
              var margin = { top: 20, right: 20, bottom: 30, left: 40 },
                    width = parseInt(d3.select("#chartdiv").style("width")) - margin.left - margin.right,
                    height = parseInt(d3.select("#chartdiv").style("height")) - margin.top - margin.bottom,
                    padding = 100;                
               

                var x = d3.scale.ordinal().domain(PAGdetails.map(function (d) { return d.PAG; }))
                    .rangeRoundBands([0, width - padding], .1);

                var y = d3.scale.linear().domain([0, d3.max(PAGdetails, function (d) { return d.Count; })]).nice().range([height - padding - margin.top - margin.bottom, 0]);

                var xAxis = d3.svg.axis()
                    .scale(x)
                     .tickSize(0)
                    //.tickPadding(8)
                    .orient("bottom");

                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left")
                    //.tickPadding(8)
                    .tickFormat(d3.format(".0d"));
                    var tip = d3.tip()
                        .attr('class', 'd3-tip')
             ...