JSFiddle - React, Tailwind, and code Playground

by Yurii Shpylovyi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

  <div class="app"></div>

CSS

*{
  margin:0;
  padding:0;
}
path {
	fill: orange;
	stroke: white;
}
text {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  fill: white;
  text-anchor: middle;
}
ul{
  max-width: 35%;
}
.app{
  display:flex;
}
.floatLeft{

}
.description-marker{
  width:15px;
  height:15px;
  display:inline-block;
}
.description-text{
  display:inline-block;
}

li{
  width:100%;
}

JavaScript

var data = {
	values:[
		{name: 'Apples', quantity: 20 , color:'#FBB65B'},
		{name: 'Bananas', quantity: 40, color: '#513551'},
		{name: 'Cherries', quantity: 50, color: '#de3163'},
		{name: 'Damsons', quantity: 10, color:'#513551'},
		{name: 'Elderberries', quantity: 30, color:'#de3163'},
    {name: 'Damsons', quantity: 10, color:'#513551'},
		{name: 'Elderberries', quantity: 30, color:'#de3163'},
	],
  options:{
  	width: 250,
    height: 250,
    radius: function(){ return Math.min(this.options.width, this.options.height) / 2},
    div:'donut',
    description: true
  }
}


$(document).ready(function(){
    $('.app').pieRendering(data);
});


(function($){
	$.fn.pieRendering = function() {
  var holder = $(this);
  	if(data.options.description){
    	holder.find('.description').remove();
      holder.append('<ul class="description"></ul>');
      (data.values).forEach(function(val){
      	holder.find('.description').append('<li>' + '<div class="description-marker" style="background-color:' + val.color + '"></div>' + '<div class="description-text">' + val.name + '</div>' + '</li>')
      })
    }
  	if($(data.options.div).length == 0) {
 			$(this).append('<div id="' + data.options.div + '"></div>');
      if(data.options.description) $('#' + data.options.div).addClass('floatLeft'); 
		}
    var svg = d3.select('#' + data.options.div).append("svg")
    .attr("width", data.options.width)
    .attr("height", data.options.height)
    .append("g")
    .attr("transform", "translate(" + data.options.width / 2 + "," + data.options.height / 2 + ")");

var pieGenerator = d3.pie()
	.value(function(d) {return d.quantity;})
	.sort(function(a, b) {
		return a.name.localeCompare(b.name);
	});


// Create an arc generator with configuration
var arcGenerator = d3.arc()
	.innerRadius(20)
	.outerRadius(100);

var arcData = pieGenerator(data.values);

// Create a path element and set its d...