JSFiddle - React, Tailwind, and code Playground

by Hao Wu

CSS

body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      width: 960px;
      height: 500px;
      position: relative;
    }

    svg {
      width: 100%;
      height: 100%;
      position: center;
    }

    .toolTip {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      position: absolute;
      display: none;
      width: auto;
      height: auto;
      background: none repeat scroll 0 0 white;
      border: 0 none;
      border-radius: 8px 8px 8px 8px;
      box-shadow: -3px 3px 15px #888888;
      color: black;
      font: 12px sans-serif;
      padding: 5px;
      text-align: center;
    }

    text {
      font: 10px sans-serif;
      color: white;
    }

    text.value {
      font-size: 120%;
      fill: white;
    }

    .axisHorizontal path {
      fill: none;
    }

    .axisHorizontal .tick line {
      stroke-width: 1;
      stroke: rgba(0, 0, 0, 0.2);
    }

    .bar {
      fill: steelblue;
      fill-opacity: .9;
    }

JavaScript

data = [{
    label: "Category 1",
    value: 19
  },
  {
    label: "Category 2",
    value: 5
  },
  {
    label: "Category 3",
    value: 13
  },
  {
    label: "Category 4",
    value: 17
  },
  {
    label: "Category 5",
    value: 19
  },
  {
    label: "Category 6",
    value: 27
  }
];


var div = d3.select("body").append("div").attr("class", "toolTip");

var axisMargin = 20,
  margin = 40,
  valueMargin = 4,
  width = parseInt(d3.select('body').style('width'), 10),
  height = parseInt(d3.select('body').style('height'), 10),
  barHeight = (height - axisMargin - margin * 2) * 0.4 / data.length,
  barPadding = (height - axisMargin - margin * 2) * 0.6 / data.length,
  data, bar, svg, scale, xAxis, labelWidth = 0;

max = d3.max(data, function(d) {
  return d.value;
});

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


bar = svg.selectAll("g")
  .data(data)
  .enter()
  .append("g");

bar.attr("class", "bar")
  .attr("cx", 0)
  .attr("transform", function(d, i) {
    return "translate(" + margin + "," + (i * (barHeight + barPadding) + barPadding) + ")";
  });

bar.append("text")
  .attr("class", "label")
  .attr("y", barHeight / 2)
  .attr("dy", ".35em") //vertical align middle
  .text(function(d) {
    return d.label;
  }).each(function() {
    labelWidth = Math.ceil(Math.max(labelWidth, this.getBBox().width));
  });

scale = d3.linear()
  .domain([0, max])
  .range([0, width - margin * 2 - labelWidth]);

xAxis = d3.svg.axis()
  .scale(scale)
  .tickSize(-height + 2 * margin + axisMargin)
  .orient("bottom");

bar.append("rect")
  .attr("transform", "translate(" + labelWidth + ", 0)")
  .attr("height", barHeight)
  .attr("width", 0)
  .transition()
  .duration(1500)
  .attr("width", function(d) {
    return scale(d.value);
  });

bar.append("text")
  .attr("class", "value")
  .attr("y", barHeight / 2)
  .attr("dx", -valueMargin + labelWidth) //margin right
  .attr("dy", ".35em") //vertical align middle
 ...