JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<body>
  <div class="jumbotron text-center">
         <h1>D3.js Example</h1>
    </div>
    <div id="content" class="container text-center"></div>
</body>

CSS

body {color: #123456; }
rect, text { fill: #123456; }

JavaScript

var chartData = [
        {title: "don't know D3 at all", value: 20},
        {title: "already heard of D3", value: 100},
        {title: "once used D3", value: 35},
        {title: "use D3 regularly", value: 5},
        {title: "contribute to D3", value: 0}];

    var svg = d3.select('#content').append('svg').attr({'width': '500', height: '500'});

    var xScale = function (data) {return d3.scale.linear().range([0, 350]).domain([0, d3.max(data, function(d) {return d.value;})]);};

    var yValues = function (d, i) {return i * 25;};

    var axis = function (data) {return d3.svg.axis().scale(xScale(data)).orient("bottom")};


    //////////////////////////////////////////////////////////
    // BAR CHART
    //////////////////////////////////////////////////////////

    var barChart = svg.append('g');
    var bars = barChart.append('g');

    var bar = bars.selectAll('g')
            .data(chartData)
            .enter()
            .append('g')
                .attr('transform', function(d, i) {return 'translate(0, ' + yValues(d, i) + ')'});

    bar.append('rect')
            .attr({
                'x': 140,
                'width': function(d, i) {return xScale(chartData)(d.value);},
                'height': 20
            })
            .on("mouseover", function (d) {
                console.log("Huston, we get attention for: ", d.title);
            })
            .append("title")
                .text(function(d) {
                    return d.value + " " + d.title;
                });

    bar.append('text')
            .text(function(d) { return d.title; })
            .attr('y', function(d, i) {return 15});

    barChart.append('g')
            .attr('class', 'axis')
            .attr('transform', function () {return 'translate(140,' + chartData.length*25 + ')';})
            .call(axis(chartData));

    bar.on("click", function () {

        bars.selectAll('g')
                .sort(function (a, b) {return d3.ascending(a.value, b.value);})
         ...