Built with blockbuilder.org
Created
January 22, 2016 12:07
-
-
Save Sokrates86/b5d31288bad4fb609c2e to your computer and use it in GitHub Desktop.
Progressive pie chart 3
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: #3f5175; | |
| 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; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="widget"> | |
| <div class="header">Progress Status</div> | |
| <div id="chart" class="chart-container"> | |
| </div> | |
| </div> | |
| <script> | |
| 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 = ['#404F70','#67BAF5','#2d384d']; | |
| var arc=d3.svg.arc() | |
| .innerRadius(innerRadius) | |
| .outerRadius(outerRadius) | |
| .startAngle(0) | |
| .endAngle(2*Math.PI); | |
| var arcLine=d3.svg.arc() | |
| .innerRadius(innerRadius) | |
| .outerRadius(outerRadius) | |
| .cornerRadius(20) | |
| .startAngle(-0.05); | |
| var svg=d3.select("#chart") | |
| .append("svg") | |
| .attr({ | |
| width:w, | |
| height:h, | |
| class:'shadow' | |
| }).append('g') | |
| .attr({ | |
| transform:'translate('+w/2+','+h/2+')' | |
| }); | |
| var defs = svg.append("svg:defs"); | |
| var inset_shadow = defs.append("svg:filter") | |
| .attr("id", "inset-shadow"); | |
| inset_shadow.append("svg:feOffset") | |
| .attr({ | |
| dx:0, | |
| dy:0 | |
| }); | |
| inset_shadow.append("svg:feGaussianBlur") | |
| .attr({ | |
| stdDeviation:8, | |
| result:'offset-blur' | |
| }); | |
| inset_shadow.append("svg:feComposite") | |
| .attr({ | |
| operator:'out', | |
| in:'SourceGraphic', | |
| in2:'offset-blur', | |
| result:'inverse' | |
| }); | |
| inset_shadow.append("svg:feFlood") | |
| .attr({ | |
| 'flood-color':'black', | |
| 'flood-opacity':1, | |
| result:'color' | |
| }); | |
| inset_shadow.append("svg:feComposite") | |
| .attr({ | |
| operator:'in', | |
| in:'color', | |
| in2:'inverse', | |
| result:'shadow' | |
| }); | |
| inset_shadow.append("svg:feComposite") | |
| .attr({ | |
| operator:'over', | |
| in:'shadow', | |
| in2:'SourceGraphic' | |
| }); | |
| var pathBackground=svg.append('path') | |
| .attr({ | |
| d:arc | |
| }) | |
| .style({ | |
| fill:color[0], | |
| filter:'url(#inset-shadow)' | |
| }); | |
| var pathForeground=svg.append('path') | |
| .datum({endAngle:0}) | |
| .attr({ | |
| d:arcLine | |
| }) | |
| .style({ | |
| fill:color[1], | |
| filter:'url(#inset-shadow)' | |
| }); | |
| var circle=svg.append('circle') | |
| .attr({ | |
| cx:0, | |
| cy:0, | |
| r:innerRadius | |
| }) | |
| .style({ | |
| fill:color[2], | |
| 'fill-opacity':.5 | |
| }); | |
| var middleCount=svg.append('text') | |
| .datum(0) | |
| .text(function(d){ | |
| return d+'%'; | |
| }) | |
| .attr({ | |
| class:'middleText', | |
| 'text-anchor':'middle', | |
| dy:27 | |
| }) | |
| .style({ | |
| fill:d3.rgb(color[1]).brighter(2), | |
| 'font-size':'80px' | |
| }); | |
| var oldValue=0; | |
| var arcTween=function(transition, newValue,oldValue) { | |
| transition.attrTween("d", function (d) { | |
| var interpolate = d3.interpolate(d.endAngle, ((2*Math.PI))*(newValue/100)); | |
| var interpolateCount = d3.interpolate(oldValue, newValue); | |
| return function (t) { | |
| d.endAngle = interpolate(t); | |
| middleCount.text(Math.floor(interpolateCount(t))+'%'); | |
| return arcLine(d); | |
| }; | |
| }); | |
| }; | |
| var animate=function(){ | |
| pathForeground.transition() | |
| .duration(750) | |
| .ease('cubic') | |
| .call(arcTween,percent,oldValue); | |
| oldValue=percent; | |
| percent=(Math.random() * 60) + 20; | |
| setTimeout(animate,1500); | |
| }; | |
| setTimeout(animate,0); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment