var data = [

  {key:1, value:37},

  {key:1.5, value:13},

  {key:2.5, value:1},

  {key:3, value:4},

  {key:3.5, value:14},

  {key:4, value:18},

  {key:4.5, value:21},

  {key:5, value:17},

  {key:5.5, value:16},

  {key:6, value:5},

  {key:6.5, value:4}

];

​

var margin = {top: 10,

    right: 41,

    bottom: 42,

    left: 10

};

​

var width = 400 - margin.left - margin.right,

    height = 250 - margin.top - margin.bottom;

​

var y = d3.scale.linear()

    .domain([0, d3.max(data, function(d) { return d.value })])

    .range([height ,0 ]);

​

var x = d3.scale.linear()

    .domain([0, d3.max(data, function(d) { return d.key; })+1])

    .rangeRound([0, width]);

​

var xAxis = d3.svg.axis()

    .scale(x)

    .orient("bottom");

​

var yAxis = d3.svg.axis()

    .scale(y)

    .orient("left");

​

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

    .attr("width", width + margin.left + margin.right)

    .attr("height", height + margin.top + margin.bottom)

    .style("margin-left",15+"px");

​

var bar = chart.selectAll("g")

    .data(data)

  .enter().append("g")

    .attr("transform", function(d, i) { return "translate(" + x(d.key) + ",0)"; });

​

var brush = d3.svg.brush()

    .x(x)

    .on("brush", brushed)

    .on("brushend", brushend);

​

function brushed() {

  var e = brush.extent(); //range of the brush e[0] min e[1] max

  chart.selectAll(".bar").classed("hidden", function(d,id) {

        /*d.key >= e[0] && d.key <= e[1]*/

        /*console.log( "key : "+d.key+" start: "+e[0]+" end: "+e[1]);*/

        return(d.key >= e[0] && d.key <= e[1] ? false : true)

    });

}

​

function brushend() {

    if (brush.empty()) chart.selectAll(".hidden").classed("hidden", false);

}

​

function resizePath(d) {

    var e = +(d == "e"),

    x = e ? 1 : -1,

    y = height / 3;

    return "M" + (.5 * x) + "," + y

    + "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6)

    + "V" + (2 * y - 6)

    + "A6,6 0 0 " + e + " " + (.5 * x) + "," + (2 * y)

    + "Z"

    + "M" + (2.5 * x) + "," + (y + 8)

    + "V" + (2 * y - 8)

    + "M" + (4.5 * x) + "," + (y + 8)

    + "V" + (2 * y - 8);

}

​

chart.selectAll(".bar")

    .data(data)

  .enter().append("rect")

    .attr("class", "bar")

    .attr("x", function(d) { return x(d.key); })

    .attr("y", function(d) { return y(d.value); })

    .attr("height", function(d) { return height - y(d.value); })

    .attr("width", x(0.5))

    .style("stroke","white")

    .append("title")

    .text(function(d) { return d.key;});

​

chart.append("g")

    .attr("class", "x axis")

    .attr("transform", "translate(0," + height + ")")

    .call(xAxis);

​

  chart.append("text") //Add chart title

    .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom) + ")")

    .style("text-anchor", "middle")

    .text("Petal Length");  

​

chart.append("g")

    .attr("class", "y axis")

    .call(yAxis)

​

​

​

chart.append("g")

  .attr("class", "x brush")

  .call(brush)  //call the brush function, causing it to create the rectangles

 .selectAll("rect") //select all the just-created rectangles

  .attr("y", -6)

  .attr("height", (height + margin.top)) //set their height

​

chart.selectAll(".resize").append("path").attr("d", resizePath);