d3:pie-chart

by Richard Hunter

HTML

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

JavaScript

const data = [{
    name: 'apples',
    value: 3
  },
  {
    name: 'pears',
    value: 4
  },
  {
    name: 'bananas',
    value: 5
  },
  {
    name: 'carrot',
    value: 10
  },
  {
    name: 'grapefruit',
    value: 25
  }
];

const width = 300;
const height = 300;
const outerRadius = width / 2;
const innerRadius = 80;

const arc = d3.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius);

const pieFn = d3.pie();

const color = d3.scaleOrdinal(d3.schemeCategory10);

const svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

const arcs = svg.selectAll("g.arc")
  .data(pieFn(data.map(d => d.value)))
  .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')
  .text((d, i) => data[i].name)