Look at Washington

Based on Look at Cook by Derek Eder and Nick Rougeux at Open City.

A budget transparency visualization for the State of Washington displaying all county Agencies broken down by fund and control officer from 1993 to 2011. Brought to you by the Economic Opportunity Institute.

Dependencies

jQuery
Google Fusion Tables v1 API
jQuery Address (for RESTful URLs)
Highcharts (for the line graph)
Datatables (for the Nominal and Actual lists)

Overview

This budget visualization is built entirely using HTML and jQuery. There is no server-side code, except for the stuff that happens behind the scenes with Google Fusion Tables. Even so, the data is fetched from Fusion Tables using the javascript Google Visualization API.

The bulk of the code is in /scripts/budget_lib.js. This file contains all of the init, data fetching, display and helper functions that the visualization uses to run. To get a good idea of how it works, you should first look at the data in Fusion Tables that it uses:

Main budget table (Actual and Nominal per Agency per year)
Fund descriptions
Control officer descriptions

The data is read from these tables and the appropriate content on the page is updated via asynchronous callback (for more info on callbacks see: http://docs.jquery.com/Tutorials:How_jQuery_Works#Callback_and_Functions). Whenever a chart point or link are clicked or the URL changes, the jQuery address code detects the change and updates the page using the 'updateDisplay' function. The 'loadFor' function updates all the internal variables and sets the display mode to either default, control officer list, fund detail or control officer detail.

The Nominal and Actual per year are then fetched based on the view using the 'getTotalArray' which in turn updates the main chart (which uses Highcharts) via 'updateMainChart'. The list of Agencies for that particular view are also fetched via 'getAgencies' which then calls 'getDataAsBudgetTable' to build an HTML table (which then uses DataTables to do sorting).

When a row is clicked, the details for that row are fetched and then displayed using either the 'getFundDetails', 'getControlOfficerDetails' or 'updateAgencyDetails' functions. From inside that expanded row are links to other views (depending on your current view) which are handled the same way as above.

View paths / hierarchy

Note: the year could also be updated by clicking on a point on the main chart.

List of funds (default view when loading the site) -> Expanded fund detail -> Fund view with list of Agencies -> Expanded Agency detail
List of control officers -> Expanded control officer detail -> Control officer view with list of Agencies -> Expanded Agency detail

Known issues

Search engines: Because this is an AJAX application, the data that is displayed is NOT crawlable by search engines. I would love to fix this. See http://code.google.com/web/ajaxcrawling/docs/specification.html for more info
Special characters: Some of the data elements I'm filtering on don't have proper IDs or slugs in my Fusion Table. This results in the visualization not supporting special characters (anything that a URL wouldn't like) in the Fund and Control Officer name fields. Agencies are ok because they each have a unique ID. I'd recommend using IDs for everything if you plan on making your own budget visualization.

Errors / bugs

If something is not behaving intuitively, it is a bug, and should be reported. Report it here: https://github.com/DataMade/look-at-washington/issues

You can also email me at derek.eder+git@gmail.com or tweet @derekeder.

Note on patches/pull requests

Fork the project.
Make your feature addition or bug fix.
Commit and send me a pull request. Bonus points for topic branches.

Copyright