Finishing Touches
Understand how to apply inner and outer padding to band scales in D3.js for better spacing in stacked bar charts. Learn to calculate total population from grouped data, then sort the bars in descending order to improve chart clarity and reader insight.
We'll cover the following...
We are going to make some final adjustments to the stacked bar chart. First, let’s add some spacing between each bar. They seem too crowded at the moment. Second, we are going to sort the bars. Even though the bars are sorted by state, it would be better if they were sorted by population. The primary focus of this chart is population. Most readers will want to know where their states rank in population.
Adding padding
We will tackle the spacing issue first. We can configure spacing between bars by modifying the band scale. The band scale is responsible for distributing the bars across the x-axis.
We can modify the band scale by adding padding. There are two types of padding we can add, inner and outer padding. We are going to chain two functions called paddingInner() and paddingOuter(). We will pass in ...