pie grid

forked from zhangzihaoDT's block: muiltiple pie

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        text-align: center;
      	margin: 10px;
    }
</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 = [
//             [3.053204794, 1.590265768],
          [0.053204794, 1.590265768],
            [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.651749857, 0.348250143],
            [0.630316249, 0.369683751],
            [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 = 35,
            radius = width / data.length - m,
            z = d3.scaleOrdinal().domain([0, 3])
                .range(d3.schemeSet2);

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 / 1.5 + 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)
        		.style("fill", "red")
//         		.style("stroke", "violet")
        		.style("border", "1px solid blue")
            .attr("transform", function (d, i) {
                if (i >= data.length / 4) {
                    return "translate(" + (radius + m) * 4 * (data.length - i - 1 + .5) + "," + (radius + m) * 3 + ")"
                } else {
                    return "translate(" + (radius + m) * 4 * (i + .5) + "," + (radius + m) + ")"
                }

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

// 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", "0.5em")
            .style("text-anchor", "middle")
            .text(function (d, i) { return d3.format(",.0%")(d[0]); });
      
        points.append("text")
            .attr("dy", "5em")
            .style("text-anchor", "middle")
            .text(function (d, i) { return d3.format(",.0%")(d[1]); });

</script>

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