JSFiddle - React, Tailwind, and code Playground

by Selva Ganesh

HTML

<script src="http://d3js.org/d3.v3.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css">

CSS

.axis path{
    fill: none;
    stroke: #ccc;
    shape-rendering: crispEdges;
}
.axis line {
    fill: none;
}
.tool-tip {
    border: 1px solid red;
    padding: 20px;
}

JavaScript

//Sample Data
var data = [
    {month: 'Jan', amount: 100 },
    {month: 'Feb', amount: 300 },
    {month: 'Mar', amount: 0 },    
    {month: 'Apr', amount: 200 },    
    {month: 'May', amount: 290 },    
    {month: 'Jun', amount: 900 },    
    {month: 'July', amount: 1300 },    
    {month: 'Aug', amount: 300 },    
    {month: 'Sep', amount: 600 },    
    {month: 'Oct', amount: 880 },        
    {month: 'Nov', amount: 1000 },    
    {month: 'Dec', amount: 300 }
    ];


// Beautiful D3 Code

var width = 600,
    height = 400,
    margin = {top: 40, right: 20, bottom: 50, left: 60},
    _height = height - margin.top - margin.bottom,
    _width = width - margin.left - margin.right;
    

var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

var barContainer = svg.append('g')
                    .attr('class', 'bar-container')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); 


var xScale = d3.scale.ordinal(),
    yScale = d3.scale.linear(),
    xAxis = d3.svg.axis(),
    yAxis =  d3.svg.axis();

xScale
    .domain(data.map(function(d){ return d.month; }))
    .rangeRoundBands([0, _width], 0.05);

yScale
    .domain([0, d3.max(data, function(d) { return d.amount; })])
    .range([_height, 0]);

xAxis.scale(xScale).orient('bottom');
yAxis.scale(yScale).orient('left').ticks(6);

  barContainer.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + _height + ")")
      .call(xAxis);

  barContainer.append("g")
      .attr("class", "y axis")
      .call(yAxis);

var bars = barContainer.selectAll('rect')
    .data(data);

bars.enter().append('rect')
    .attr('x', function(d,i) { return xScale(d.month); })
    .attr('y', function(d){ return yScale(0); })
    .attr('height', 0)
    .attr('width', xScale.rangeBand())
    .attr('fill', 'steelblue')
    .on('mouseover', function(d) { 
        var clientRect = this.getBoundingClientRect();                    
       ...