Since creating and publishing the City of Sacramento Budget Interactive Flow Diagram last year for Code for Sacramento’s Open Budget Sacramento project I’ve heard a lot of positive feedback about it. This flow diagram seems to attract and engage people more than any other style of data visualization I’ve produced. People love it. Commonly referred to as a Sankey diagram, alluvial diagram, or flow diagram, these visual representations of how things flow or are distributed and dispersed seem to naturally draw people in to explore and interact with the data.
While working with the winning team of civic hackers from the National Day of Civic Hacking to help visualize data for Sacramento Food Bank and Family Services we realized that it would be useful for them to to have an interactive flow diagram showing how food comes into their system, gets distributed to warehouses and then on to food banks. Sounds like another great use case for a Sankey flow diagram.
With this new use case in mind of using Sankey flow diagrams to show distribution of things other a governmental budget I’ve revised the original budget flow diagram in D3.js to make it more generic. Here’s an example of what that looks like. (Open in a new window/tab)
Realizing that there will likely be a lot of scenarios where there are more than two central “buckets” that things flow through, I expanded the above generic sankey diagram to include three central nodes. More than three central nodes can be represented as well, but I haven’t gotten to that yet. (Open in a new window/tab)
I’m looking forward to working with Sacramento Food Bank and Family Services and getting their distribution data to show the distribution of food through Sacramento’s food bank system.
Note: The original city budget flow diagram was based on the City of Oakland’s budget flow diagram.
