D3.js donut chart

by Rishabh Sharma

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
  background-color: white;
}

text {
  font: 10px sans-serif;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

JavaScript

var dataset = {
  apples: [28479, 53245],
  oranges: [28479, 83245],
  lemons: [28479, 63245],
  pears: [28479, 43245],
  pineapples: [28479, 33245],
};

var lineData = [10,20,30,40,50];
var labels = ['Gold Premium', 'Gold', 'Silver Premium', 'Silver', 'Bronze'];

var width = 500,
    height = 300,
    cwidth = 25;

var color = [["#fff", "red"], ["#fff", "green"], ["#fff", "blue"], ["#fff", "yellow"], ["#fff", "purple"]];

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
   
var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");

var lines = svg.append('g')
	.attr('class', 'lines')
  .attr('transform', 'translate(0,-115)')
  
var textGroup = svg.append('g')
	.attr('class', 'text-group')
  .attr('transform', 'translate(0,-115)');
  
var textGroup2 = svg.append('g')
	.attr('class', 'text-group2')
  .attr('transform', 'translate(0,-115)');
  
var imageGroup = svg.append('g')
	.attr('class', 'image-group')
  .attr('transform', 'translate(0,-127)')  


var path = gs.selectAll("path")
    .data(function(d) { return pie(d); })
  .enter().append("path")
    .attr("fill", function(d, i, j) { return color[j][i]; })
    .attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); });
    

lines.selectAll('line')
	.data(lineData)
  .enter()
  .append('line')
  .attr('x1', 10)
  .attr('y1', function(d, i) {
  	return 25 * i
  })
  .attr('x2', 150)
  .attr('y2', function(d, i) {
  	return 25 * i
  })
  .attr('stroke-width', 0.5)
  .attr('stroke', 'black');
  
textGroup.selectAll('text')
	.data(lineData)
  .enter()
  .append('text')
  .attr('x', 10)
  .attr('y', function(d, i) {
  	return 24 * i
  })
  .text('50');
  
textGroup2.selectAll('text')
	.data(labels)
  .enter()
  .append('text')
  .attr('x', 175)
 ...