Simple D3.js bar chart with loading from CSV

by dru_zod

HTML

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


<script id="mycsvdata" type="text/csv">
name,value,year,lastValue
Adur,2009.25,38.69,
Adur,2009.5,38.38,38.69
Adur,2009.75,36.73,38.38
Adur,2010,35.67,36.73
Adur,2010.25,38.41,35.67
Adur,2010.5,38.75,38.41
Adur,2010.75,34.1,38.75
Adur,2011,35.18,34.1
</script>

CSS

body { font: normal 12px Helvetica, sans-serif;
       margin: 4em; 
       position: relative; }
.label { position: absolute;
         left: 0; }
.bar { color: white;
       background-color: #7BC8FB;
       padding: 0.5em;
       position: absolute;
       left: 3em; }

JavaScript

var mycsvdata = document.getElementById('mycsvdata').innerHTML;

console.log(mycsvdata);

d3.csv.parse(mycsvdata, function(error, data) {
      var years = d3.keys(data[0])
      var values = d3.values(data[0]).map(function(d) { return +d })

      var chart = d3.select('#chart')

      var label = chart.selectAll('div').data(years)
      var bar   = chart.selectAll('div').data(values)

      label.enter()
        .append('div')
        .attr('class', 'label')
        .style('top', function(d, i) { return i*40 + 'px' })
        .text(function(d) { return d })

      bar.enter()
        .append('div')
        .attr('class', 'bar')
        .style('width', function(d, i) { return Math.round(d/1000) + 'px' })
        .style('top', function(d, i) { return i*40 - 7 + 'px' })
        .text(function(d) { return d3.format(',')(d) })
    });