function BarChart() {
  var margin = {top: 25, right: 25, bottom: 25, left: 25},
    el = d3.select(this).node(),
    width = el.clientWidth - margin.left - margin.right,
    height = el.clientHeight - margin.top - margin.bottom,
    xValue = function(d) { return d.x; },
    yValue = function(d) { return d.y; },
    tickFormat = function(d, i) { return d3.format(".1s")(d) },
    xScale = d3.scaleLinear(),
    yScale = d3.scaleLinear(),
    xAxis = d3.axisBottom().scale(xScale).tickSize(6, 0),
    yAxis = d3.axisLeft().scale(yScale);

  function chart(selection) {
    selection.each(function(data) {
      var dx = (data[0].dx === undefined)
      	? function() { return width/data.length - 1 }
      	: function(d){ return xValue(d.dx) - 1 };

      // Update the x-scale.
      var xDomain = d3.extent(data, xValue);
      console.log(xDomain)
      xScale
          .domain(xDomain)
          .range([0, width]);

      // Update the y-scale.
      var yDomain = [0, d3.max(data, yValue)];
      console.log('yDomain', yDomain)
      yScale
          .domain(yDomain)
          .range([height, 0]);

      // Enter svg
      var svg = d3.select(this).selectAll("svg").data([data]),
      gEnter = svg.enter().append("svg")
      	.append("g")
      	.classed("plot",true);

      // Enter Axes
      gEnter.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

      gEnter.append("g")
        .attr("class", "y axis")
        .call(yAxis)

      //Enter Bars
      var bar = gEnter.selectAll(".bar").data(data),
      barEnter = bar.enter().append("g")
        .attr("class", "bar");

      barEnter.append("rect");
      barEnter.append("text");

      // Update the outer dimensions.
      svg
        .attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom);

      // Update the inner dimensions.
      var g = svg.select("g.plot")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");                

      // Update the x-axis.
      g.select(".x.axis")
          .attr("transform", "translate(0," + yScale.range()[0] + ")")
          .call(xAxis);

      // Update the bars
      g.selectAll("g.bar")
        .attr("transform", function(d){
        		return "translate(" + xScale(xValue(d)) + "," 
				       + yScale(yValue(d)) + ")"
      	});
      g.selectAll(".bar rect")	
        .attr("width", dx)
        .attr("height", function(d) { return height - yScale(yValue(d)); })

      g.selectAll(".bar text")
        .attr("dy", ".75em")
        .attr("x", function(d) { return  .5*dx(d); })
        .attr("y", 6) //stand off from top of bar
        .attr("text-anchor", "middle")
        .text(d => tickFormat(yValue(d)));
    });
  }

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin = _;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.x = function(_) {
    if (!arguments.length) return xValue;
    xValue = _;
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return yValue;
    yValue = _;
    return chart;
  };

  chart.xScale = function (_) {
    if (!arguments.length) return xScale;
    xScale = _;
    return chart;
  };
  
  chart.yScale = function (_) {
    if (!arguments.length) return yScale;
    yScale = _;
    return chart;
  };
  
  chart.xAxis = function (_) {
    if (!arguments.length) return xAxis;
    xAxis = _;
    return chart;
  };
  
  chart.yAxis = function (_) {
    if (!arguments.length) return yAxis;
    yAxis = _;
    return chart;
  };

  return chart;
}