Simple D3.js bar chart with loading from CSV

by dru_zod

HTML

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

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

// https://gist.githubusercontent.com/karmi/a08b6996fbbcfee791d3/raw/b73d563c315f8353e815f482bbfae78f0e102344/CR_cizinci_2000-2014.csv

d3.csv('https://gist.githubusercontent.com/johnburnmurdoch/2e5712cce1e2a9407bf081a952b85bac/raw/08cf82f5e03c619f7da2700d1777da0b5247df18/INTERBRAND_brand_values_2000_2018_decimalised.csv', function(error, data) {
      console.log(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) })
    });