D3 fiddle

by Martin Večeřa

HTML

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

CSS

.bar {
    background:  #99f;
    height: 20px;
    margin-bottom: 5px;
    margin-left: 50px;
    color: white;
}
.label {
    float: left;
    width: 50px;
}

body {
    font-family: sans-serif;
    font-size: 12px;
}

JavaScript

d3.csv('https://gist.githubusercontent.com/karmi/a08b6996fbbcfee791d3/raw/37f6f097e1c05763f9c160e2992bba98d925fe72/CR_cizinci_2000-2014.csv',

function (data) {
     
    var chart = d3.select("#chart");
    var rows = d3.entries(data[0]);        
    var row = chart.selectAll('div')
        .data(rows)
        .enter()
        .append('div');

    row.append('div')
        .text(function (d) {
            return d.key;
        })
        .classed('label', true);

    row.append('div')
        .classed('bar', true)
        .text(function (d) {
            return d.value;
        })
        .style('width', function (d) {
        return d.value / 2000 + 'px';
    });

});