circle chart D3

by Rishabh Sharma

HTML

<script src="https://d3js.org/d3.v4.js"></script>
<svg id="info"></svg>

JavaScript

var svg = d3.select('svg');

var data = [60, 40, 20];
var values = [95, 72, 35];
var txtPos = [120, 80, 40];
var colors = [
  '#F9DB63',
  '#2AC6FF',
  '#1F87C4'
];

var g = svg.append('g')
	.attr('class', 'circles');
  
var txt = svg.append('g')
	.attr('class', 'txt');
  
g.selectAll('circle')
	.data(data)
  .enter()
  .append('circle')
  .attr('cx', 80)
  .attr('cy', function(d) {
  	return 140 - d;
  })
  .attr('r', function(d) {
  	return d;
  })
  .attr('fill', function(d, i) {
  	return colors[i];
  })
  
g.selectAll('text')
	.data(values)
  .enter().append('text')
  .attr('x', 74)
  .attr('y', function(d,i) {
  	return txtPos[i] + 5;
  })
  .style('font-size', '12px')
  .style('fill', '#fff')
  .text(function(d) {
  return d;
  });