Ring chart

<body >

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>

https://d3js.org/d3.v4.0.0-alpha.4.min.js