title: How do I style my pie-chart like this?
body: <p><img src="https://i.stack.imgur.com/ojqP4.jpg" alt="enter image description here"></p>
  
  <hr>
  
  <p><a href="http://jsfiddle.net/rdesai/KQ93N/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <hr>
  
  <p>My code so far:</p>
  
  <pre><code>var data = [
      {
          "mood": "Joy",
          "value": 400
      },
      {
          "mood": "Worry",
          "value": 100
      },
      {
          "mood": "Anger",
          "value": 50
      },
      {
          "mood": "Sadness",
          "value": 100
      },
      {
          "mood": "Frustration",
          "value": 200
      },
      {
          "mood": "Hope",
          "value": 300
      },
      {
          "mood": "Admiration",
          "value": 100
      }
  ];
  
  var width = 400,
      height = 500,
      radius = Math.min(width, height) / 2;
  
  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 + ")");
  
  //d3.csv("data.csv", function(error, data) {
  
  data.forEach(function(d) {
      d.value = +d.value;
  });
  
  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.mood); });
  
  g.append("text")
  .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
  .attr("dy", ".35em")
  .style("text-anchor", "middle")
  .text(function(d) { return d.data.mood; });
  
  //});
  </code></pre>