// Configurable params
// Click on the number and see a magic slider appears to tweak it.
var config = {
  width: 441,
  height: 500,
  textFontSize: '12px',
  csvDataFile: 's_action.csv',
//  csvDataFile: 'c_ip.csv'
};

d3.csv(config.csvDataFile, function (json) {
  data = json;
  drawChart(data);
});

function drawChart(data) {

  var svg = d3.select('svg');
  var gRoot = svg.append('svg:g')
          .attr('transform', 'translate(25, 25)');

  //var data = d3.shuffle(d3.range(1, 21));
  var colorScale1 = d3.scale.linear()
    .domain(d3.extent(data, function (d) { return d.value; }))
          .interpolate(d3.interpolateRgb)
          .range(['#ff0000', '#0000ff']);
  var colorScale = d3.scale.category20();


  var keyScale = d3.scale.ordinal()
    .domain(data.map(function(d) {
      return d.key;
    }))
    .rangeRoundBands([0, config.height], 0.3, 0.5);

  var maxValue = d3.max(data, function (d) {
    return +d.value;
  });
  var valueScale = d3.scale.linear()
    .domain([0, maxValue])
    .range([0, config.width]);


  var barEnter = gRoot.selectAll('.bar')
    .data(data)
    .enter();

  barEnter
    .append('svg:rect')
      .attr({
        x: 0,
        y: function (d, i) {
          return keyScale(d.key);
        },
        width: 0,
        height: keyScale.rangeBand(),
        fill: function (d) {
          return colorScale(d.value);
        }
      })
    .attr({
        width: function (d, i) {
          return valueScale(d.value);
        }
      })

  barEnter
    .append('svg:text')
    .attr({
        x: function (d) {
          return valueScale(d.value) + 5;
        },
        y: function (d, i) {
          return keyScale(d.key) + keyScale.rangeBand()/2;
        }
    })
    .text(function (d) { 
        return d.key + ' (' + d.value + ')'; 
      })
    .style({
        'font-size': config.textFontSize,
        'alignment-baseline': 'middle'
      })
}