var nobelData = [
  {key:'United States', value:200},
  {key:'United Kingdom', value:80},
  {key:'France', value:47},
  {key:'Switzerland', value:23},
  {key:'Japan', value:21},
  {key:'Austria', value:12}
];

var chartHolder = d3.select('#nobel-bar');
var margin = {top:20, right:20, bottom:30, left:40};
var boundingRect = chartHolder.node().getBoundingClientRect();
var width = boundingRect.width - margin.left - margin.right,
    height = boundingRect.height - margin.top - margin.bottom;

var xScale = d3.scaleBand().rangeRound([0,width]).padding(.1);

var yScale = d3.scaleLinear().rangeRound([height,0]);

var svg = d3.select('#nobel-bar').append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.append('g').classed('chart',true)
	.attr('transform', 'translate(' + 
        margin.left + "," + margin.top + ')');

var update = function(data){
  xScale.domain(d3.range(data.length));
  yScale.domain([0, d3.max(data.map(function(d){
    return d.value;
  }))])
  
  var bars = svg.selectAll('.bar').data(data);
  
  bars.enter()
    .append('rect').classed('bar',true);
  
  bars = svg.selectAll('.bar')
  	.attr('height', function(d,i){
    	return height-yScale(d.value); })
  	.attr('width', xScale.bandwidth())
  	.attr('y', function(d,i){
    	return yScale(d.value); })
  	.attr('x', function(d, i){
    	return xScale(i); });
  
  bars.exit().remove();
	}

update(nobelData);