A budget transparency visualization for San Francisco.
- jQuery
- Google Fusion Tables v1 API
- jQuery Address (for RESTful URLs)
- Highcharts (for the line graph)
- Datatables (for the appropriations and expenditures lists)
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 (expenditures and appropriations per department 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 appropriations and expenditures 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 departments for that particular view are also fetched via 'getDepartments' 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 'updateDepartmentDetails' functions. From inside that expanded row are links to other views (depending on your current view) which are handled the same way as above.
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 departments -> Expanded department detail
- List of control officers -> Expanded control officer detail -> Control officer view with list of departments -> Expanded department detail
- 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. Departments 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.
If something is not behaving intuitively, it is a bug, and should be reported. Report it here: https://github.com/open-city/look-at-cook/issues
You can also email me at derek.eder+git@gmail.com or tweet @derek_eder.
- Fork the project.
- Make your feature addition or bug fix.
- Commit and send me a pull request. Bonus points for topic branches.
Copyright (c) 2012 Derek Eder and Nick Rougeux. Released under the MIT License.
See LICENSE for details https://github.com/open-city/look-at-cook/wiki/License