JSFiddle - React, Tailwind, and code Playground

by Nivaldo

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="reports"></div>

CSS

.axis {
  font: 10px sans-serif;
}
.title { font-size: 13px; }
.axis path {display: none;}

.x.axis .tick {
	display: none;
}

.y.axis line {
  stroke: #fff;
  stroke-opacity: .3;
  shape-rendering: crispEdges;
}
.y.axis.tick:first-child line {
    stroke: #000;
    stroke-opacity: 1;
}
.legend-text {
	font-size: 12px;
}

rect {
	fill-opacity: .5;
}
rect:hover {
	fill-opacity: 1;
}

JavaScript

var margin, transition_ease, transition_duration;
transition_ease = 'bounce'
transition_duration = 500
margin = {
  top: 30,
  right: 3,
  bottom: 10,
  left: 40
};
var width = 650 - margin.left - margin.right;
var height = 350 - margin.top - margin.bottom;
data = [
  {
    "name": "Verzending factuur",
    "value": 2250,
    "color": "rgba(51, 255, 0, .5)"
  },
  {
    "name": "Eerste herinnering",
    "value": 2750,
    "color": "blue"
  },
  {
    "name": "Tweede herinnering",
    "value": 2650,
    "color": "pear"
  },
  {
    "name": "Aanmaning",
    "value": 4550,
    "color": "gold"
  },
  {
    "name": "Herinnering aanmaning",
    "value": 1450,
    "color": "teal"
  },
  {
    "name": "Pregerechterlijk",
    "value": 2350,
    "color": "red"
  },
  {
    "name": "Gerechterlijk",
    "value": 5150,
    "color": "silver"
  },
  {
    "name": "Einde traject",
    "value": 2550,
    "color": "pink"
  }
];

svg = d3.select('.reports')
    .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] + ')');

var y = d3.scale.linear().range([height, 0]);
var x = d3.scale.ordinal().rangeRoundBands([margin.left, width], .2).domain(data.map(function(d) {
  return d.value;
}));

var xAxis = d3.svg.axis().scale(x).orient('bottom');
var yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-width).ticks(10);

y.domain([
  0, d3.max(data, (function(_this) {
    return function(d) {
      return d.value;
    };
  })(this))
]);

x.domain(data.map((function(_this) {
  return function(d) {
    return d.name;
  };
})(this)));

svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0, ' + height + ')')
    .call(xAxis);

var groups = svg.selectAll('.gData')
    .data(data);

groups.exit().remove();    

var groupsEnter = groups.enter()
    .append('g')
    .attr('class',...