D3 color picker w/ button

<!DOCTYPE html>
<html>

  <head>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery@*"></script>
    <script data-require="d3@*" data-semver="3.4.6" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    
  </body>

</html>

$(document).ready(function() {
  var picker = new ColorPicker("#00DB00");
});

var ColorPicker = function (defaultColor, colorScale) {
    var self = this;
    var rainbow = ["#FFD300", "#FFFF00", "#A2F300", "#00DB00", "#00B7FF", "#1449C4", "#4117C7", "#820AC3", "#DB007C", "#FF0000", "#FF7400", "#FFAA00"];
    colorScale = colorScale || rainbow;
    var color = function (i) {
        return colorScale[i];
    };
    defaultColor = "#A9ACAC";
    var pickedColor = "#000";

    self.pickedColor = defaultColor;
    self.picked = function (color) {};
    var clicked = function () {
        self.picked(self.pickedColor);
    };

    var pie = d3.layout.pie().sort(null);
    var arc = d3.svg.arc().innerRadius(79).outerRadius(79);
    var newarc = d3.svg.arc().innerRadius(79).outerRadius(115);
    
    var colorout = false;

    var svg = d3.select("body")
        .append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .append("g")
        .attr("transform", "translate(200,200)");
    
    var plateBound = svg.append("circle")
        .attr("cx", 0)
        .attr("cy", 0)
        .attr("r",140)
        .attr("fill-opacity",0)
        .on("mouseout", function() {
            button.transition().delay(500)
              .duration(200)
              .attr("transform","translate(0, 0)");
        });    
        
    var button = svg.append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("height", 25)
        .attr("width", 25)
        .attr("stroke","black")
        .on("click", function() {
            wheel.transition()
              .ease("elastic")
              .duration(800)
              .attr("d", newarc);
            button.transition()
              .ease("elastic")
              .duration(800)
              .attr("transform","translate(0, 0)");
            colorout = true;
        });    
         
    var wheel = svg.datum([1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1])
        .selectAll("path")
        .data(pie)
        .enter()
        .append("path")
        .attr("fill", function (d, i) {
            return color(i);
        })
        //.attr("stroke", "#fff")
        //.attr("stroke-width", 4)
        .attr("d", arc)
        .on("mouseover", function () {
            var fill = d3.select(this).attr("fill");
            self.pickedColor = fill;
            plate.attr("fill", fill);
        })
        .on("click", function() {
            wheel.transition()
              .duration(200)
              .attr("d", arc);
            colorout = false;
        });
    
    var status = 0;

    var plate = svg.append("rect")
        .attr("fill", defaultColor)
        .attr("x", -75)
        .attr("y", -75)
        .attr("height", 150)
        .attr("width", 150)
        .attr("rx",100)
        .attr("ry",100)
        .attr("stroke","black")
        .on("mouseover", function() {
            if(colorout)
                return;             
            button.transition()
              .ease("elastic")
              .duration(800)
              .attr("transform","translate(100, -20)");
        })
};