Built with blockbuilder.org
Last active
April 23, 2017 15:10
-
-
Save DDDDDanica/9101e33991c8d1a8a1359fbba982548b to your computer and use it in GitHub Desktop.
Amazing pie
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var data = [1, 1, 2, 3, 5, 8, 13, 21]; | |
| var width = 260, | |
| height = 300, | |
| oRadius = 100; //var holding value for the outer radius of the arc | |
| var iRadius = 80; //var holding the value for the inner radius of the arc | |
| var cRadius = 2; //var holding the value for the corner radius of the arc | |
| var myArcMaker = d3.arc().outerRadius(oRadius).innerRadius(iRadius).cornerRadius(cRadius); //var that returns the values needed to create the arcs of the pie chart | |
| // Feel free to change or delete any of the code you see in this editor! | |
| function arcTween(a) { //<-- a is the datum bound to each arc | |
| var startAngle = a.startAngle; //<-- keep reference to start angle | |
| var i = d3.interpolate(a.startAngle, a.endAngle); //<-- interpolate start to end | |
| return function(t) { | |
| return myArcMaker({ //<-- return arc at each iteration from start to interpolate end | |
| startAngle: startAngle, | |
| endAngle: i(t) | |
| }); | |
| }; | |
| } | |
| var pie = d3.pie() | |
| .padAngle(.02); | |
| var color = d3.scaleOrdinal(d3.schemeCategory10); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| let paths = svg.selectAll("path") | |
| .data(pie(data)); | |
| console.log(paths); | |
| paths.enter() | |
| .append("path") | |
| .style("fill", function(d, i) { | |
| return color(i); }) | |
| .transition().duration(750).attrTween("d", arcTween); // redraw the arcs | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment