zhangzihaoDT/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

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

<body>
    <div class='chart'></div>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>

        // 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>

## thumbnail.png

      
    Raw
  

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

	<body>
	<div class='chart'></div>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>

	// 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>