pie chart browser usage

forked from vjwilson's block: pie chart browser usage

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);
    var width = svg.attr("width");
    var height = svg.attr("height");
    var radius = Math.min(width, height) / 2;
    var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var data = [
    { browser: 'Chrome', percent: 73.70 },
    { browser: 'IE/Edge', percent: 4.90 },
    { browser: 'Firefox', percent: 15.40 },
    { browser: 'Safari', percent: 3.60 }
  ];

var color = d3.scaleOrdinal(['#4daf4a','#377eb8','#ff7f00','#984ea3','#e41a1c']);

// Generate the pie
    var pie = d3.pie().value(function(d) {
        return d.percent;
    });

// Generate the arcs
    var arc = d3.arc()
                .innerRadius(0)
                .outerRadius(radius - 50);
    var label = d3.arc()
                  .outerRadius(radius)
                  .innerRadius(radius - 20);

//Generate groups
    var arcs = g.selectAll(".arc")
                .data(pie(data))
                .enter()
                .append("g")
                .attr("class", "arc")

//Draw arc paths
    arcs.append("path")
        .attr("fill", function(d) {
            return color(d.data.browser);
        })
        .attr("d", arc);

arcs.append("text")
       .attr("transform", function(d) {
                return "translate(" + label.centroid(d) + ")";
        })
    		.attr('text-anchor', 'middle')
       .text(function(d) {
          console.log('d', d);
          return d.data.browser + ' (' + d.data.percent + '%)';
        });

svg.append("g")
       .attr("transform", "translate(" + (width / 2) + "," + (height - 20) + ")")
       .append("text")
       .text("Browser use statistics - Jan 2017")
       .attr("class", "title")
    	 .attr('text-anchor', 'middle');

</script>
</body>

https://d3js.org/d3.v4.min.js