#hackYEG Budget Visualization

Built over a weekend using City of Edmonton's Open Data Catalogue from the City's Hackathon

Legend + Static Example

Explore the Budget!

Budget Items

Highlights of the Data

We wanted to create a visualization that would make the city budget more interesting to read and provide insights more readily. Here are some things we picked up on (from the 2012 financial actuals):

Please note that you can click on the links below: worth trying!

There's definitely more to add, what did you find? I'd be happy to put them up and credit you for the insight, and you can reach me via email.

Visualization Design & Notes

Just CSV data

The primary challenge at the hackathon was transforming the budget into a format that the code could use for the default Sankey plugin (more below). My #hackyeg teamates started with an Excel tool to shortcut the process, but kept running into issues with the tool and with connecting the hundreds of entries.

Over the weekend, I coded a module to simplify the process, and now the visualization will take in any CSV file set up in the manner above, with amounts on the far right. It doesn't matter if there's more or less columns, the code automatically transforms the data and also adds in extra information (such as tiered amounts). Thus, any budget with this format can be similarly visualized.

Visualize Your Budget

Have some open data or your own budget to visualize? Drop me an email at eugene@adailydoseof.com. The bulk of coding for this visualization is done, I'll just have to pop in your data if you have it set up as described above.

It's a "Sankey Tree"

You might have seen Sankey diagrams before, which were the original point of inspiration for me. The examples I've seen from d3 (a visualization framework) look fairly messy as a result of interconnecting data nodes, and their interactions are fairly limited (hovering your mouse over a link between two nodes only shades the link).

How about a "Sankey Tree" then? It works well for a budget since the relative heights of each node visually represents the relative amounts from one node to another, like a bar chart with elements placed vertically.

The visualization is now more interactive and informative as well: the colours of the links change depending on revenue/expenditure, and hovering/clicking on each link/node exposes further information without having to clutter up the original visualization, which is meant mainly for discovery.

Limitations & Next Steps

The short time frame meant that a number of simplifications and tradeoffs had to be made: the major one being the implementation of colours and rolled-up sums versus a better sorting algorithm to sort revenues and expenses together, or by alphabet. It does make it so that more effort is initially required to understand the visual, but the tradeoff was worth it for the final functionality.

As for next steps, this seems worth pursuing further: everyone has budgets, visualizing them for discovery/exploration is interesting, and the code for parsing the CSV into a data object is done. Next will be writing a new plugin specifically for this visualization that allows for the sorting mentioned above plus further interactivity, and trying out different budgets.

Key Notes & Assumptions


#hackYEG & Open Data

Thanks to the volunteers at #hackyeg for making the hackathon happen. It was great to see so many people there supporting the open data movement (including our mayor, Don Iveson), and it was impressive to see what people did during the short day.

Special shout-out to David Rauch, the Open Data Steward at the City of Edmonton's Sustainable Development department, for reaching out and working hard at helping more and more city data become open.

Also, hats off to our hackathon team who spent Saturday wrangling with the data to come up with a visualization:

Tech Details

During the hackathon, we used Bruce's Excel to Sankey tool (based on Mike Bostok's d3.js and the sankey plugin), and while that was dropped over the weekend, I still used his html template as a baseline for the budget and interactivity-focused modifications.

Thanks to Joey Cherdarchuk at Darkhorse Analytics for sharing his thoughts on the idea and pointing us to Bruce's tool, which made it possible to get at least a working iteration of the visualization at the hackathon.


Questions? Suggestions? Drop me an email at eugene@adailydoseof.com. I'm always happy to chat about data and visualizations over coffee.