Perhaps obvious, but I have decided that every single possible screen size requires a potentially completely different interface design, with unique decision encumbrances for all of them. Each may present a nice little puzzle, but there are a wearying number of them. And it is difficult to predict ahead of time what the necessary adjust will be be: you have to see it.

So far, I have attempted to deal with a handful of cases, a few of which are listed below. I have tested only on Chrome on a Mac, an iPad, and an iPhone. It will be interesting to see how well the other browsers handle it.

Large Screen Desktop, iPad Landscape

In this case, all of the features are available, and you can explore the detail tables.

Large screens and iPad Landscape: you can drill down into detailed tables

Small, But Room at the Bottom

In this case, there are no detailed breakdowns available, but there's sufficient space for the horizontal scroll region at the bottom, where you can select different years.

Small Screen, but Room for the Horizontal Bar

Small, and No Room at the Bottom

In this case, there are no detailed breakdowns available, nor does the horizontal scroll area have enough room (per my current parameters), but you can change years and see the totals and how the spending breaks down in terms of mandatory, interest, and discretionary.

I have yet to deal with iPhone landscape.

Friends Don't Make Friends Read Vertical Text

In some cases, the red bar for the deficit is too small for a label. In these cases, the label dynamically slides out when you select one of these years, and tries to be as non-vertical as possible (there's a little leeway still to optimize, I think). An example is shown below. It's debatable if angled text is any easier to read than vertical text, but maybe it's the thought that counts.

Moving the Deficit label out when necessary,
but not going vertical, on a small screen

Browsers tested so far

Chrome on iMac - OK

Chrome on iPad - OK

Chrome on iPhone Portrait - OK (landscape needs some redesign)

(via Browserstack) Chrome on Windows 7 - OK

(via Browserstack) Chrome on Windows 8.1 - OK

(via Browserstack) Safari on Windows 7 - OK

(via Browserstack) Safari on Windows 8.1 - OK

(via Browserstack) IE9/10/11 on Windows 7/8.1 - should work now, but not yet confirmed - Something weird was happening with text that's supposed to be inside labels - turned out to be (I think) lack of support for "alignment-baseline" for svg text elements (see this msdn page)

Firefox 32 on Mountain Lion - like IE, Firefox does not support "alignment-baseline" - stopped using it and worked around it and things look ok again

(via Browserstack) Firefox 31 on Windows 7 - should be OK now - Same issue as IE

(via Browserstack) Firefox 31 on Windows 8.1 - should be OK now - Same issue as IE

I have a healthy number of TODO's yet to get to - figuring out why IE and Firefox are misbehaving on Windows 7/8.1 is the current top priority item(the issue was that neither supports the alignment-baseline tag for the svg text element). There is also some usability considerations that I need to address based on some initial feedback.

The purpose of this page is to summarize in one place some of the interactive visualizations I have worked on. Most of these were built...

"When you start on your journey to Ithaca, then pray that the road is long, full of adventure, full of knowledge... Always keep Ithaca fixed in your mind. To arrive there is your ultimate goal. But do not hurry the voyage at all." (from "Ithaca", by C. P. Cavafy)