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'; }); });
<div id="chart"></div>
.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; }