Originally adapted from this CodePen for use in RapLyricist.com
forked from mattkohl's block: Animated Donut Chart with Percentage
| license: gpl-3.0 | 
Originally adapted from this CodePen for use in RapLyricist.com
forked from mattkohl's block: Animated Donut Chart with Percentage
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Animated Donut with Percentage</title> | |
| <style type="text/css"> | |
| @import url(https://fonts.googleapis.com/css?family=Open+Sans); | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif; | |
| color: #fff; | |
| background-color: #000; | |
| } | |
| path.color0 { | |
| fill: #fff; | |
| } | |
| path.color1 { | |
| fill: rgba(255,255,255,.3); | |
| } | |
| text { | |
| font-size: 7em; | |
| font-weight: 400; | |
| line-height: 16em; | |
| fill: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script type="text/javascript"> | |
| var duration = 1500, | |
| transition = 200, | |
| percent = 45, | |
| width = window.innerWidth - 20, | |
| height = window.innerHeight - 20; | |
| var dataset = { | |
| lower: calcPercent(0), | |
| upper: calcPercent(percent) | |
| }, | |
| radius = Math.min(width, height) / 3, | |
| pie = d3.layout.pie().sort(null), | |
| format = d3.format(".0%"); | |
| var arc = d3.svg.arc() | |
| .innerRadius(radius * .8) | |
| .outerRadius(radius); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| var path = svg.selectAll("path") | |
| .data(pie(dataset.lower)) | |
| .enter().append("path") | |
| .attr("class", function (d, i) { | |
| return "color" + i | |
| }) | |
| .attr("d", arc) | |
| .each(function (d) { | |
| this._current = d; | |
| }); | |
| var text = svg.append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("dy", ".3em"); | |
| var progress = 0; | |
| var timeout = setTimeout(function () { | |
| clearTimeout(timeout); | |
| path = path.data(pie(dataset.upper)); | |
| path.transition().duration(duration).attrTween("d", function (a) { | |
| var i = d3.interpolate(this._current, a); | |
| var i2 = d3.interpolate(progress, percent) | |
| this._current = i(0); | |
| return function (t) { | |
| text.text(format(i2(t) / 100)); | |
| return arc(i(t)); | |
| }; | |
| }); | |
| }, 200); | |
| function calcPercent(percent) { | |
| return [percent, 100 - percent]; | |
| }; | |
| </script> | 
| �PNG | |