Click here to see the visualizations with some example data.
In order to get on the same page about money, my wife and I sit down each month and review where we’re at financially. This dashboard helps discuss questions like:
We track all of our transactions in a program like QuickBooks, but for programmer nerds. Then I run some Python scripts to generate the report that contains last month’s data as well as our historical financial information. Since all of the information is derived from a ledger of transactions, it’s straightforward to go back and generate old reports, but I keep a directory of the files to access them easily.
The data is a big pile of JSON, and the report itself is just an HTML file. I use D3.js for the visualizations.
This is more work than most people need, but I took this approach for a number of reasons:
Apps like Mint are nice for tracking expenses, but since it’s not a double-entry ledger, it’s not good at modeling money moving between accounts, money you’re owed, etc.
Apps like Personal Capital are nice for tracking assets in big investment firms, but there are a lot of systems they don’t integrate well with, so the data is never quite accurate.
I couldn’t find a good way of tracking cost basis and investment growth across financial services providers.
Between payroll, retirement, brokerage, HSA, etc., logging into all of these separate portals it gets time consuming when you need to check information. Once it’s imported into an accounting ledger, you can just look at that.
Spreadsheets are great for tracking things like giving/saving/taxes over the years. Most people should probably use these, and this worked really well for me at first.
But in my case, once I got all of my information into a ledger, the copy/pasting became error prone and tedious. It’s nice that once I do the work of booking and reconciling transactions, I can easily get a complete picture of the state of our finances.
Tools like Jupyter and Colab are powerful, and I think they’re a great fit for programmatic accounting like Ledger CLI and Beancount. These notebooks also worked for me for a time, and it’d be really cool to see more examples of personal finances notebooks, but I found the charting capabilities really lacking.
Bokeh was the best option I found, but there were a lot of details I found frustrating that I couldn’t easily fix (i.e. getting more context and precision in tooltips).
I was already writing code to generate the data and format that into something the charting library could use, and since I’ve got a background in web development, it wasn’t a big leap to translate the notebooks into scripts that generated HTML files.
Listen we’re all busy, and this is a side project. But a few things that’d be nice to fix up:
d attribute of SVG elements, but WebKit does not. I couldn’t even find a caniuse.com link, but CSS tricks references this. So you’ll notice the the only animation in Safari is switching the networth chart between total gains and value+cost basis. It’s so clean to use CSS for the rest of the animations, I’m not inclined to migrate those to JS.