d3indepth/.block

## .block
license: gpl-3.0
height: 120
border: no

## README.md

      
    Raw
  

              README.md
            
          
    Pie start and end angle.
From D3 in Depth book by Peter Cook.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Pie start and end angle</title>
</head>

<style>
path {
	fill: orange;
	stroke: white;
}
</style>

<body>
  <svg width="700" height="110">
  	<g transform="translate(300, 110)"></g>
  </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var pieGenerator = d3.pie()
	.startAngle(-0.5 * Math.PI)
	.endAngle(0.5 * Math.PI);

var data = [10, 40, 30, 20, 60, 80];

// Create an arc generator with configuration
var arcGenerator = d3.arc()
	.innerRadius(20)
	.outerRadius(100);

var arcData = pieGenerator(data);

// Create a path element and set its d attribute
d3.select('g')
	.selectAll('path')
	.data(arcData)
	.enter()
	.append('path')
	.attr('d', arcGenerator);
  </script>
</body>
</html>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<title>Pie start and end angle</title>
	</head>

	<style>
	path {
	fill: orange;
	stroke: white;
	}
	</style>

	<body>
	<svg width="700" height="110">
	<g transform="translate(300, 110)"></g>
	</svg>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
	<script>
	var pieGenerator = d3.pie()
	.startAngle(-0.5 * Math.PI)
	.endAngle(0.5 * Math.PI);

	var data = [10, 40, 30, 20, 60, 80];

	// Create an arc generator with configuration
	var arcGenerator = d3.arc()
	.innerRadius(20)
	.outerRadius(100);

	var arcData = pieGenerator(data);

	// Create a path element and set its d attribute
	d3.select('g')
	.selectAll('path')
	.data(arcData)
	.enter()
	.append('path')
	.attr('d', arcGenerator);
	</script>
	</body>
	</html>