The /components/ChartsTab folder contains two component files: ChartsTab.js and PieChart.js. The ChartsTab component contains two instances of the PieChart component, one for income and one for expenses. Each PieChart component displays either the raw or cooked percentages by category. The user can switch between raw or cooked views via buttons directly above the chart. The drawChart() method in PieChart.js uses D3 to render the pie chart and legend. It uses D3's built-in animations to animate each piece of the pie when loading:

arc
  .append('path')
  .attr('fill', d => colorScale(d.data.category))
  .transition()
  .delay((d, i) => i * 100)
  .duration(500)
  .attrTween('d', d => {
    const i = d3.interpolate(d.startAngle + 0.1, d.endAngle);
    return t => {
      d.endAngle = i(t);
      return arcPath(d);
    };
  });

The preceding snippet, taken from drawChart() in PieChart.js, defines the animation for the pie piece in only a few lines of code. If you're interested in learning more about D3's capabilities, check out some the examples at https://bl.ocks.org. That's it for the components review; let's try running the application.