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="text-center" style="padding: 12px 0 32px 0;">
    <h1 style="background-color: #DDEBF8; padding: 4px;">
        D3.js Example
    </h1>
</div>
<div id="content" class="container text-center"></div>
</body>

CSS

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

JavaScript

//////////////////////////////////////////////////////////
    // Data
    //////////////////////////////////////////////////////////

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

    //////////////////////////////////////////////////////////
    // Basics
    //////////////////////////////////////////////////////////

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

    //////////////////////////////////////////////////////////
    // Bar Chart
    //////////////////////////////////////////////////////////

    var barChart = svg.selectAll('g').data(chartData).enter().append('g');

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

    var xScale = d3.scale.linear().range([0, 400]).domain([0,100]);

    bars.append('rect')
                .attr({
                    x: 140,
                    y: function(d,i) {return i * 25},
                    height: 10,
                    width: function(data, index) {return xScale(data.value)}
                });

    bars.append('text')
            .attr({
                y: function(d,i) {return i * 25 + 10}
            })
            .text(function(d,i) {return d.title});

    barChart.append('g')
            .attr({
                "transform": function(d,i) {return "translate(140," + chartData.length *25 + ")"}
            })
            .call(d3.svg.axis().scale(xScale).orient("bottom"));

    bars.on("click", function () {
        console.log("Houston, we get attention here!");
    })