D3 fiddle
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('http://machdeins.flywheelsites.com/wp-admin/admin.php?page=pmxe-admin-manage&id=1&action=get_file&_wpnonce=4cdf86d45c',
function (data) {
console.log(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';
});
});