akobashikawa/d3-manual-pie.html

## d3-manual-pie.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Manually Pie</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <style>
        path {
            fill: orange;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Manually Pie</h1>

        <div id="graph"></div>
    </div>


    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        const tau = 2 * Math.PI;

        const data = [1, 2, 3];

        // Create an arc generator with configuration
        const arcGenerator = d3.arc()
            .innerRadius(0)
            .outerRadius(100)
            .padAngle(0.01 * Math.PI);

        // Create a path element and set its d attribute
        const svg = d3.select('#graph')
            .append('svg')
            .attr("width", 500)
            .attr("height", 500)
            .style("border", "1px solid");

        const total = d3.sum(data);
        console.log(total);
        const offsets = data.reduce((acc, x) => {
            acc += x
        });
        console.log(offsets);
        const colors = ['red', 'lime', 'blue'];

        svg.append('g')
            .attr('transform', 'translate(250, 250)')
            .selectAll('g')
            .data(data)
            .enter()
            .append('path')
            .attr('d', function (d, i) {
                const startAngle = 0;
                const endAngle = tau;
                const path = arcGenerator({
                    startAngle,
                    endAngle
                });
                return path;
            })
            ;
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Manually Pie</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<style>
	path {
	fill: orange;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<h1>Manually Pie</h1>

	<div id="graph"></div>
	</div>


	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<script>
	const tau = 2 * Math.PI;

	const data = [1, 2, 3];

	// Create an arc generator with configuration
	const arcGenerator = d3.arc()
	.innerRadius(0)
	.outerRadius(100)
	.padAngle(0.01 * Math.PI);

	// Create a path element and set its d attribute
	const svg = d3.select('#graph')
	.append('svg')
	.attr("width", 500)
	.attr("height", 500)
	.style("border", "1px solid");

	const total = d3.sum(data);
	console.log(total);
	const offsets = data.reduce((acc, x) => {
	acc += x
	});
	console.log(offsets);
	const colors = ['red', 'lime', 'blue'];

	svg.append('g')
	.attr('transform', 'translate(250, 250)')
	.selectAll('g')
	.data(data)
	.enter()
	.append('path')
	.attr('d', function (d, i) {
	const startAngle = 0;
	const endAngle = tau;
	const path = arcGenerator({
	startAngle,
	endAngle
	});
	return path;
	})
	;
	</script>
	</body>

	</html>