Display "comparing budget" on right/bottom

[tdooner]

This was a minor UI snag that I noticed during the OpenBudget demo: I found myself wanting to compare the budget in a left-to-right fashion (or top-to-bottom) chronologically.

By default, the budget I am "comparing" is the FY17-18 one. In general, the default will probably always be the most recent available budget. I'd argue that we should display the bars such that FY16-17 is to the left or top, and FY17-18 (as the most recent budget) is to the right or bottom by default.

Perhaps running past CUT group, but hey, I just wanted a chance to read through this code and thought this would be a nice tiny change to get my feet wet.

Before:

After:

(The color coding helps quite a bit in understanding what happens when the budget to compare against is changed.)

The one gotcha here is that the colors array is given by D3. I was going to just switch the default budgets around, but I like that the current budget is in green rather than orange.

[macfarlandian]

we did have CUT group look at this actually ..... people were pretty much 50:50 on what order they expected things to be in.

Personally I think it's less confusing if the budgets appear in the same "order" everywhere, assuming a person is reading left-to-right and top-to-bottom; i.e. green should always come before orange, or vice versa. Implementation-wise I think this is also preferable: you reverse() the datasets once, if necessary, at the root, rather than every component having to remember to do it in order to stay in sync with the rest of the page.

I put new before old somewhat arbitrarily — in my newspaper days, the AP stylebook dictated that order for making comparisons .... seemed as good a rule as any. That said, I'm open to being convinced otherwise? (i.e. by a use case beyond personal preference, since ours are currently competing)