D3 simple color selector

d3colorpicker.js

//data (pass your color
var c20 = d3.scale.category20c();
var colors = d3.range(20).map(function(i){ return c20(i) });
var selectedColor = "black";

var h = 100,
    w = 400,
	colorOpened = false,
	paddingX = 10
	radius = 10;


var svg = d3.select("svg")
.attr({
  width: w,
  height: y
});

var y = h/2;
var x = d3.scale.linear().domain([-1, colors.length]).range([0, w]);

svg.append("g")
	.attr("class","selector")
	.selectAll("circle")
      .data(colors)
      .enter()
      .append("circle")
		.attr("class", "color-selector-item")
        .attr("r", radius )
        .attr("cx", paddingX)
        .attr("cy", y)
		.attr("fill", function(d){return d } )
        .on("click",function(d,i) {
          	d3.select(".trigger").attr("fill",d);
          	closeColors();
          	callback(d);
        })


// trigger
svg.append("circle")
	.attr("class","trigger")
	.attr("r", radius )
	.attr("cy", y)
	.attr("cx", paddingX)
	.attr("fill", selectedColor)
    .on("click", function(d){
        console.log("action ! ")
        colorOpened = !colorOpened;
      	if(colorOpened) openColors(); 
      	else closeColors();
        
    })

var openColors = function () {
	d3.selectAll(".color-selector-item")
      .transition()
      .duration(1000)
      .attr("cx", function(d,i){  
        return radius + x(i); 
       });
  	colorOpened = true;
}

var closeColors = function () {
	d3.selectAll(".color-selector-item")
      .transition()
      .duration(1000)
      .attr("cx", function(d,i){  
        return paddingX
       });
  colorOpened = false;
}

var callback = function(color) {
	console.log("do whatever you want with ", color);
}