September 2018
Intermediate to advanced
328 pages
9h 10m
English
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); ...Read now
Unlock full access