Oakland cash flow

Oakland cash flow

2014 • OpenOakland

In the summer of 2014 I started attending the weekly Civic Hack Nights at OpenOakland, a Code for America brigade with a wide array of active projects. I quickly fell in with the Open Budget Oakland team, which was developing exploratory web visualizations to help citizens better understand the city's budget. My task was to redesign the team's Sankey diagram, a network chart that depicts flow between nodes with edges of varying thickness.

old version image

Left: the old version of the diagram. Right: what the full budget would look like at the same scale and level of detail.

The existing version was difficult to read and only included about half of the total budget; the challenge was how to include the full picture without overloading users with its massive complexity.

exploration image

I started by loading the data into Tableau for exploratory analysis. The data was a bit of a mess — a mix of multilevel hierarchies and legacy structures that were inconsistently used — but I reorganized the nodes into three columns: revenues on the left, expenses on the right, and "funds" (the budgeting constructs that accept and disburse money) in the middle. There were thousands of line items and hundreds of funds; for readability I identified the most meaningful and manageable level of granularity in the account structure and grouped all the non-discretionary funds into a single bucket. No column had more than twenty rows, and the entire budget was represented.

final image

With this done, I reimplemented the Sankey diagram by augmenting the D3 Sankey layout. I simplified the color scheme so that color changes indicated flow direction. I made the nodes clickable to highlight all their connections at once, so users could retain a trail of their explorations. And I compressed the design so it would fit comfortably on a standard laptop screen, using targeted zooms on rollovers and clicks to ensure the areas of interest would remain readable to users. Future plans for this visualization include the ability to query the underlying data and simulate end-to-end relationships between revenues and expenses.