Snap Spending: Exploring differences in rank

I'm inaugurating this blog with a visualization project I did a while ago as an attempt to build something with D3.js from scratch. The left bar shows the average budget for a household that receives SNAP (food stamps), and the right bar shows average budgets in households that don't use SNAP. Each bar section represents a food type, and the section heights are scaled according to the proportion of the average food budget that food type represents.  The sections are arranged in descending order of height from top to bottom.

The idea here is to highlight significant differences between SNAP-household food spending and non-SNAP spending while giving you an overview of all the data. Differences are highlighted in two ways: the food categories on the left are assigned colors in a gradient based on their order, then in the second column the food items retain the same color they were assigned in the first column. Thus, significant differences in rank correspond to significant violation of the rainbow-order in the second column. Secondly, the lines connecting the same food category allow you to pick out the larger discrepancies from their steeper inclines.

The graphic becomes more muddled towards the bottom since the bar heights are so small, and this type of visualization may not be ideal for a data set with so many categories for that reason. However, my thinking was initially that it was acceptable that the differences were harder to pick out among lower-ranking items because they make up such a small share of the budget and that large rank differences between these lower-ranking items should be viewed as less significant anyway.