JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id="grafico"></div>
</body>

CSS

.axis path, .axis line {
 fill: none;
 stroke: black;
 shape-rendering: crispEdges;
}
.axis text {
 font-family: sans-serif;
 font-size: 11px;
}
.tooltip {
    font-family: Arial, helvetica, sans-serif;
    font-size: 10px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #FFFFFF;
    box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 4px;
    color: #FFFFFF;
    border-radius: 4px;
}

JavaScript

var datos=[30,5,12,20,2];
var dias=["Lunes","Martes","Miercoles","Jueves","Viernes"];
 
//Alto,ancho y padding
var svgwidth = 500;
var svgheight =330;
var barPadding = 5; 
var leftMargin=20;
var bottomMargin=20;
var topMargin=0;
var max = d3.max(datos); //Valor maximo de los datos
var min = d3.min(datos); //Valor minimo de los datos
var xScale = d3.scale.ordinal() //Escala del eje x
             .rangeRoundBands([0, svgwidth])
            .domain(dias.map(function(d) { return d; }));
var yScale = d3.scale.linear() //Escala del eje yAxis
            .range([svgheight-bottomMargin, topMargin]) //Si pusieramos de 0 a svgheight saldria el eje al reves
            .domain([0, max]);
var y = d3.scale.linear() //Escala del eje yAxis
           .range([topMargin, svgheight-bottomMargin]) //Si pusieramos de 0 a svgheight saldria el eje al reves
           .domain([0, max]);         
var yAxis = d3.svg.axis()
              .scale(yScale)
              .orient("left")
              ;
var xAxis = d3.svg.axis() //Creacion del eje X
              .scale(xScale) //Escala que va a usar el eje
              .orient("bottom") //Los valores saldran por debajo del eje
              ;
 
//Creacion el SVG para "dibujar"
var svg = d3.select("#grafico") 
            .append("svg")
            .attr('height', svgheight)
            .attr('width', svgwidth);
          
var tooltip = d3.tip() //Creacion del tooltip
.attr('class', 'tooltip')
.offset([-10, 0])
.html(function(d) {
  return "Valor barra: <br><strong>" + d+"</strong>"; //Mensaje/contenido del tooltip
});

svg.call(tooltip);
 
//Creacion de las barras
svg.selectAll('rect') //Selecciono todos los rect aunque actualmente no exista ninguno
            .data(datos) //Introducir datos
            .enter()
            .append('rect') //Añadir barra
            .attr('width', svgwidth/datos.length -barPadding) //Establecemos la anchura de las barras y le restamos el padding (espacio entre dos barras para evitar que salgan pegadas). No...