title: d3 Reusable histogram
body: <p>I've been trying to implement Reusability on a histogram plotted using d3.
  I want that after plotting of the dataset, I want to plot statistical mean, variance etc. on the same plot.These would be user driven, basically I want to use the same plot. </p>
  
  <p>Here's my attempt on coding the skeleton histogram code</p>
  
  <pre><code>function histogram(){
  
  //Defaults
   var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = 760,
    height = 200;
  
  function chart(selection){
  
      selection.each(function(d,i){
  
      var x = d3.scale.linear()
      .domain( d3.extent(d) )
      .range( [0, width] );
  
      var data = d3.layout.histogram()
          //Currently generates 20 equally spaced bars
          .bins(x.ticks(20))
          (d);
  
      var y = d3.scale.linear()
          .domain([0, d3.max(d) ])
          .range([ height - margin.top - margin.bottom, 0 ]);
  
      var xAxis = d3.svg.axis()
          .scale(x)
          .orient("bottom");
  
      var yAxis = d3.svg.axis()
          .scale(y)
          .orient("left");
  
      var svg = d3.select(this).append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
      var bar = svg.selectAll(".bar")
          .data(data)
        .enter().append("g")
          .attr("class", "bar");
  
      /*
          Corrected bars
           bar.append("text")
              .attr("dy", ".75em")
              .attr("y", 6)
              .attr("x", x(data[0].dx) / 2)
              .attr("text-anchor", "middle")
              .text(function(d) { return formatCount(d.y); });
          */
  
      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis); 
  
      svg.append("g")
          .attr("class","y axis")
          .call(yAxis);
  
      bar.append("rect")
          .attr("x", function(d,i){ return x(d.x); })
          .attr("width", x(data[0].dx) - 1)
          .attr('y',height)    
        .transition()
        .delay( function(d,i){ return i*50; } )
          .attr('y',function(d){  return y(d.y) })
          .attr("height", function(d) { return height - y(d.y); });
  
  
      });
  
  }
  
   //Accessors//       
  chart.width = function(value) {
      if (!arguments.length) return width;
      width = value;
      return chart;
  };
  
   chart.height = function(value) {
      if (!arguments.length) return height;
      height = value;
      return chart;
  };
  
  return chart;
  
  }
  </code></pre>
  
  <p>It's assigning a negative width for bars. My input dataset would simply be an array of numbers and I need to plot the frequency distribution</p>