Skip to content

Instantly share code, notes, and snippets.

@getsetbro

getsetbro/d3donutdial.html

Created December 3, 2015 16:53
Show Gist options
  • Save getsetbro/3896da6d663e69bb6835 to your computer and use it in GitHub Desktop.
Save getsetbro/3896da6d663e69bb6835 to your computer and use it in GitHub Desktop.
Download ZIP
d3 donut dial
Raw
d3donutdial.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>d3 donut dial</title>
<style media="screen">
body{
margin: 0;
font: 15px/1 sans-serif;
}
header, footer{
height: 50px;
background-color: #333
}
.row{
background-color: #eee;
}
.col-xs-4{
box-sizing: border-box;
display: inline-block;
width: 33.33333333%;
}
</style>
</head>
<body>
<header>...</header>
<div class="contr">
<div class="row">
<div class="col-xs-4">
<div id="a1"></div>
<center>1 of 4<br>correct answers</center>
</div><!-- inline-block spacer
--><div class="col-xs-4">
<div id="a2"></div>
<center>3 of 4<br>correct answers</center>
</div><!-- inline-block spacer
--><div class="col-xs-4">
<div id="a3"></div>
<center>2 of 4<br>corrent answers</center>
</div>
</div>
</div>
<footer>&copy;</footer>
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
function createPieDonuts(obj){
'use strict';
var data = [obj.percent, (100 - obj.percent)];
var width = obj.size,height = obj.size,radius = Math.min(width, height) / 2;
var pie = d3.layout.pie().sort(null);
var arc = d3.svg.arc().innerRadius(radius - (obj.size/12)).outerRadius(radius);
var svg = d3.select(obj.element)
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox","0 0 " + width + " " + height)
.attr("preserveAspectRatio","xMidYMid meet")
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("fill", function(d, i) { return obj.colors[i]; })
.attr("d", arc);
svg.append("text")
.attr("text-anchor", "middle")
.attr("font-size", "2.3em")
.attr("font-weight", "bold")
.attr("dy", ".2em")
.text(obj.percent)
.append("tspan")
.attr("font-size", ".5em")
.text("%");
svg.append("text")
.attr("text-anchor", "middle")
.attr("y",28)
.attr("font-weight", "bold")
.text(obj.text);
}
createPieDonuts({percent:25,size:155,element:"#a1",colors:["orange","#fff"],text:"Text"});
createPieDonuts({percent:75,size:155,element:"#a2",colors:["orangered","pink"],text:"People"});
createPieDonuts({percent:50,size:155,element:"#a3",colors:["gold","#fff"],text:"People"});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment