ColorPicker Using d3

<body>

</body>
<script src="d3.v3.min.js" charset="utf-8"></script>
<script>
var ColorPicker = function (defaultColor, colorScale) {
    var self = this;
    var rainbow = ["#FFD300", "#FFFF00", "#A2F300", "#00DB00", "#00B7FF", "#1449C4", "#4117C7", "#820AC3", "#DB007C", "#FF0000", "#FF7400", "#FFAA00"]
    var colorScale = colorScale || rainbow;
    var color = function (i) { return colorScale[i];};
    var defaultColor = defaultColor || color(0);

    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(75).outerRadius(150);

    var svg = d3.select("body")
        .append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .append("g")
        .attr("transform", "translate(200,200)");

    var plate = svg.append("circle")
        .attr("fill", defaultColor)
        .attr("stroke", "#fff")
        .attr("stroke-width", 4)
        .attr("r", 75)
        .attr("cx", 0)
        .attr("cy", 0)
        .on("click", clicked);

    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", clicked);
};

var picker = new ColorPicker("#00DB00");
picker.picked = function (color) { alert(color); };

</script>