Skip to content

Instantly share code, notes, and snippets.

@kenfdev

kenfdev/.block

Created August 21, 2018 02:53
Show Gist options
  • Save kenfdev/f2ca298ca71a02aedbafb3a109f511f4 to your computer and use it in GitHub Desktop.
Save kenfdev/f2ca298ca71a02aedbafb3a109f511f4 to your computer and use it in GitHub Desktop.
Download ZIP
Progressive pie chart 1
Raw
.block
license: mit
Raw
index.html
<!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