SpendFlow

Inspiration

Lots of budget apps with good tracking capabilities have a paywall. Wanted a free and easy way to visually track where my money is going.

What it does

Takes CSV budgeting/expense data and visualizes it into a Sankey diagram. Have option to drill down from yearly to monthly or weekly levels. Gives quick insights into total income, total spending, and if you spent over/under your total income.

How we built it

Single HTML file. Parses CSVs with Papa Parse and uses a hand-rolled Sankey layout. Wanted a challenge to build something useful without any frameworks or build steps.

Challenges we ran into

Getting the graph to render properly and not get cut off

Accomplishments that we're proud of

Adding a scroll to the Sankey diagram so users can see the entire thing

What we learned

Different visualizations during research phase. That an SVG's coordinate space and its box on the page are two different things. And that something like this can be built raw with no frameworks.

What's next for SpendFlow

Connect to actual banking apps via API to pull data with less user intervention. Also when viewing on weekly level having remaining money from previous weeks count towards income in current week could make sense.

Built With

• css3
• html5
• javascript
• papaparse