d3 pie chart

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>

CSS

div.bar {
  display: inline-block;
  width: 20px;
  height: 75px;
  background-color: teal;
  margin-right: 2px;
}

JavaScript

const dataset = [6, 10, 20, 25, 5, 45];
const color = d3.scaleOrdinal(d3.schemeCategory10);

const pie = d3.pie();

const width = 300;
const height = 300;

const outerRadius = width / 2;
const innerRadius = width / 3;
const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);

const svg = d3.select('body')
	.append('svg')
  .attr('width', width)
  .attr('height', height)
  
const arcs = svg.selectAll('g.arc')
	.data(pie(dataset))
  .enter()
  .append('g')
  .attr('class', 'arc')
  .attr('transform', 'translate(' + outerRadius + ', ' + outerRadius + ')')
  
arcs.append('path')
	.attr('fill', (d, i) => color(i))
  .attr('d', arc)
  
arcs.append('text')
	.attr('transform', d => 'translate(' + arc.centroid(d) + ')')
  .attr('text-anchor', 'middle')
  .attr('fill', 'white')
  .attr('font-family', 'sans-serif')
  .text(d => {
  	return d.value;
  })