RAW-01UPDATE: A prototype fully interactive version of the budget flow is now available here.

On a warm Wednesday evening last month, I went to Hacker Lab along with 13 other programmers and data visualizers, to attend a meet up sponsored by Code for Sacramento, titled Hack the City Budget. The intent was to leverage the City of Sacramento’s data portal, specifically, the city budget and collaboratively create data visualizations of the city budget “to hack the city budget to help the people of Sacramento better understand the connection between the taxes we pay and the services we receive.”

Prior to the meeting, someone commented on the Meetup site how cool the Oakland city budget visualization was. As it turns out, the Oakland city budget visualization is an interactive Sankey diagram. Thanks to an online tool developed by Density Design called RAW, Sankey diagrams (aka Alluvial Flow Diagrams), can be very easy to generate if the data is in the right format.

So, I downloaded the data to do a little exploratory data visualization and found that the data was already in a perfect format for importing into RAW, generated a quick Sankey diagram, and posted it to Twitter before the meeting.

Sac-City-Budget-FlowThe diagram generated some interest at the meeting but I wanted to see if I could make it fully interactive using D3.js. This turned out to be trickier and more time-consuming than I had hoped so I decided to go back into RAW and generate an SVG (scalable vector graphics) version of the visualization that would be at least somewhat interactive. An image of the result is to the right and clicking on that will take you to the resulting interactive visualization of the budget. I’m not sure how enlightening or insightful it is as a data visualization but I think it does look pretty cool and the really amazing thing is how easy it is to create. I’ll go over that briefly below.

Creating a Budget Flow/Sankey Diagram with RAW

Step 1. Get the Data

The first step is to of course get the data. The City of Sacramento has made that incredibly easy with their data portal. Simply find the city budget dataset, filter it if you’d like, and download it as a .csv file. The original budget dataset contains multiple years of budget data resulting in a fairly large dataset of 98,185 records. That proved a bit unwieldy on my first attempt so I filtered it to just get the 2016 budget data resulting in a much more manageable 9384 records.


Step 2. Clean the Data

One of the most time-consuming and tedious tasks in data journalism and data visualization is cleaning your data to be easier to work with it and represent. Fortunately, this dataset turned out to be a rare dataset that needed hardly any cleaning. I brought the .csv file into a Google spreadsheet and got rid of a few columns that I didn’t need in order to make it a bit easier to find what I wanted when I imported the data into RAW.


RAW-02Step 3. Import to RAW

The next step is to fire up RAW and import the data. It’s as easy as copying the data from the spreadsheet and pasting it into RAW. It will sometimes take a few seconds if you have large datasets you’re pasting in, but once you get the thumbs up from RAW, you’re ready to start creating the diagram.


Step 4. Create the Diagram in RAW

RAW-04After you’re imported your data into RAW, you need to select which kind of diagram you want to use to represent your data. In this case, the Alluvial diagram. Currently, the Alluvial diagram is the default choice, the top left thumbnail.

With that selected, scroll down to where it says, “Map Your Dimensions.” Here, if you hover your cursor over any one of the green tabs on the left, your cursor will change shape, signifying that you can drag that tab into one of the wells on the right. For Alluvial diagrams, each of the tabs that you drag into the Steps well will become a category, a vertical axis in the diagram. In this case, I chose four categories to have the money “flow” through; Fund, Department, Division, and Account Group. Then choose the Budget Amount tab and drag it to the Size well. The Budget Amount will then be represented by the thickness of the lines flowing through the diagram.

RAW-05Once you’ve mapped your dimensions, the diagram will display directly below. You’ll likely want to adjust the size of the diagram to make it more readable. You can also adjust colors, sorting, and node sizes. In my case I only changed the size of the diagram and left the defaults for everything else.



Step 4. Export as an SVG File

RAW-06Once you’ve got your diagram looking the way you want it you have several options for exporting your work. In my initial attempt that I posted to Twitter I just exported a PNG image. Another option is to download an SVG file. This can be handy if you want to import your diagram into Adobe Illustrator and edit elements further. But, if you want a bit of interactivity, then you’ll want to grab the SVG embed code. I copied this embed code and pasted it into a text editor so I could make a few refinements to the SVG code.


Step 5. Clean and Edit SVG File

This step is completely optional. If you just embedded the the code into an html file it would work just fine. But if you’re comfortable getting your hands dirty with some SVG code and you know a bit of CSS you can edit the font families and sizes to match your needs.


Step 6. Put SVG in HTML

RAW-07The last step is to put all of that SVG, either the original or the code you edited in the previous step, into an html file. In my case, I added an additional SVG element to add some text labels to label the vertical categories in the diagram since RAW doesn’t include those.

Next, publish your html file to the world. You’ll find that the SVG should be somewhat interactive in that if you hover your mouse over one of the nodes, a tool tip will come up displaying the category name and amount.

So there you go – even with just a bare minimum of html knowledge you can generate your very own budget flow diagram using RAW. Sankey diagrams can be a nice way to visually represent data when you’re working with categorical data or how things flow from one department or process to another. You can see some other examples in an article I wrote awhile back, Visualizing Categorical Data as Flows with Alluvial Diagrams.


Other Sacramento Projects

Sacramento Startup Ecosystem Circuit DiagramInteractive Infographic
Sacramento Startup Ecosystem Circuit Diagram
Startup Weekend Sacramento Interactive TimelineInteractive Infographic
Startup Weekend Sacramento Interactive Timeline
Sacramento Weather HistoryData Visualization
Sacramento Weather History
Sacramento City Budget FlowData Visualization
Sacramento City Budget Flow
Sacramento Area Commute TimesData Visualization
Sacramento Area Commute Times
Sacramento Republic FC 2015 Season by the NumbersData Visualization
Sacramento Republic FC 2015 Season by the Numbers
Sacramento Startup SceneInfographic
Sacramento Startup Scene
Sacramento Kings Franchise HistoryInfographic
Sacramento Kings Franchise History
Sacramento AQI HistoryInteractive Infographic
Sacramento Air Quality
2014 Sacramento Republic FC Season summaryInfographic
2014 Sacramento Republic FC Season Summary
Sacramento Pro Soccer HistoryInfographic
Sacramento Pro Soccer History
Clean Tech SacramentoInfographic
Clean Tech Sacramento