Skip to content

Instantly share code, notes, and snippets.

@sammoorhouse

sammoorhouse/CircularProgress.js

Last active October 8, 2015 03:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sammoorhouse/a5ab1593bec33c84f090 to your computer and use it in GitHub Desktop.
Save sammoorhouse/a5ab1593bec33c84f090 to your computer and use it in GitHub Desktop.
Download ZIP
Circular Progress Control
Raw
CircularProgress.js
function CircularProgress(element, settings){
var duration = settings.duration || 500;
var w = settings.width || 200;
var h = settings.height || w;
var outerRadius = settings.outerRadius || w/2;
var innerRadius = settings.innerRadius || (w/2) * (80/100);
var range = settings.range || {min: 0, max: 100};
var fill = settings.fill || "#F20100";
var svg = d3.select(element)
.append("svg")
.attr("width", w)
.attr("height", h);
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var paths = function(numerators) {
return numerators.map(function(numerator){
var degrees = ((numerator - range.min) / (range.max - range.min)) * 360.0;
var radians = degrees * (Math.PI / 180);
var data = {value: numerator, startAngle: 0, endAngle: radians};
return data;
});
}
var g = svg.append('g').attr('transform', 'translate(' + w / 2 + ',' + h / 2 + ')');
//initialise the control
g.datum([0]).selectAll("path")
.data(paths)
.enter()
.append("path")
.attr("fill", fill)
.attr("d", arc)
.each(function(d){ this._current = d; });
svg.datum([0]).selectAll("text")
.data(paths)
.enter()
.append("text")
.attr("transform", "translate(" + w/2 + ", " + h/1.6 + ")")
.attr("text-anchor", "middle")
.text(function(d){return d.value});
this.update = function(percent) {
g.datum(percent).selectAll("path").data(paths).transition().duration(duration).attrTween("d", arcTween);
svg.datum(percent).selectAll("text").data(paths).text(function(d){return d.value;});
};
var arcTween = function(initial) {
var interpolate = d3.interpolate(this._current, initial);
this._current = interpolate(0);
return function(t) {
return arc(interpolate(t));
};
}
};
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Pie layout</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="CircularProgress.js"></script>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200' rel='stylesheet' type='text/css'>
<style type="text/css">
text {
font-family: 'Source Sans Pro', sans-serif;
font-size: 60pt;
fill: black;
}
</style>
</head>
<body>
<div id="charts"></span>
<script type="text/javascript">
var charts = document.getElementById("charts");
var progress1 = new CircularProgress(charts, {fill: "#f0f0f0"});
setInterval(function(){progress1.update([Math.floor(Math.random()*100) + 1])},1000);
var progress2 = new CircularProgress(charts, {range:{min:0,max:50}});
setInterval(function(){progress2.update([Math.floor(Math.random()*50) + 1])},3000);
var progress3 = new CircularProgress(charts, {innerRadius: 40, outerRadius: 42});
setInterval(function(){progress3.update([Math.floor(Math.random()*100) + 1])},2000);
var progress4 = new CircularProgress(charts, {});
setInterval(function(){progress4.update([Math.floor(Math.random()*100) + 1])},3000);
var progress5 = new CircularProgress(charts, {});
setInterval(function(){progress5.update([Math.floor(Math.random()*100) + 1])},1000);
var progress6 = new CircularProgress(charts, {});
setInterval(function(){progress6.update([Math.floor(Math.random()*100) + 1])},4000);
var progress9 = new CircularProgress(charts, {});
setInterval(function(){progress9.update([100])},200);
var progress10 = new CircularProgress(charts, {});
setInterval(function(){progress10.update([0])},200);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment