I am in the middle of working on a visualization for exploring the US Federal Budget, built with d3.js, bootstrap, and jQuery DataTables. The current version can be found at:
Please let me know if it looks weird on your browser or its use is non-intuitive. A summary is below of browsers I have checked so far.
http://learnforeverlearn.com/usbudget/
The spending and receipts data files are from the OMB's Public Budget Database, available at http://www.whitehouse.gov/omb/budget/supplemental. Specifically, the "Outlays" csv file and the "Receipts" csv file. These contain both historical and projected data, going back to 1962 and up to 2019. I have spot-checked the rolled-up values against the corresponding values in the Historical Tables file from the gpo (which checked out), but this is still a work-in-progress.
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.
In this case, all of the features are available, and you can explore the detail tables.
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.
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.
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.
but not going vertical, on a small screen
- 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
- (via Browserstack) Opera 23 on Mountain Lion - OK
- (via Browserstack) Opera 23 on Windows 7 - OK
- (via Browserstack) Opera 23 on Windows 8.1 - OK
- (via Browserstack) Android on Nexus 7 - "Page has become unresponsive" - suggests optimization is getting past the premature stage
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.
No comments:
Post a Comment