JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<div id="chart"></div>

CSS

body {
  font-family: 'Open Sans', sans-serif;
}
.title-holder {
  text-align: center;
}
.title {
  font-family: 'Lato', sans-serif;
}
.subtitle {
  font-size: 20px;
}
.font {
  font-size: 18px;
}

/* legend */
.legend {
  font-size: 14px;
}
rect {
  cursor: pointer; 
  stroke-width: 2;
}
rect.disabled {
  fill: transparent !important;
}

/* chart */
#chart {
  height: 800px;
  margin: 0 auto;
  position: relative;
  display: block;
  width: 1200px;
}

/* tooltip */
.tooltip {
  background: #eee;
  box-shadow: 0 0 5px #999999;
  color: #333;
  display: none;
  font-size: 18px;
  left: 130px;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 95px;
  width: 80px;
  z-index: 10;
}

.footer {
  padding-top: 50px;
  text-align: center;
  list-style-type: none;
}

JavaScript

// define data
var dataset = [
    {label: "Assamese", count: 13},
    {label: "Bengali", count: 83},
    {label: "Bodo", count: 1.4},
    {label: "Dogri", count: 2.3},
    {label: "Gujarati", count: 46},
    {label: "Hindi", count: 300},
    {label: "Kannada", count: 38},
    {label: "Kashmiri", count: 5.5},
    {label: "Konkani", count: 5},
    {label: "Maithili", count: 20},
    {label: "Malayalam", count: 33},
    {label: "Manipuri", count: 1.5},
    {label: "Marathi", count: 72},
    {label: "Nepali", count: 2.9},
    {label: "Oriya", count: 33},
    {label: "Punjabi", count: 29},
    {label: "Sanskrit", count: 0.01},
    {label: "Santhali", count: 6.5},
    {label: "Sindhi", count: 2.5},
    {label: "Tamil", count: 61},
    {label: "Telugu", count: 74},
    {label: "Urdu", count: 52}
  ];

// chart dimensions
var width = 1200;
var height = 800;

// a circle chart needs a radius
var radius = Math.min(width, height) / 2;

// legend dimensions
var legendRectSize = 25; // defines the size of the colored squares in legend
var legendSpacing = 6; // defines spacing between squares

// define color scale
var color = d3.scaleOrdinal(d3.schemeCategory20c);
// more color scales: https://bl.ocks.org/pstuffa/3393ff2711a53975040077b7453781a9

var svg = d3.select('#chart') // select element in the DOM with id 'chart'
  .append('svg') // append an svg element to the element we've selected
  .attr('width', width) // set the width of the svg element we just added
  .attr('height', height) // set the height of the svg element we just added
  .append('g') // append 'g' element to the svg element
  .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')'); // our reference is now to the 'g' element. centerting the 'g' element to the svg element

var arc = d3.arc()
  .innerRadius(0) // none for pie chart
  .outerRadius(radius); // size of overall chart

var pie = d3.pie() // start and end angles of the segments
  .value(function(d) { return d.count; }) // how to...