JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chart"></div>

CSS

svg text.name {
  text-anchor: start;
}
 
svg text.value {
  text-anchor: end;
}

JavaScript

function objectLength(obj) {
    var len = 0;
    for (var o in obj) {
        len++;
    }
    return len;
} 

d3.ns.prefix.ex = "http://example.com/";

var data = [
    {name: 'Germany', value:  81305856},
    {name: 'France',  value:  65630692},
    {name: 'Italy',   value: 61261254},
    {name: 'Spain',   value: 47042984}
  ]; 

var width = 420,
    barHeight = 20;

var x = d3.scale.linear().range([0, width]);
var chart = d3.select('#chart').append('svg:svg').attr('width', width);

x.domain([0, d3.max(data, function(d) { return d.value; })]);

chart.attr('height', barHeight * objectLength(data));

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

bar.append('rect')
    .attr('width', function(d) { return x(d.value); })
    .attr('height', barHeight - 1)
    .style('fill', '#ccc');

bar.append('text')
    .attr('x', function(d) { return x(d.value) - 5; })
    .attr('y', barHeight / 2)
    .attr('dy', '.35em')
    .attr('class', 'value')        
    .text(function(d) { return d.value; });

bar.append('text')
    .attr('x', 5)
    .attr('y', barHeight / 2)
    .attr('dy', '.35em')
    .attr('class', 'name')
    .text(function(d) { return d.name; });