Originally adapted from this CodePen for use in RapLyricist.com
Last active
June 10, 2016 09:54
-
-
Save mattkohl/9f3a283813cf0226311f41595582c9eb to your computer and use it in GitHub Desktop.
Animated Donut Chart with Percentage
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: gpl-3.0 |
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> | |
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment