(function() {

            var numberData = [{

                    value : 0.334,

                    text : "33.4%",

                    color : "#fd12000",

                    id : 1

                }, {

                    value : 0.666,

                    text : "66.6%",

                    color : "#3611aa",

                    id : 2

                }];

            drawCir("#container", numberData, 170, 170);

            function drawCir(selector, data, height ,width) {

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

                fields = data;

                var arc = d3.svg.arc().startAngle(0.5 * Math.PI).endAngle(function(d) {

                    var direction = (d.id % 2 == 0) ? -1 : 1;

                    return 0.5 * Math.PI + direction * d.value * 2 * Math.PI;

                }).innerRadius(function(d) {

                    return radius - spacing;

                }).outerRadius(function(d) {

                    return radius;

                });

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

                var field = svg.selectAll("g").data(fields).enter().append("g");

                field.append("path");

                field.append("text");

                field = field.each(function(d) {

                    this._value = d.value;

                }).data(fields).each(function(d) {

                    d.previousValue = this._value;

                });

                field.select("path").transition().attrTween("d", arcTween).duration(1000).style("fill", function(d) {

                    return d.color;

                });

                field.select("text").text(function(d) {

                    return d.text;

                }).style("stroke", "white").attr("transform", function(d) {

                    var direction = (d.id % 2 == 0) ? -1 : 1;

                    return "rotate(" + direction * 360 * d.value / 2 + ")" + "translate(" + (radius - spacing / 2) + ",0)" + "rotate(" + (d.value < .5 ? -0 : 180) + ")"

                });

                function arcTween(d) {

                    var i = d3.interpolateNumber(0, d.value);

                    return function(t) {

                        d.value = i(t);

                        return arc(d);

                    };

                }

            }

        })();

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