Как сделать подобный прогресс-бар с деление на три секции с разными цветами?

Вот код из *.html, откроешь как страницу, с которой можно стянуть сам <svg>...</svg> Меняй долевые значения переменных в последней строке

<svg id="circle_svg" width="30" height="30"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    function circle(svgId, v1, v2, v3) {
        var svg = d3.select("#" + svgId),
            width = +svg.attr("width"),
            height = +svg.attr("height"),
            radius = Math.min(width, height) / 2,
            g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
        var color = d3.scaleOrdinal(["lime", "red" ,"blue"]);
        var data = [v1, v2, v3];
        var pie = d3.pie()
            .sort(null)
            .value(function (d) {
                return d;
            });
        var path = d3.arc()
            .outerRadius(radius)
            .innerRadius(radius - 4);
        var arc = g.selectAll(".arc")
            .data(pie(data))
            .enter().append("g")
            .attr("class", "arc");
        arc.append("path")
            .attr("d", path)
            .attr("fill", function (d) {
                return color(d.value);
            });
    }
    circle('circle_svg', 3, 5, 4);
</script>