D3 Examples - Ring chart

xxxxxxxxxx
 
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<head>
   
 
</head>
​
<body >
​
<div class="container">
<div class="row">
    <div class="col-md-3 col-sm-3">
                    <canvas id="mycanvas" width="450" height="450"></canvas>
                </div>
</div>
​
​
​
<script src="//d3js.org/d3.v4.0.0-alpha.4.min.js"></script>
<script>
​
var data = [17,5,2];
var data_outer = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
var data_inner = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
var data_value = [1,2,3,4,5,6,7,8,9,10,11,12, 13, 14, 15, 16, 17, 18, 19, 20,21,22,23,24];
var icon = [ "\uf1c0","\uf1c0","\uf1c0","\uf1c0","\uf1c0","\uf1c0","\uf1c0","\uf1c0","\uf1c0","\uf1c0","\uf1c0","\uf1c0","\uf1c0","\uf1c0","\uf1c0","\uf1c0","\uf1c0","\uf013","\uf013","\uf013","\uf013","\uf013","\uf009", "\uf009"];
​
​
var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");
​
var width = canvas.width,
    height = canvas.height,
    radius = (Math.min(width, height) / 2.2),
    radius_2nd = Math.min(width, height) / 2.5;
    radius_inner = Math.min(width, height) / 3;
​
var dot = d3.symbol().type(d3.symbolTriangle).context(context);
​
context.fillStyle = "black";
context.font = '20px san-serif';
​
var textString = "Usage",
    textWidth = context.measureText(textString ).width;
​
​
context.fillText(textString , (canvas.width/2) - (textWidth / 2), (canvas.height/2) );
​
​
​
var colors = [  "#394264", "#11a8ab", "#e64c65"];
var colors_icon = [  "#394264","#394264","#394264","#394264","#394264","#394264","#394264","#394264","#394264","#394264","#394264","#394264","#394264","#394264","#394264","#394264","#394264", "#11a8ab","#11a8ab","#11a8ab","#11a8ab","#11a8ab","#e64c654","#e64c654","#e64c654","#e64c654"
];
var d3_symbols = [
  d3.symbolCircle,d3.symbolTriangle,d3.symbolSquare,d3.symbolCircle,d3.symbolTriangle,d3.symbolSquare,d3.symbolTriangle,d3.symbolTriangle,d3.symbolTriangle,d3.symbolTriangle
];
​
var arc_inner = d3.arc()
    .outerRadius(radius_inner - 10)
    .innerRadius(radius_inner - 30)
    .padAngle(0.03)
    .context(context);
​
var arc_outer = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 30)
    .padAngle(0.03)
    .context(context);
​
var arc_central = d3.arc()
    .outerRadius(radius_2nd - 10)
    .innerRadius(radius_2nd - 30)
    .padAngle(0.03)
    .context(context);
​
​
var pie_outer = d3.pie();
var arcs_outer = pie_outer(data_outer);
​
var pie_inner = d3.pie();
var arcs_inner = pie_inner(data_inner);
​
var pie_2nd = d3.pie();
var arcs_central = pie_2nd(data);
​
context.translate(width / 2, height / 2);
context.globalAlpha = 0.5;
​
/*******************/
arcs_outer.forEach(function(d, i) {
  context.beginPath();
  arc_outer(d);
​
});
​
arcs_central.forEach(function(d, i) {
  context.beginPath();
  arc_central(d);
  context.fillStyle = colors[i];
  context.fill();
});
​
arcs_inner.forEach(function(d, i) {
  context.beginPath();
  arc_inner(d);
  
});
/*******************/
​
context.globalAlpha = 1;
context.beginPath();
​
/*******************/
arcs_central.forEach(arc_central);
​
​
context.beginPath();
​
arcs_outer.forEach(function(d,i) {
  var c = arc_outer.centroid(d);
  context.save();
  context.translate(c[0], c[1]);
  context.fillStyle = colors_icon[i];
  context.font = '14px FontAwesome';
  context.fillText(icon[i],-8,6);
  context.restore();
});
​
​
​
arcs_inner.forEach(function(d,i) {
      var c = arc_inner.centroid(d);
      context.save();
      context.translate(c[0]-5, c[1]+5);
      context.fillStyle = "black";
      context.font = '14px  Ubuntu';
      context.fillText(data_value[i],-1,0);
      context.restore();
        });
    context.fillStyle = "#000";
    context.fill();
    context.lineWidth = 1.5;
    context.stroke();
</script>
​
</body>
​
</html>
    