// helper function from github.com/usfvgl/defaults-centroid/
function getClassCentroid(data, selectedclass, xDomain, yDomain){
  var classData = data.filter(function(d){
      return d.class == selectedclass;
  });
  var xAvg = d3.mean(classData, function(d) {return d[xDomain]})
  var yAvg = d3.mean(classData, function(d) {return d[yDomain]})
  centroid = {"xAvg": xAvg,
        "yAvg": yAvg,
        "class": selectedclass}
  return centroid;
}

function getDist (x1, y1, x2, y2) {
	var x = x2 - x1
	var y = y2 - y1
	return Math.sqrt(((x*x) + (y*y)))
}

// helper function to shuffle array
//https://javascript.info/task/shuffle
function shuffleZ(o) {
  for (var i = o.z.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    [o.z[i], o.z[j]] = [o.z[j], o.z[i]];
    [o.z2[i], o.z2[j]] = [o.z2[j], o.z2[i]];
  }
}

// main function to generate a training chart
function chart() {
  var sample = false
  var min = 0
  var max = 10
  var colorScheme = 0;  // default color scheme from color brewer
  var colorNames = {
    "rgb(27,158,119)": "green",
    "rgb(217,95,2)": "orange",
    "rgb(117,112,179)": "purple",
    "rgb(231,41,138)": "pink"
  }
  var colorSchemes = [
    {
      z: ["rgb(228,26,28)", "rgb(55,126,184)", "rgb(77,175,74)", "rgb(152,78,163)", "rgb(255,127,0)", "rgb(255,255,51)"],
      z2: ["rgba(228,26,28, 0.5)", "rgba(55,126,184, 0.5)", "rgba(77,175,74, 0.5)", "rgba(152,78,163, 0.5)", "rgba(255,127,0, 0.5)", "rgba(255,255,51, 0.5)"]
    },
    {
      z: ["rgb(127,201,127)", "rgb(190,174,212)", "rgb(253,192,134)", "rgb(255,255,153)", "rgb(56,108,176)", "rgb(240,2,127)"],
      z2: ["rgba(127,201,127, 0.5)", "rgba(190,174,212, 0.5)", "rgba(253,192,134, 0.5)", "rgba(255,255,153, 0.5)", "rgba(56,108,176, 0.5)", "rgba(240,2,127)"]
    },
    {
      z: ["rgb(27,158,119)", "rgb(217,95,2)", "rgb(117,112,179)", "rgb(231,41,138)"],
      z2: ["rgba(27,158,119, 0.5)", "rgba(217,95,2, 0.5)", "rgba(117,112,179, 0.5)", "rgba(231,41,138, 0.5)"]
    },
    {
      z: ["rgb(255,115,75)", "rgb(191,84,122)", "rgb(131,148,77)", "rgb(255,238,56)", "rgb(152,123,104)", "rbg(255,174,0)"],
      z2: ["rgba(255,115,75, 0.5)", "rgba(191,84,122, 0.5)", "rgba(131,148,77, 0.5)", "rgba(255,238,56, 0.5)", "rgb(152,123,104, 0.5)", "rbga(255,174,0, 0.5)"]
    },
    {
      z: ["rgb(178,91,122)", "rgb(135,147,86)", "rgb(240,142,86)", "rgb(253,237,95)"],
      z2: ["rgba(178,91,122, 0.5)", "rgba(135,147,86, 0.5)", "rgba(240,142,86, 0.5)", "rgba(253,237,95, 0.5)"]
    },
    {
      z: ["rgb(178,91,122)", "rgb(135,147,86)", "rgb(240,142,86)", "rgb(253,237,95)", "rgb(83,71,58)", "rbg(239,101,77)"],
      z2: ["rgba(178,91,122, 0.5)", "rgba(135,147,86, 0.5)", "rgba(240,142,86, 0.5)", "rgba(253,237,95, 0.5)", "rgb(83,71,58, 0.5)", "rbga(239,101,77, 0.5)"]
    }
  ]
  var centroid_clicked = false;
  var isMouseDown = false;
  var isFaded = false,
      startX,
      startY,
      dragX,
      dragY,
      tutorial = false,
      timer,
      circle_on,
      selectedClass,
      width,
      height,
      centroids = {},
      radius = 35, // size of point
      radiusWidth = 3,  //width of open circle stroke
      xDomain = "carat",
      yDomain = "price",
      zDomain = "cut",
      autoPlay = false,
      playing = false,
      currentI = 0,
      rpw = 10, //rows per second to animate
      loop,
      pause,
      datasetSize,
      drawPoints,
      drawAnimationProgress,
      play,
      drawData = {
        color: {},
        point : {
          solid: true,
          opencircle: false,
          alpha: false
        },
        buffers: {
          solid: {},
          opencircle: {},
          alpha: {}
        },
        alpha: 0.3
      };
  var centroid_circles = [];
  var margin = {top: 30, right: 20, bottom: 180, left: 20};
  var canvasWidth = 900;
  var canvasHeight = 500;
  width = 900 - margin.right - margin.left, // default width
  height = 500 - margin.top - margin.bottom; // default height

  var blending_modes = {
    "source-over": true,
    "multiply": false,
    "screen": false,
    "overlay": false,
    "darken": false,
    "lighten": false,
    "color-dodge": false,
    "color-burn": false,
    "hard-light": false,
    "soft-light": false,
    "difference": false,
    "exclusion": false,
    "hue": false,
    "saturation": false,
    "color": false,
    "luminosity": false
  }



  function my(selection) {
    my.clicks = 0;
    my.startTime = null;
    my.endTime = null;
    selection.each(function(data) {

      //scales
      var x = d3.scaleLinear().range([margin.left, width]);
      var y = d3.scaleLinear().range([height, margin.top]);
      shuffleZ(colorSchemes[colorScheme])
      var z = d3.scaleOrdinal(colorSchemes[colorScheme].z);
      var z2 = d3.scaleOrdinal(colorSchemes[colorScheme].z2);
      var legendX = d3.scaleLinear().rangeRound([0, margin.right - 70]);
      var progressX = d3.scaleLinear().range([0, 2*Math.PI]);

      //generate chart;
      var root = this;

      canvas = root.appendChild(document.createElement("canvas")),
      context = canvas.getContext("2d");
      canvas.id = "chart-canvas"

      canvas.width = canvasWidth;
      canvas.height = canvasHeight;

      events_canvas = root.appendChild(document.createElement("canvas"));
      econtext = events_canvas.getContext("2d");
      events_canvas.id = "events-canvas";

      events_canvas.width = canvasWidth;
      events_canvas.height = canvasHeight;


      // generate controls
      var node = document.createElement("div");
      var visual_controls_node = document.createElement("form");
      var visual_controls = root.appendChild(visual_controls_node);

      //point functions
      var point = d3.symbol()
          .size(radius)
          .context(context);

      var openpoint = d3.symbol()
          .size(radius + radiusWidth)
          .context(context);

      var openpoint_stroke = d3.symbol()
          .size(radius + radiusWidth + radiusWidth)
          .context(context);

      var animation_circle = d3.symbol()
          .size(750)
          .context(context);

      function drawPoint (d) {
        //draw point in context
        var selectedPoint = getSelectedPointType();

        context.translate(d.x, d.y);
        if (selectedPoint === "solid") {
          context.fillStyle = z(d[zDomain]);
          context.strokeStyle = "white";
          context.beginPath();
          point(d);
          context.closePath();
          context.fill();
          context.stroke();

        } else if (selectedPoint === "opencircle") {
          context.strokeStyle = "white"
          context.lineWidth = 2.5;
          context.beginPath();
          openpoint_stroke(d);
          context.closePath();
          context.stroke();
          context.strokeStyle = z(d[zDomain]);
          context.lineWidth = 1;
          context.beginPath();
          openpoint(d);
          context.closePath();
          context.stroke();
        } else if (selectedPoint === "alpha") {
          context.fillStyle = z(d[zDomain])
          context.globalAlpha = drawData.alpha;
          context.beginPath();
          point(d);
          context.closePath();
          context.fill();
          context.globalAlpha = 1.0;
        }
        context.translate(-d.x, -d.y);
      }

      // setup
      context.translate(margin.left, margin.top);
      context.font = "12px sans-serif";

      x.domain([min,max]);
      y.domain([min,max]);
      z.domain(d3.map(data, function(d){return d[zDomain];}).keys());
      progressX.domain([0, data.length]);

      datasetSize = data.length;

      z.domain().forEach(function (d, i){
        //set initial values for <label>
        drawData.color[d] = {
          selected: true,
          x: margin.left + width + 5,
          y: margin.top + ((height -30*z.domain().length) /2) + 5 + i*30,
          count: 0
        };
        // also set values for event canvas circles
        var xCor = 80 + 60*i;
        var yCor = 0;
        centroid_circles.push({
          x: xCor,
          y: yCor,
          xNow: xCor,
          yNow: yCor,
          class: d,
          fill: z2(d),
          radius: 20,
          isDragging: false
        })
        // get actual centroids
        centroids[d] = getClassCentroid(data, d, xDomain, yDomain);
        centroids[d].x = Math.floor(x(centroids[d].xAvg));
        centroids[d].y = Math.floor(y(centroids[d].yAvg));
        centroids[d].fill = z2(centroids[d].class);
        centroids[d].solidFill = z(centroids[d].class);
      });

      //draw initial points and buffers
      data.forEach(function(d) {
        d.x = Math.floor(x(d[xDomain]));
        d.y = Math.floor(y(d[yDomain]));

        drawData.color[d[zDomain]].count += 1;

        drawPoint(d);
      });

      // draw axises
      xAxis();
      yAxis();
      if (!sample) {
        drawCentroidCircles();
      }

      // define draw animation progress (the spinning circle)
      function drawAnimationProgress() {
        context.save();
        context.globalCompositeOperation = "source-over";
        context.translate(width - 120, -20);
        //clear progress area
        context.clearRect(-5, -5, 50, 50);

        context.fillStyle = "gray";
        context.lineWidth = 5;
        context.beginPath();
        context.arc(20,20,18,0,2*Math.PI);
        context.strokeStyle = "gray";
        context.stroke();

        context.strokeStyle = "white";
        context.beginPath();
        context.arc(20,20,18,progressX(currentI), progressX(currentI) + 0.2);
        context.stroke();
        context.lineWidth = 1;
        context.restore();
      }

      // draw interactive centroid circles that you drag
      function drawCentroidCircles() {
        econtext.clearRect(0,0, events_canvas.width, events_canvas.width);
        econtext.save();
        econtext.translate(margin.left, margin.top);
        for (var i = 0; i < centroid_circles.length; i++) {
          var circle = centroid_circles[i];
          var xCoor = circle.x;
          var yCoor = circle.y;

          if(circle.isDragging){
            xCoor += dragX;
            yCoor += dragY;
          }
          if (xCoor > width + margin.left - margin.right) {
            xCoor = width + margin.left - margin.right
          } else if (xCoor < margin.left) {
            xCoor = margin.left
          }
          if (yCoor > height + margin.top - 30) {
            yCoor = height + margin.top - 30
          }
          econtext.beginPath();
          econtext.arc(xCoor, yCoor, circle.radius + 3, 0, 2 * Math.PI, false);
          econtext.fillStyle = "rgba(255,255,255,0.5)";
          econtext.fill();
          econtext.closePath();
          econtext.beginPath();
          econtext.arc(xCoor, yCoor, circle.radius, 0, 2 * Math.PI, false);
          econtext.fillStyle = circle.fill;
          econtext.fill();
          econtext.closePath();
          drawCrosshairs(xCoor, yCoor);
          centroid_circles[i].xNow = xCoor
          centroid_circles[i].yNow = yCoor
        };

        blurDistances();

        econtext.restore();
      }

      // draw crosshairs on centroid circles
      function drawCrosshairs(x, y) {
        // draw cross hairs
        econtext.strokeStyle = "gray";
        econtext.beginPath();
        econtext.moveTo(x-5,y);
        econtext.lineTo(x+5,y);
        econtext.stroke();
        econtext.beginPath();
        econtext.moveTo(x,y-5);
        econtext.lineTo(x,y+5);
        econtext.stroke();

      }

      function blurDistances() {
        context.clearRect(margin.left - 5, margin.top + height + 20 - 10, width, 100);
        context.font = "14px sans-serif";
        context.fillStyle = "gray";
        context.fillText("Distances: ", margin.left, height + margin.top + 20);
      }

      function drawDistances() {
//         context.save();
         //clear progress area
        context.clearRect(margin.left - 5, margin.top + height + 20 - 10, width, 100);
        context.font = "14px sans-serif";
        context.fillStyle = "gray";
        context.fillText("Distances: ", margin.left, height + margin.top + 20);
//         context.restore();
		var valid = true;
        for (var i = 0; i < centroid_circles.length; i++) {
          context.save();
        var circle = centroid_circles[i];
          var color = centroids[circle.class].solidFill;

        var dist = getDist(circle.xNow, circle.yNow, centroids[circle.class].x, centroids[circle.class].y)

          if (dist <= 20) {
          	context.fillStyle = color;
            context.fillText(colorNames[color], 75 + margin.left + (125*(i)), margin.top + height + 20);
            context.fillStyle = "green";
            context.fillText("✓ Good", 75 + margin.left + (125*(i)), margin.top + height + 20 + 20);
          } else {
          	valid = false;
            context.fillStyle = color;
            context.fillText(colorNames[color] + ": " + Math.round(dist), 75 + margin.left + (125*(i)), margin.top + height + 20);
          }
          context.restore();
        }

        my.valid = valid;

        if (my.valid) {
			d3.select("#tutorialbutton").property("disabled", false);
			d3.select('#warning1').style("display", "none");
		} else {
			d3.select('#warning1').style("display", "block");
			d3.select("#tutorialbutton").property("disabled", true);
			experimentr.hold();
		}
      }

      // define animation looping function
      function loop() {
        timer = d3.interval(function (elapsed) {
          if (playing) {
            drawAnimationProgress();
            for (var i = 0; i < rps; i++) {
              var d = data[currentI];
              d.x = Math.round(x(d[xDomain]));
              d.y = Math.round(y(d[yDomain]));
              drawPoint(d);
              incrementCurrentI();
            }
          } else  {
            timer.stop();
          }
        }, 100)
        }

      //https://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element
      function getCursorPosition(canvas, event) {
          var rect = events_canvas.getBoundingClientRect();
          var x = event.clientX - rect.left;
          var y = event.clientY - rect.top;
          return [x, y];
      }

    // referenced the following for dragging event handling
    // https://stackoverflow.com/questions/17424623/canvas-drag-and-drop-with-multiple-items
    // https://stackoverflow.com/questions/16792841/detect-if-user-clicks-inside-a-circle
    function setDragging(x,y){
        var dx = x - margin.left;
        var dy = y - margin.top;

        for(var i = 0; i < centroid_circles.length; i++){
            var circle = centroid_circles[i];
            if(Math.sqrt((dx-circle.x)*(dx-circle.x) + (dy-circle.y)*(dy-circle.y)) < circle.radius){
                for (var j = 0; j < centroid_circles.length; j++) {
                  centroid_circles[j].isDragging = false;
                };
                circle.isDragging = true;
                break;
            }
        }
    }

    function clearDragging(x, y){
        for(var i = 0; i < centroid_circles.length;i++){
            var circle = centroid_circles[i];
            if(circle.isDragging){
                circle.isDragging = false;
                if (dragX !== undefined && dragY !== undefined) {
                  circle.x += dragX;
                  circle.y += dragY;
                }
                if (circle.x > width + margin.left - margin.right) {
                  circle.x = width + margin.left - margin.right
                } else if (circle.x < margin.left) {
                  circle.x = margin.left
                }
                if (circle.y > height + margin.top - margin.bottom) {
                  circle.y = height + margin.top - margin.bottom
                }
            }
        }
        dragX = 0
        dragY = 0
    }

    function handleMouseDown(e){
      if(my.clicks == 0){
        my.startTime = Date.now()
      }
      my.clicks += 1;
      mouse = getCursorPosition(events_canvas, e);
      mouseX = mouse[0];
      mouseY = mouse[1];

      startX = mouseX;
      startY = mouseY;
      setDragging(startX,startY);
      isMouseDown=true;
    }

    function handleMouseUp(e){
      my.endTime = Date.now();
      mouse = getCursorPosition(events_canvas, e);
      mouseX = mouse[0];
      mouseY = mouse[1];

      isMouseDown=false;
      clearDragging();

      var isValid = true;

      for (var i = 0; i < centroid_circles.length; i++) {
        var circle = centroid_circles[i]
        isValid = isValidCoor(circle.x, circle.y);
        if (isValid === false) {
          break
        }
      };

      my.valid = isValid;

      drawDistances()
    }

    function handleMouseOut(e){
      mouse = getCursorPosition(events_canvas, e);
      mouseX = mouse[0];
      mouseY = mouse[1];

      isMouseDown=false;
      clearDragging();
    }

    function handleMouseMove(e){
      mouse = getCursorPosition(events_canvas, e);
      mouseX = mouse[0];
      mouseY = mouse[1];

      if(isMouseDown){
          dragX = mouseX - startX;
          dragY = mouseY - startY;
          drawCentroidCircles(mouseX,mouseY);
      }

    }

    events_canvas.addEventListener("mousedown", handleMouseDown);
    events_canvas.addEventListener("mousemove", handleMouseMove);
    events_canvas.addEventListener("mouseup", handleMouseUp);
    events_canvas.addEventListener("mouseout", handleMouseOut);

    //get the currently selected point type
    function getSelectedPointType() {
      var selected;
      Object.keys(drawData.point).forEach(function(p) {
        if (drawData.point[p]) {
          selected = p;
        }
      });
      return selected;
    }

    // draw x-axis
    function xAxis() {
      var tickCount = 10,
          tickSize = 6,
          ticks = x.ticks(tickCount),
          tickFormat = x.tickFormat();
      context.save();
      context.beginPath();

      ticks.forEach(function(d) {
        context.moveTo(x(d), height);
        context.lineTo(x(d), height + tickSize);
      });
      context.strokeStyle = "gray";
      context.stroke();

      context.fillStyle = "gray";
      context.beginPath();
      context.moveTo(13, height);
      context.lineTo(width, height);
      context.strokeStyle = "gray";
      context.stroke();

      context.textAlign = "center";
      context.textBaseline = "top";
      ticks.forEach(function(d) {
        context.fillText(tickFormat(d), x(d), height + 3 + tickSize);
      });
      context.restore();
    }

    // draw y-axis
    function yAxis() {
      var tickCount = 10,
          tickSize = 6,
          tickPadding = 3,
          ticks = y.ticks(tickCount),
          tickFormat = y.tickFormat(tickCount);
      context.save();
      context.beginPath();
      ticks.forEach(function(d) {
        context.moveTo(margin.left, y(d));
        context.lineTo(margin.left-6, y(d));
      });
      context.strokeStyle = "gray";
      context.stroke();
      context.fillStyle = "gray";
      context.beginPath();
      context.moveTo(margin.left, margin.top);
      context.lineTo(margin.left, height);
      context.lineTo(margin.left-tickSize, height);
      context.strokeStyle = "gray";
      context.stroke();

      context.textAlign = "right";
      context.textBaseline = "middle";
      ticks.forEach(function(d) {
        context.fillText(tickFormat(d), margin.left - tickSize - tickPadding, y(d));
      });
      context.restore();
    }

    // increment the current count in a circular fashion on the dataset
    function incrementCurrentI () {
      currentI = (currentI + 1) % datasetSize;
    }

    // pause animation
    function pause () {
      playing = false;
    }

    // play animation
    function play () {
      playing = true;
      loop();
    }

    if (autoPlay) {
      play();
    }
  });

  }

  // helper function to determine if the coordinate is valid in the chart
  var isValidCoor = function(x, y) {
    if (x > 0 && x < 0+width && y > 0 && y < 0 + height) {
      return true;
    } else {
      return false;
    }
  }

  // helper function that returns the centroid information (actual and guess)
  my.centroidInfo = function() {
    var centroidInfo = {}
    centroidInfo.actual = centroids;
    centroidInfo.guess = {};
    for (var i = 0; i < centroid_circles.length; i++) {
      var circle = centroid_circles[i];
      centroidInfo.guess[circle.class] = {
        x: circle.x,
        y: circle.y
      }
    };
    return centroidInfo;
  };

  // set or get width of chart
  my.width = function(value) {
    if (!arguments.length) return width;
    canvasWidth = value;
    width = value - margin.right - margin.left;
    return my;
  };

  // set or get height of chart
  my.height = function(value) {
    if (!arguments.length) return height;
    canvasHeight = value;
    height = value - margin.top - margin.bottom;
    return my;
  };

  // set or get whether autoPlay is true or not
  my.autoPlay = function(value) {
    if (!arguments.length) return autoPlay;
    autoPlay = value;
    return my;
  }

  // set or get animation speed (rows to animate per second)
  my.animationSpeed = function(value) {
    if (!arguments.length) return rps;
    rps = value;
    return my;
  }

  // set or get type of point for chart
  my.pointType = function(value) {
    if (!arguments.length) return drawData.point[value];
    drawData.point = {
          solid: false,
          opencircle: false,
          alpha: false
        }
    drawData.point[value] = true;
    return my;
  }

  // set or get radius of point
  my.radius = function(value) {
    if (!arguments.length) return radius;
    radius = value;
    return my;
  }

  // set or get name of xDomain of chart
  my.xDomain = function(newXDomain) {
    if (!arguments.length) return xDomain;
    xDomain = newXDomain;
    return my;
  }

  // set or get name of yDomain of chart
  my.yDomain = function(newYDomain) {
    if (!arguments.length) return yDomain;
    yDomain = newYDomain;
    return my;
  }

  // set or get name of zDomain of chart
  my.zDomain = function(newZDomain) {
    if (!arguments.length) return zDomain;
    zDomain = newZDomain;
    return my;
  }

  // set or get name of selectedClass of chart
  my.selectedClass = function(newclass) {
    if (!arguments.length) return selectedClass;
    selectedClass = newclass;
    return my;
  }

  // set or get whether or not this is a tutorial
  my.tutorial = function(booleanval) {
    if (!arguments.length) return tutorial;
    tutorial = booleanval;
    return my;
  }

  // stop animation
  my.stop = function() {
    if (timer) {
      timer.stop();
    }
  }

  // returns whether or not chart is faded (currently not in use, for tutorial only)
  my.faded = function (value) {
    if (!arguments.length) return isFaded;
    isFaded = value;
    return my;
  }

  // set or get color scheme of chart (valid values are 0, 1, 2)
  my.colorScheme = function(value) {
    if (!arguments.length) return colorScheme;
    colorScheme = value;
    return my;
  }

  my.max = function(value) {
    if (!arguments.length) return max;
    max = value;
    return my;
  }

  my.min = function(value) {
    if (!arguments.length) return min;
    min = value;
    return my;
  }

  my.sample = function(value) {
    if (!arguments.length) return sample;
    sample = value;
    tutorial = value;
    return my;
  }

  // shows real centroids if the chart is a tutorial
  my.realCentroid = function() {
    if (tutorial) {
      var canvas = document.getElementById("chart-canvas")
      var ecanvas = document.getElementById("events-canvas")
      var econtext = ecanvas.getContext("2d");
      var context = canvas.getContext("2d");
      //code to fade tutorial canvas
      // if (!my.faded()) {
      //   context.save();
      //   context.beginPath();
      //   context.rect(0,0, canvas.width, canvas.height)
      //   context.closePath();
      //   context.fillStyle = "rgba(255,255,255,0.5)";
      //   context.fill();
      //   context.restore();
      //   my.faded(true);
      // }

      //draw centroid circles without crosshair

      econtext.clearRect(0,0, events_canvas.width, events_canvas.width);
      econtext.save();

      econtext.translate(margin.left, margin.top);

      if (!sample) {
        for (var i = 0; i < centroid_circles.length; i++) {
          var circle = centroid_circles[i];
          econtext.beginPath();
          if(circle.isDragging){
            econtext.arc(circle.x + dragX, circle.y + dragY, circle.radius, 0, 2 * Math.PI, false);
            econtext.fillStyle = circle.fill;
            econtext.fill();
            drawCrosshairs(circle.x + dragX, circle.y + dragY);
          } else {
            econtext.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI, false);
            econtext.fillStyle = circle.fill;
            econtext.fill();
          }

        };
      }

      econtext.globalCompositeOperation = "multiply";

      Object.keys(centroids).forEach(function (d, i) {
        //draw tutorials
        econtext.beginPath();
        econtext.arc(centroids[d].x, centroids[d].y, 20, 0, 2 * Math.PI, false);
        econtext.lineWidth = 6;
        econtext.strokeStyle = "white";
        econtext.stroke();
        econtext.beginPath();
        econtext.moveTo(centroids[d].x-3,centroids[d].y);
        econtext.lineTo(centroids[d].x+3,centroids[d].y);
        econtext.stroke();
        econtext.beginPath();
        econtext.moveTo(centroids[d].x,centroids[d].y-3);
        econtext.lineTo(centroids[d].x,centroids[d].y+3);
        econtext.stroke();

        econtext.beginPath();
        econtext.arc(centroids[d].x, centroids[d].y, 20, 0, 2 * Math.PI, false);
        econtext.lineWidth = 1;
        econtext.strokeStyle = centroids[d].solidFill;
        econtext.stroke();
        econtext.stroke();
        econtext.beginPath();
        econtext.moveTo(centroids[d].x-3,centroids[d].y);
        econtext.lineTo(centroids[d].x+3,centroids[d].y);
        econtext.stroke();
        econtext.stroke();
        econtext.beginPath();
        econtext.moveTo(centroids[d].x,centroids[d].y-3);
        econtext.lineTo(centroids[d].x,centroids[d].y+3);
        econtext.stroke();
        econtext.stroke();
      })
      econtext.restore();
    }
    d3.select('#warning2').style("display", "none");
    if (my.valid) {
    	experimentr.release();
    }
  }

  return my;
}