JSFiddle - React, Tailwind, and code Playground

by heavyhorse

HTML

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

CSS

body {
  font: 10px sans-serif;
}

.arc path {
  stroke: #fff;
}

text {
    text-rendering: optimize-legibility;
}

JavaScript

var width = 500,
    height = 500,
    radius = width / 3;

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.value; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


 var data_values = [1, 1, 1, 1, 1, 48, 1, 1, 4];
var titles = ["Pakistan", "Israel", "Netherlands", "Italy", "Uruguay", "USA", "United Kingdom", "Austria", "China"]

var data = []

for (var x=0;x<data_values.length;x++){
   var tmp = {}
   tmp.label = titles[x]
   tmp.value = data_values[x]
   data.push(tmp)
}
	/*
  data.forEach(function(d) {
    d.population = +d.population;
  }); */

  var g = svg.selectAll(".arc")
      .data(pie(data))
    .enter().append("g")
      .attr("class", "arc");

  g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.label); });

  var pos = d3.svg.arc().innerRadius(radius + 2).outerRadius(radius + 2); 
  
  var getAngle = function (d) {
      return (180 / Math.PI * (d.startAngle + d.endAngle) / 2 - 90);
  };
  
  g.append("text")
      .attr("transform", function(d) { 
              return "translate(" + pos.centroid(d) + ") " +
                      "rotate(" + getAngle(d) + ")"; }) 
      .attr("dy", 5) 
      .style("text-anchor", "start")
      .text(function(d) { return d.data.label; });
/*
.append("text")
      .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
      .text(function(d) { return d.key; }); */