muiltiple pie

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        text-align: center;
    }
</style>

// Define the data as a two-dimensional array of numbers. If you had other
        // data to associate with each number, replace each number with an object, e.g.,
        // `{key: "value"}`.
        var data = [
            [0.153204794, 0.846795206],
            [0.314102564, 0.685897436],
            [0.504273504, 0.495726496],
            [0.290776446, 0.709223554],
            [0.502403846, 0.497596154],
            [0.554131054, 0.445868946],
            [0.053152684, 0.946847316],
            [0.165064103, 0.834935897],
            [0.34045584, 0.65954416],
            [0.208126858, 0.791873142],
            [0.352266208, 0.647733792],
            [0.405670665, 0.594329335],
            [0.469772052, 0.530227948],
            [0.651749857, 0.348250143],
            [0.630316249, 0.369683751],
            [0.040634291, 0.959365709],
            [0.074010327, 0.925989673],
            [0.083969466, 0.916030534],
        ];

// Define the margin, radius, and color scale. The color scale will be
        // assigned by index, but if you define your data using objects, you could pass
        // in a named field from the data object instead, such as `d.name`. Colors
        // are assigned lazily, so if you want deterministic behavior, define a domain
        // for the color scale.
        var width = window.innerWidth,
            height = window.innerHeight,
            m = 5,
            radius = width / data.length - m,
            z = d3.scaleOrdinal().domain([0, 3])
                .range(d3.schemeSet3);

var svg = d3.select(".chart").append("svg")
            .attr("width", width)
            .attr("height", height);
        var g2 = svg.append("g");

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

var arc = d3.arc()
            .innerRadius(radius / 2 + m)
            .outerRadius(radius);

// Append one g element for each row in the csv and bind data to it:
        var points = g2.selectAll("g")
            .data(data)
            .enter().append("g")
            .attr("width", (radius + m) * 2)
            .attr("height", (radius + m) * 2)
            .attr("transform", function (d, i) {
                if (i >= data.length / 2) {
                    return "translate(" + (radius + m) * 2 * (data.length - i - 1 + 0.5) + "," + (radius + m) * 3 + ")"
                } else {
                    return "translate(" + (radius + m) * 2 * (i + 0.5) + "," + (radius + m) + ")"
                }

})
            .attr("id", function (d, i) { return "chart" + i; })
            .append("g").attr("class", "pies");

// The data for each svg element is a row of numbers (an array). We pass that to
        // d3.layout.pie to compute the angles for each arc. These start and end angles
        // are passed to d3.svg.arc to draw arcs! Note that the arc radius is specified
        // on the arc, not the layout.
        points.selectAll("path")
            .data(pie)
            .enter().append("path")
            .attr("d", arc)
            .style("fill", function (d, i) {
                return z(i);
            });

points.append("text")
            .attr("dy", ".35em")
            .style("text-anchor", "middle")
            .text(function (d, i) { return d3.format(",.0%")(d[0]); });

</script>

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