Pie chart by nitaku

index.js

(function() {
  var arc, color, csv, data, g, height, pie, radius, svg, width;

  csv = 'category,value\none,123\ntwo,534\nthree,230\nfour,56';

  data = d3.csv.parse(csv);

  data.forEach(function(d) {
    return d.value = +d.value;
  });

  width = 960;

  height = 500;

  radius = Math.min(width, height) / 2;

  color = d3.scale.ordinal().range(["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02", "#a6761d"]);

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

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

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

  g = svg.selectAll(".arc").data(pie(data)).enter().append("path").attr('class', 'arc').attr("d", arc).style("fill", function(d) {
    return color(d.data.category);
  });

}).call(this);

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="Pie chart" />
  <title>Pie chart</title>
  <link rel="stylesheet" href="index.css">
  <script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
  <script src="index.js"></script>
</body>
</html>

index.coffee

csv = '''
category,value
one,123
two,534
three,230
four,56
'''

data = d3.csv.parse csv
data.forEach (d) ->  d.value = +d.value


width = 960
height = 500
radius = Math.min(width, height) / 2

color = d3.scale.ordinal()
  .range(["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d"])

arc = d3.svg.arc()
    .outerRadius(radius - 40)
    .innerRadius(0)

pie = d3.layout.pie()
    .sort(null)
    .value((d) -> d.value )

svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr
      transform: "translate(#{width/2}, #{height/2})"

g = svg.selectAll(".arc")
    .data(pie(data))
  .enter().append("path")
    .attr('class','arc')
    .attr("d", arc)
    .style("fill", (d) -> color(d.data.category) )

index.css

svg {
  background-color: white;
}
.arc {
  stroke-width: 1;
  stroke: white;
  stroke-linejoin: round;
}