Pie charts are a very common way of presenting simple quantitative data, but they have their own limitations--people have greater difficulty perceiving the size of an area when it's in a circular shape, and you really need to make sure that the wedges are ordered descending clockwise from the top in order to be able to adequately compare them. That said, they're common enough that knowing how to make them is an incredibly useful skill as anyone doing data visualization work will at some point be asked for one.

D3's pie chart layout resides in the d3-shape package and is somewhere between the layouts of the last chapter and the line generators of Chapter 3, Shape Primitives of D3. We create a pie chart layout and pass it an array of numbers and then pass that to an arc generator to create our pie chart. Let's get to it.

We start by filtering out people who have less than 60 minutes of screen time and creating a pie generator, using the value() method to let the pie generator know which field to use to size the pie chart slices. We then create an arc generator, setting the outer radius to a quarter of the screen size. We then create a group and translate it into the center of the screen:

westerosChart.pie = function Pie(_data) { 
  const data = _data.filter(d => d.screentime > 60); 
  const pie = d3.pie().value(d => +d.screentime); 
  const arc = d3.arc() 
    .outerRadius(this.innerWidth / 4) 
    .innerRadius(null); 

  const chart = this.container.append('g') 
    .classed('pie', true) 
    .attr('transform', `translate(${this.innerWidth / 2}, ${this.innerHeight / 2})`); 
}; 
export default westerosChart;

Next, we render the slices. Add the following to our Pie() function:

  const slices = chart.append('g') 
    .attr('class', 'pie') 
    .selectAll('.arc') 
    .data(pie(data).sort((a, b) => b.data.screentime - a.data.screentime)) 
    .enter() 
    .append('path') 
    .attr('d', arc) 
    .classed('arc', true) 
    .attr('fill', d => color(d.data.itemLabel));

Here, we pass our data to the pie generator, and then sort the object it returns using the screentime property (which now resides in each datum's data property since we're looking at the result of the layout). We then pass that to the arc generator and use that to generate our paths. We then pass our itemLabel (also in the data property) to the color scale.

Let's add the tooltips and legend in one fell swoop:

  slices.call(tooltip(d => d.data.itemLabel, this.container)); 
  this.container 
    .append('g') 
    .attr('id', 'legend') 
    .attr('transform', 
      `translate(${this.innerWidth - 150}, ${(this.innerHeight / 2) - 250})`) 
    .call(legend.legendColor().scale(color));

Here's how it looks:

If you want to create a donut chart (that is, a pie chart with a hole in it), simply set the arc.innerRadius property to a value, as follows:

.innerRadius(this.innerWidth / 4.5);

You will get something like this:

That's pretty much all there is to the pie layout. This is easy, right? You got this!