function make_scatter_chart(data) {
  var svg, chart_group, data_extent, canvas, margins, max_draw_space, doc_state
  var plot = "scatter_chart"
  var button_keys = keys(data)

  svg = make_chart_svg(plot)
  if (svg.select("g." + plot + "_group").empty()) {
    chart_group = svg.append("g").attr("class", plot + "_group")
    charts_config.document_state.scatter = button_keys[0]
  } else {
    chart_group = svg.select("g." + plot + "_group")
  }
  chart_group.data(data)

  doc_state = charts_config.document_state.scatter
  data = data[doc_state]
  data_extent = {
    "max": {
      "x": d3.max(data, function(d) {return d.x}),
      "y": d3.max(data, function(d) {return d.y})
    },
    "min": {
      "x": d3.min(data, function(d) {return d.x}),
      "y": d3.min(data, function(d) {return d.y})
    }
  }

  canvas = extract_canvas_from_svg(svg)
  margins = make_margins(chart_group, canvas, data_extent, true)
  max_draw_space = calculate_maximum_drawing_space(canvas, margins)
  make_buttons(chart_group, margins, canvas, max_draw_space, button_keys)
  color_buttons(chart_group, doc_state)
  make_title(chart_group, ["Scatter Chart"], margins, canvas, max_draw_space)
  var x_scale = d3.scaleLinear().domain([data_extent.min.x, data_extent.max.x]).range([0, max_draw_space.x])
  var y_scale = d3.scaleLinear().domain([data_extent.max.y, data_extent.min.y]).range([0, max_draw_space.y])

  var x_axis_label = "x values"
  var y_axis_label = "y values"
  make_axes(chart_group, x_scale, y_scale, canvas, margins, max_draw_space, x_axis_label, y_axis_label)

  var previous_points = chart_group.selectAll("g." + plot + "_scatter_group").size()
  var current_points = data.length

  var scatter_group = chart_group.selectAll("g." + plot + "_scatter_group").data(data)

  if (previous_points < current_points) {
    // Add the points
    chart_group.selectAll("g." + plot + "_scatter_group")
              .data(data)
              .enter()
              .append("g")
              .attr("class", plot + "_scatter_group")
              .append("circle")
              .attr("r", charts_config.plots.scatter.point.radius)
              .attr("fill", function(d, i) {return charts_config.colors.palette[ i % charts_config.colors.palette.length]})
              .style("opacity", charts_config.plots.scatter.opacity.non_hover)
  } else if (previous_points > current_points) {
    scatter_group.exit().transition().delay(function(d, i) {return 100 + i * 10})
    .attr("transform", "translate(0,0)")
  } else {

  }

  scatter_group = d3.selectAll("g." + plot + "_scatter_group")
  scatter_group.transition().delay(function(d, i) {return 100 + i * 10})
               .attr("transform", function(d, i) {return "translate(" + (x_scale(d.x) + margins.x.left + margins.axes.y) + "," + (y_scale(d.y)+ margins.y.top + margins.title + margins.buttons) + ")"})

  scatter_group.on("mouseover", mouseoverFunction)
  scatter_group.on("mouseout", mouseoutFunction)

  function mouseoverFunction(d, i) {
   var d = d3.select(this).datum()
   make_tooltip(d3.select(this), ["x: "+d.x, "y: "+d.y], chart_group, canvas, margins)
  }

  function mouseoutFunction(d, i) {
   chart_group.select("g.tooltip_group").remove()
  }
  chart_group.select("g.axes").raise()


}