// This is an example Chaism plugin that uses D3 to make a scatter plot. 
// Draws from this Scatter Plot example http://bl.ocks.org/curran/134ed87c99257e3f2e31
function ScatterPlot() {

  var my = ChiasmComponent({

    margin: {
      left:   30,
      top:    30,
      right:  30,
      bottom: 30
    },
    
    xColumn: Model.None,
    yColumn: Model.None,

    // "r" stands for radius.
    rColumn: Model.None,

    // The circle radius used if rColumn is not specified.
    rDefault: 3,

    // The range of the radius scale if rColumn is specified.
    rMin: 0,
    rMax: 10,

    fill: "black",
    stroke: "none",
    strokeWidth: "1px"

  });

  var xScale = d3.scale.linear();
  var yScale = d3.scale.linear();
  var rScale = d3.scale.sqrt();

  my.el = document.createElementNS("http://www.w3.org/2000/svg", "g");
  var g = d3.select(my.el).append("g");

  // Respond to changes in size and margin.
  // Inspired by D3 margin convention from http://bl.ocks.org/mbostock/3019563
  my.when(["box", "margin"], function(box, margin){

    my.innerBox = {
      width: box.width - margin.left - margin.right,
      height: box.height - margin.top - margin.bottom
    };

    g.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  });

  my.when(["data", "innerBox", "xColumn"], function (data, innerBox, xColumn){
    if(xColumn !== Model.None){
      xScale.range([0, innerBox.width]);
      xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
      my.x = function (d){ return xScale(d[xColumn]); };
    }
  });

  my.when(["data", "innerBox", "yColumn"], function (data, innerBox, yColumn){
    if(yColumn !== Model.None){
      yScale.range([innerBox.height, 0]);
      yScale.domain(d3.extent(data, function (d){ return d[yColumn]; }));
      my.y = function (d){ return yScale(d[yColumn]); };
    }
  });

  // Generate a function or constant for circle radius,
  // depending on whether or not rColumn is defined.
  my.when(["data", "rColumn", "rDefault", "rMin", "rMax"],
      function (data, rColumn, rDefault, rMin, rMax){

    if(rColumn === Model.None){
      my.r = rDefault;
    } else {
      rScale
        .domain(d3.extent(data, function (d){ return d[rColumn]; }))
        .range([rMin, rMax]);
      my.r = function (d){ return rScale(d[rColumn]); };
    }
  });

  my.when([ "data", "x", "y", "r", "fill", "stroke", "strokeWidth" ],
      function (data, x, y, r, fill, stroke, strokeWidth){

    var circles = g.selectAll("circle").data(data);
    circles.enter().append("circle");
    circles.exit().remove();
    circles
      .attr("cx", x)
      .attr("cy", y)
      .attr("r", r)
      .attr("fill", fill)
      .attr("stroke", stroke)
      .attr("stroke-width", strokeWidth);

  });

  return my;
}