Wheel

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
</body> 
</html>
<style>
	text {font-family:"Franklin Gothic Medium";
		  font-size:14px;}
</style>
<body>
<script>

var width = 500,
	height = 500,
	padding = 25,
	sqWidth = 30,
	radius = Math.min(width-padding, height-padding) / 2,
	innerRadius = radius-sqWidth;

var pie = d3.pie().sort(null).value(function(d) {return 1;}).endAngle(2*Math.PI);

var color = d3.scaleOrdinal(d3.schemeCategory10);

var arc = d3.arc()
		  .innerRadius(function(data){return innerRadius;})
		  .outerRadius(function(data){return (radius - innerRadius) + innerRadius;});
	  
var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var data = []

pick = 1

for(var z = 1; z<=14;z++) {
	for(var i = 1; i <= 16; i++){
		d=[];
		d.team=z;
		d.x=i;
		d.pick = pick;
		pick=pick+1;
		data.push(d);}
		;}
		
var path = svg.selectAll(".solidArc")
  .data(pie(data))
  .enter()
  .append("path")
  .attr("id",function(d){return d.data.x;})
  .attr("fill", "blue")
  .attr("fill-opacity",.1)
  .attr("class", "solidArc")
  .attr("stroke", "black")
  .attr("stroke-width",.5)
  .attr("stroke-opacity",.5)
  .attr("d", arc);

var pie = d3.pie().sort(null).value(function(d) {return 1;}).endAngle(.5*Math.PI);
var arc = d3.arc()
		  .innerRadius(innerRadius)
		  .outerRadius(function (data){ 	
			return (radius - innerRadius) + innerRadius; 
		  });

path .data(pie(data)).transition()
  .duration(1000).ease(d3.easeCubic).attr("id",function(d){return d.data.x;})
  .attr("fill", "blue")
  .attr("fill-opacity",.1)
  .attr("class", "solidArc")
  .attr("stroke", "black")
  .attr("stroke-width",.5)
  .attr("stroke-opacity",.5)
  .attr("d", arc);

</script>
</body>

Modified http://d3js.org/d3.v4.min.js to a secure url

https://d3js.org/d3.v4.min.js