Built with blockbuilder.org
forked from Sokrates86's block: Progressive pie chart 1
Created
August 21, 2018 02:53
-
-
Save kenfdev/f2ca298ca71a02aedbafb3a109f511f4 to your computer and use it in GitHub Desktop.
Progressive pie chart 1
This file contains hidden or 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 hidden or 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://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| svg { width:100%; height: 100% } | |
| body { | |
| background-color: #1B1F2A; | |
| width: 100%; | |
| font-family: 'Roboto', sans-serif; | |
| height: 100%; | |
| } | |
| .widget { | |
| margin: 0 auto; | |
| width:350px; | |
| margin-top:50px; | |
| background-color: #222D3A; | |
| border-radius: 5px; | |
| box-shadow: 0px 0px 1px 0px #06060d; | |
| } | |
| .header{ | |
| background-color: #29384D; | |
| height:40px; | |
| color:#929DAF; | |
| text-align: center; | |
| line-height: 40px; | |
| border-top-left-radius: 7px; | |
| border-top-right-radius: 7px; | |
| font-weight: 400; | |
| font-size: 1.5em; | |
| text-shadow: 1px 1px #06060d; | |
| } | |
| .chart-container{ | |
| padding:25px; | |
| } | |
| .shadow { | |
| -webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) ); | |
| filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) ); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="widget"> | |
| <div class="header">Progress Status</div> | |
| <div id="chart" class="chart-container"> | |
| </div> | |
| </div> | |
| <script> | |
| var createGradient=function(svg,id,color1,color2){ | |
| var defs = svg.append("svg:defs"); | |
| var red_gradient = defs.append("svg:linearGradient") | |
| .attr("id", id) | |
| .attr("x1", "0%") | |
| .attr("y1", "0%") | |
| .attr("x2", "50%") | |
| .attr("y2", "100%") | |
| .attr("spreadMethod", "pad"); | |
| red_gradient.append("svg:stop") | |
| .attr("offset", "50%") | |
| .attr("stop-color", color1) | |
| .attr("stop-opacity", 1); | |
| red_gradient.append("svg:stop") | |
| .attr("offset", "100%") | |
| .attr("stop-color", color2) | |
| .attr("stop-opacity", 1); | |
| }; | |
| var percent = 65; | |
| var ratio=percent/100; | |
| var pie=d3.layout.pie() | |
| .value(function(d){return d}) | |
| .sort(null); | |
| var w=300,h=300; | |
| var outerRadius=(w/2)-10; | |
| var innerRadius=110; | |
| var color = ['#f2503f','#ea0859','#404F70']; | |
| var svg=d3.select("#chart") | |
| .append("svg") | |
| .attr({ | |
| width:w, | |
| height:h, | |
| class:'shadow' | |
| }).append('g') | |
| .attr({ | |
| transform:'translate('+w/2+','+h/2+')' | |
| }); | |
| createGradient(svg,'gradient',color[0],color[1]); | |
| var arc=d3.svg.arc() | |
| .innerRadius(innerRadius) | |
| .outerRadius(outerRadius) | |
| .startAngle(0) | |
| .endAngle(2*Math.PI); | |
| var arcLine=d3.svg.arc() | |
| .innerRadius(innerRadius) | |
| .outerRadius(outerRadius) | |
| .startAngle(0); | |
| var pathBackground=svg.append('path') | |
| .attr({ | |
| d:arc | |
| }) | |
| .style({ | |
| fill:color[2] | |
| }); | |
| var pathChart=svg.append('path') | |
| .datum({endAngle:0}) | |
| .attr({ | |
| d:arcLine | |
| }) | |
| .style({ | |
| fill:'url(#gradient)' | |
| }); | |
| var middleCount=svg.append('text') | |
| .text(function(d){ | |
| return d; | |
| }) | |
| .attr({ | |
| class:'middleText', | |
| 'text-anchor':'middle', | |
| dy:30, | |
| dx:-15 | |
| }) | |
| .style({ | |
| fill:color[1], | |
| 'font-size':'90px' | |
| }); | |
| svg.append('text') | |
| .text('%') | |
| .attr({ | |
| class:'percent', | |
| 'text-anchor':'middle', | |
| dx:50, | |
| dy:-5 | |
| }) | |
| .style({ | |
| fill:color[1], | |
| 'font-size':'40px' | |
| }); | |
| var arcTween=function(transition, newAngle) { | |
| transition.attrTween("d", function (d) { | |
| var interpolate = d3.interpolate(d.endAngle, newAngle); | |
| var interpolateCount = d3.interpolate(0, percent); | |
| return function (t) { | |
| d.endAngle = interpolate(t); | |
| middleCount.text(Math.floor(interpolateCount(t))); | |
| return arcLine(d); | |
| }; | |
| }); | |
| }; | |
| var animate=function(){ | |
| pathChart.transition() | |
| .duration(750) | |
| .ease('cubic') | |
| .call(arcTween,((2*Math.PI))*ratio); | |
| }; | |
| setTimeout(animate,0); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment