mforando/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<script src="http://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 color = d3.scaleOrdinal(d3.schemeCategory10);

var degrees = d3.scaleLinear().domain([1,16*14])
         .range([0, 2*Math.PI*14]);

var r = d3.scaleLinear().domain([1,16]).range([0, radius]);

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;
		d.round = Math.floor((pick-1)/16);
		pick=pick+1;
		data.push(d);}
		;}


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


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(1.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)
//  .attr("d", arcTween());

function arcTween() {
  return function(d) {
  	var interpolate = d3.interpolate(d.endAngle, newAngle);
  return function(t) {
 	d.endAngle = interpolate(t);
 	console.log(d.endAngle)
  return arc(d);
    };
  };
 }


</script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<body>
	<script src="http://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 color = d3.scaleOrdinal(d3.schemeCategory10);

	var degrees = d3.scaleLinear().domain([1,16*14])
	.range([0, 2Math.PI14]);

	var r = d3.scaleLinear().domain([1,16]).range([0, radius]);

	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;
	d.round = Math.floor((pick-1)/16);
	pick=pick+1;
	data.push(d);}
	;}


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


	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(1.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)
	// .attr("d", arcTween());

	function arcTween() {
	return function(d) {
	var interpolate = d3.interpolate(d.endAngle, newAngle);
	return function(t) {
	d.endAngle = interpolate(t);
	console.log(d.endAngle)
	return arc(d);
	};
	};
	}


	</script>
	</body>