function Scatter() {
  var data;
  var dispatch = d3.dispatch(chart, "filter");
  var container;

  function chart(g) {
    container = g;
    var chartHeight = 400;
    var chartWidth = 400;

    var xfield = function(d) { 
      return d.data.downs; 
    }
    var yfield = function(d) { 
      return d.data.ups;
    }

    var yScale = d3.scale.linear()
    .domain([0, d3.max(data, yfield)])
    .range([0, chartHeight])

    var xScale = d3.scale.linear()
    .domain([0, d3.max(data, xfield)])
    .range([0, chartWidth])


    var colorScale = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.data.downs })])
    .range(["#17D84D", "#FF1D1D"])
    .interpolate(d3.interpolateHsl)
             

    var circles = g
    .selectAll("circle")
    .data(data)

    circles.enter().append("circle")
    circles.attr({
      cx: function(d,i) { return xScale(xfield(d)); },
      cy: function(d) { return chartHeight - yScale(yfield(d))},
      fill: function(d) { return colorScale(d.data.downs) },
      r: 8,
      stroke: "#000",
      "fill-opacity": 0.5
    })
    .on("click", function(d) {
      console.log(d.data);
    })

    yScale.range([chartHeight, 0])

    var yaxis = d3.svg.axis()
    .scale(yScale)
    .orient("left") //left, right, top
    .ticks(4) //best guess
    var yg = g.append("g")
    yaxis(yg)
    //yg.attr("transform", "translate(" + [leftPadding, topPadding] + ")")
    yg.selectAll("path")
      .style({ fill: "none", stroke: "#810808"})
    yg.selectAll("line")
      .style({ stroke: "#000"})
    yg.selectAll(".tick text").attr("transform", "rotate(-26)")


    var xaxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom") //left, right, top
    .ticks(4) //best guess
    var xg = g.append("g")
    xaxis(xg)
    xg.attr("transform", "translate(" + [0, chartHeight] + ")")
    xg.selectAll("path")
      .style({ fill: "none", stroke: "#810808"})
    xg.selectAll("line")
      .style({ stroke: "#000"})
    xg.selectAll(".tick text").attr("transform", "rotate(-26)")


    var brush = d3.svg.brush()
    brush.x(xScale)
    .y(yScale)
    brush.on("brushend", brushHandler);
    function brushHandler() {
      //console.log(brush.extent())
      var minext = brush.extent()[0];
      var xmin = minext[0];
      var ymin = minext[1];

      var maxext = brush.extent()[1];
      var xmax = maxext[0];
      var ymax = maxext[1];
      
      var filtered = data.filter(function(d) {
        var x = xfield(d);
        var y = yfield(d);
        return x >= xmin 
          && x <= xmax 
          && y >= ymin 
          && y <= ymax;
      })
      console.log("filtered", filtered, filtered.length)
      
      g.selectAll("circle")
      .style("stroke", "#000");
      
      g.selectAll("circle")
      .data(filtered, function(d) { 
        return d.data.id 
      })
      .style("stroke", "#FFFFFF")

      dispatch.filter(filtered)
    }

    brush.extent([
      [
        10000,
        10000
      ],
      [
        20000,
        20000
      ]
    ])
    brushHandler();


    var bg = g.append("g").classed("brush", true)
    brush(bg)

    //g.selectAll("rect").attr("height", 88)
    bg.selectAll(".background")
      .style({visibility: "visible"})
    bg.selectAll(".extent")
      .style({visibility: "visible"})
    bg.selectAll(".resize rect")
      .style({visibility: "visible"})

  }
  chart.data = function(_) {
    if(!arguments.length) return data;
    data = _;
    return chart;
  }
  chart.highlight = function(data) {
    container.selectAll("circle")
    .style("stroke-width", 1)
    .attr("r", 10)
    .data(data, function(d) { return d.data.id })
    .style("stroke-width", 10)
    .attr("r", 20)
  }

  return d3.rebind(chart, dispatch, "on");
}