JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="analyticsYearConsm" style="width:100%; height : 300px;>

</div>

CSS

/* .xAxisBar path, .yAxisBar path{
  stroke : #6a6d6f;
}
.yAxisBar text, .xAxisBar text{
  fill : #6a6d6f;
} */
  #tooltipAnalyticsYear {
    background-color: rgba(187, 187, 187, 0.7);
    border-radius: 5px;
    width : 70px;
    height: auto;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
  }
  
  body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
  }

JavaScript

var parseTime = d3.timeParse("%Y-%m-%d");

var data=[
      {date:parseTime("2013-01-01"),
      value:50},
      {date:parseTime("2013-02-01"),
      value:60},
      {date:parseTime("2013-03-01"),
      value:20},
      {date:parseTime("2013-04-01"),
      value:40},
      {date:parseTime("2013-05-01"),
      value:65},      
      {date:parseTime("2013-06-01"),
      value:50},
      {date:parseTime("2013-07-01"),
      value:70},
      {date:parseTime("2013-08-01"),
      value:20},
      {date:parseTime("2013-09-01"),
      value:60},
      {date:parseTime("2013-10-01"),
      value:80},
       {date:parseTime("2013-11-01"),
      value:60},
      {date:parseTime("2013-12-01"),
      value:80}
]; 

   var tooltip = d3.select('body').append('div')
     .attr('id', 'tooltipAnalyticsYear');
     
  var zoomReset = d3.select('body').append('button')
  .attr('id', 'resetZoom').text("show all").style("opacity", 0);
     

   var margin = {
     top: 20,
     right: 10,
     bottom: 60,
     left: 50
   };


   var svg = d3.select("#analyticsYearConsm").append("svg")
   .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 "+($("#analyticsYearConsm").width())+" "+($("#analyticsYearConsm").height()));
     
  var g = svg.append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
     
//console.log($("#analyticsYearConsm").width(), $("#analyticsYearConsm").height())
   width = $("#analyticsYearConsm").width() - margin.left - margin.right,
   height = $("#analyticsYearConsm").height() - margin.top - margin.bottom;

  var minY = d3.min([data], function(d) {
    return d3.min(d, function(e) {
      return e.value
    })
  });
  var maxY = d3.max([data], function(d) {
    return d3.max(d, function(e) {
      return e.value
    })
  });


   var y = d3.scaleLinear()
    .range([height, 0])
    .domain([0, maxY+10]);
    
   var xBand = d3.scaleBand()
          .range([0, width])
          .padding(0.2);
          
  var...