JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="test">

</div>

SCSS

#test{
  width: 100%;
  height: 500px;
  .item{
    shape-rendering: crispEdges;
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    transition: all .1s;
    cursor: pointer;
    &:hover{
      stroke: #5B5D5F;
      stroke-width: 2px;
      stroke-dasharray: 6;
      animation: dash 60s linear;
    }
  }
}

//some dummy tooltip
.stacked-bar-chart-tooltip{
  position: absolute;
  background: #fff;
  border: 1px solid;
  border-radius: 3px;
  padding: 3px 11px;
  transform-origin: 100% 100%;
  transform: scale(1);
  transition: opacity .2s ease-in-out, visibility .2s ease-in-out, transform .2s ease-in-out;

  &-hidden{
    opacity: 0;
    transform: scale(.8);
    visibility: hidden;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: -1000;
  }
}

JavaScript

//dummy data
var dummy_data = 
    [{
      "month": "november",
      "year": {
        "2015": {
          "item1": 2500,
          "item2": 3500,
          "item3": 4500
        },
        "2016": {
          "item1": 2300,
          "item2": 3200,
          "item3": 4100
        }
      }
    }, {
      "month": "december",
      "year": {
        "2015": {
          "item1": 2500,
          "item2": 3500,
          "item3": 4500
        },
        "2016": {
          "item1": 2300,
          "item2": 3200,
          "item3": 4100
        }
      }
    }, {
      "month": "january",
      "year": {
        "2015": {
          "item1": 2500,
          "item2": 3500,
          "item3": 4500
        },
        "2016": {
          "item1": 2300,
          "item2": 3200,
          "item3": 4100
        }
      }
    },{
      "month": "february",
      "year": {
        "2015": {
          "item1": 2500,
          "item2": 3500,
          "item3": 4500
        },
        "2016": {
          "item1": 2300,
          "item2": 3200,
          "item3": 4100
        }
      }
    }]
    
var
		//prepare initial stuff
		margin = {top: 20, right: 20, bottom: 80, left: 20},
    chart = d3.select('#test'),
    width = +chart.style('width').replace('px', '') - margin.left - margin.right,
    height = +chart.style('height').replace('px', '') - margin.top - margin.bottom,
    svg = chart
		.append('svg')
		.attr('width', width + margin.left + margin.right)
		.attr('height', height + margin.top + margin.bottom)
		.append('g')
		.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'),
    data = dummy_data,
    stripedPattern = (function(){
      for(var i = 0, ii = data.length; i<ii; i++){
        //implement checker: check for real month
        if(data[i].month==='february'){
          return {monthName: 'february'};
        }
      }
    })(),

    //d3 scale stuff
    x0 = d3.scale.ordinal().rangeRoundBands([0, width], 0.1),
    x1 = d3.scale.ordinal(),
   ...