D3 Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<svg id="chart"></svg>

CSS

#chart rect {
    fill: steelblue;
}

#chart text {
    fill: white;
    font: 10px Helvetica;
    text-anchor: end;
}

JavaScript

var data = [4, 5, 10, 16, 23, 35];

var width = 500;
var barHeight = 20;

var x = (data, width) => {
	return d3.scale.linear()
    .domain([0, data])
    .range([0, width]);
}

console.log(x(4, 500));
var chart = d3.select('#chart')
    .attr('width', width)
    .attr('height', barHeight * data.length);

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

bar.append('rect')
    .attr('width', x)
    .attr('height', barHeight - 1);

bar.append('text')
    .attr('x', (d) => {
    	return x(d, width);
    })
    .attr('y', barHeight / 2)
    .attr('dy', '.35em')
    .text(function(d){
        return d;
    });