pie chart

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pie Chart</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>

var _width = 500, _height = 500,
                _data = [],
                _colors = d3.scaleOrdinal(d3.schemeCategory10),
                _svg,
                _bodyG,
                _pieG,
                _radius = 200,
                _innerRadius = 100,
                _duration = 1000;

_chart.render = function () {
            if (!_svg) {
                _svg = d3.select("body").append("svg")
                        .attr("height", _height)
                        .attr("width", _width);
            }

renderBody(_svg);
        };

function renderBody(svg) {
            if (!_bodyG)
                _bodyG = svg.append("g")
                        .attr("class", "body");

renderPie();
        }

function renderPie() {
            var pie = d3.pie() // <-A
                    .sort(function (d) {
                        return d.id;
                    })
                    .value(function (d) {
                        return d.value;
                    });

var arc = d3.arc()
                    .outerRadius(_radius)
                    .innerRadius(_innerRadius);

if (!_pieG)
                _pieG = _bodyG.append("g")
                        .attr("class", "pie")
                        .attr("transform", "translate(" 
                            + _radius 
                            + "," 
                            + _radius + ")");

renderSlices(pie, arc);

renderLabels(pie, arc);
        }

function renderSlices(pie, arc) {
            var slices = _pieG.selectAll("path.arc")
                    .data(pie(_data)); // <-B

slices.enter()
                    .append("path")
                .merge(slices)
                    .attr("class", "arc")
                    .attr("fill", function (d, i) {
                        return _colors(i);
                    })
                .transition()
                    .duration(_duration)
                    .attrTween("d", function (d) {
                        var currentArc = this.__current__; // <-C

if (!currentArc)
                            currentArc = {startAngle: 0,
                                            endAngle: 0};

var interpolate = d3.interpolate(
                                            currentArc, d);

this.__current__ = interpolate(1);//<-D

return function (t) {
                            return arc(interpolate(t));
                        };
                    });
        }

function renderLabels(pie, arc) {
            var labels = _pieG.selectAll("text.label")
                    .data(pie(_data)); // <-E

labels.enter()
                    .append("text")
                .merge(labels)
                    .attr("class", "label")
                .transition()
                    .duration(_duration)
                    .attr("transform", function (d) {
                        return "translate("
                            + arc.centroid(d) + ")"; // <-F
                    })
                    .attr("dy", ".35em")
                    .attr("text-anchor", "middle")
                    .text(function (d) {
                        return d.data.id;
                    });
        }

_chart.width = function (w) {
            if (!arguments.length) return _width;
            _width = w;
            return _chart;
        };

_chart.height = function (h) {
            if (!arguments.length) return _height;
            _height = h;
            return _chart;
        };

_chart.colors = function (c) {
            if (!arguments.length) return _colors;
            _colors = c;
            return _chart;
        };

_chart.radius = function (r) {
            if (!arguments.length) return _radius;
            _radius = r;
            return _chart;
        };

_chart.innerRadius = function (r) {
            if (!arguments.length) return _innerRadius;
            _innerRadius = r;
            return _chart;
        };

_chart.data = function (d) {
            if (!arguments.length) return _data;
            _data = d;
            return _chart;
        };

return _chart;
    }

function randomData() {
        return Math.random() * 9 + 1;
    }

function update() {
        for (var j = 0; j < data.length; ++j)
            data[j].value = randomData();

chart.render();
    }

var numberOfDataPoint = 6,
            data = [];

data = d3.range(numberOfDataPoint).map(function (i) {
        return {id: i, value: randomData()};
    });

var chart = pieChart()
            .radius(200)
            .innerRadius(100)
            .data(data);

chart.render();
</script>

<div class="control-group">
    <button onclick="update()">Update</button>
</div>

</body>

</html>

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