var data = [
{"name":"0-5","value":24}, 
{"name":"6-10","value":11}, 
{"name":"11-15","value":24}, 
{"name":"16-20","value":169}, 
{"name":"21-25","value":534}, 
{"name":"26-30","value":313}, 
{"name":"31-35","value":51}, 
{"name":"36-40","value":1}];

var width = 800,
    barWidth = 75,
    height = 600
    gap = 10;

var x = d3.scale.linear()
    .range([0, width]);

var chart = d3.select("#chartdistinctelements")
    .attr("width", width)
    .attr("height", height);

x.domain([0,d3.max(data,function(d){return d.value;})]);
var maxX = d3.max(data,function(d){return d.value;});
  //chart.attr("height", height*0.8);

  var bar = chart.selectAll("g")
      .data(data)
      .enter().append("g")
      .attr("transform", 
        function(d, i) { return "translate(" + (i * (barWidth + gap) ) + "," + (maxX - d.value) + ")"; });

// (height - d.value   )

  bar.append("rect")
      .attr("width", barWidth)
      .attr("height", function(d) { return (d.value); })

  /*bar.append("text")
      .attr("class","value")
      .attr("x", function(d) { return x(d.value); })
      .attr("y", barWidth / 2)
      .attr("dy", ".35em")
      .text(function(d) { return d.value; });*/

  bar.append("text")
      .attr("class","label")
      .attr("x", barWidth/2)
      .attr("y", function(d) { return (d.value) + 30 ; })
      //.attr("dy", ".35em")
      .text(function(d) { return d.name });


function type(d) {
  d.value = +d.value; // coerce to number
  return d;
}
