Built with blockbuilder.org
Created
August 29, 2017 21:16
-
-
Save mforando/6acb6c50419faaac6320ba639f3e04d3 to your computer and use it in GitHub Desktop.
Wheel
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment