var vis = d3.select("body").append("svg")
         .attr("width", 1000)
         .attr("height", 667),

scaleX = d3.scale.linear()
        .domain([-30,30])
        .range([0,600]),

scaleY = d3.scale.linear()
        .domain([0,50])
        .range([500,0]),

color = d3.scale.category10();

vis.selectAll("polygon")
    .data(arrayOfPolygons)
  .enter().append("polygon")
    .attr("points",function(d) { 
        return d.points.map(function(d) { return [scaleX(d.x),scaleY(d.y)].join(","); }).join(" ");})
.attr("fill", function(d){return color(d.name)})
.attr("stroke","#666")
    .attr("stroke-width",2);

	// add legend   
	var legend = vis.append("g")
	  .attr("class", "legend")
        //.attr("x", w - 65)
        //.attr("y", 50)
	  .attr("height", 100)
	  .attr("width", 100)
    .attr('transform', 'translate(10,20)');
          
    legend 
      .selectAll('rect')
      .data(arrayOfPolygons)
      .enter()
      .append("rect")
	  .attr("x", 40)
      .attr("y", function(d, i){ return i *  20;})
	  .attr("width", 10)
	  .attr("height", 10)
	  .style("fill", function(d) { return color(d.name);});
      
    legend.selectAll('text')
      .data(arrayOfPolygons)
      .enter()
      .append("text")
	  .attr("x", 50)
      .attr("y", function(d, i){ return i *  20 + 9;})
	  .text(function(d) {return d.name});

  ///////////////////////////After clicking the button////////////////////////////////
  function polyData() {  

vis.selectAll("polygon")
    .data(arrayOfPolygonsbis)
    .transition()
    .duration(2000)
    .attr("points",function(d) { 
        return d.points.map(function(d) { return [scaleX(d.x),scaleY(d.y)].join(","); }).join(" ");})
.attr("fill", function(d){return color(d.name)})
.attr("stroke","#666")
    .attr("stroke-width",2);
}