Skip to content

Instantly share code, notes, and snippets.

@IgorDePaula
Created August 28, 2014 16:59
Show Gist options
  • Save IgorDePaula/0a8e0dfb8641591f7962 to your computer and use it in GitHub Desktop.
Save IgorDePaula/0a8e0dfb8641591f7962 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<head>
<meta HTTP-EQUIV="X-UA-COMPATIBLE" CONTENT="IE=EmulateIE9" >
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
.progress-meter .background {
fill: #ccc;
}
.progress-meter .foreground {
fill: #000;
}
.progress-meter text {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: bold;
}
</style>
<body></body>
<script>
var width = 320,
height = 170,
twoPi = 2 * Math.PI,
progress = 0,
total = 100, // must be hard-coded if server doesn't report Content-Length
formatPercent = d3.format(".0%");
var arc = d3.svg.arc()
.startAngle(0)
.innerRadius(60)
.outerRadius(80);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var meter = svg.append("g")
.attr("class", "progress-meter");
meter.append("path")
.attr("class", "background")
.attr("d", arc.endAngle(twoPi));
var foreground = meter.append("path")
.attr("class", "foreground");
var text = meter.append("text")
.attr("text-anchor", "middle")
.attr("dy", ".35em");
var i = d3.interpolate(progress, 85 / total);
d3.transition().tween("progress", function() {
return function(t) {
progress = i(t);
foreground.attr("d", arc.endAngle(twoPi * progress));
text.text(formatPercent(progress));
};
});
/* var width = 960,
height = 500;
var arc = d3.svg.arc()
.innerRadius(100)
.outerRadius(150);
var data = [21, 32, 35, 64, 83];
var color = d3.scale.category10();
var pie = d3.layout.pie();
var arcData = pie(data);
d3.select('body').append('svg')
.attr("width", width)
.attr("height", height)
.append('g').attr('transform', 'translate(200, 175)')
.selectAll('path').data(arcData).enter()
.append('path').attr('d', arc).style('fill', function(d, i){
return color(i);
});*/
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment