Building a Personal Finance Visualization with Copilot Money, React, and Chart.js

Introduction

2024 has been a whirlwind year. Between balancing a busy year at work and helping my wife chase around our energetic two-year-old, I haven't had time to work on personal projects very much. With a couple weeks off work for the holidays, I was able to get to one of them though—an exhaustive review of my family's finances and spending patterns. This is something I've been wanting to do for a while but have been putting off. I decided to make it fun by using it as an excuse to do some programming.

For the last 5 years i've been using the Copilot Money app to track and categorize all of my family's income and expenses. They offer a handy .csv export feature if you want to get all of your raw transaction data. With this in mind, I came up with the idea of creating a "2024 Finance Wrapped" for my family. I've seen people in personal finance circles on social media share Sankey Diagrams to break down their spending and I really like this idea. I'm going to do the same thing, but with a React spin on it. Instead of generating a single, static Sankey diagram I'll make a dynamic one with React and ChartJS. This affords us the ability to model theoretical scenarios e.g. "how would things look if my income went up or down?", "how would things look if we cut spending in XYZ category?", "how would things look if we sent the kids to private school?"

The rest of this post will walk you through step-by-step how I approached this project. At the end, you can view and interact with my final finished Sankey Diagram React Component.

Implementation Journey

📝 Project Requirements

Here are the requirements I settled on for the "2024 Wrapped" Sankey Diagram:

• It should start on the left with net income as a single category that everything else deducts from
• Users should be able to arbitrarily increase the height and width of the Sankey diagram, even if that causes viewport overflows. Really large diagrams with hundreds of categories will be more ergonomic and useful if the user can size them however they see fit (you'll see what I mean on this point when you take a look at the final component at the end of this page).
• By default all categories should be displayed, but users should be able to show/hide any of them as well. This is useful because some categories are really large e.g. Mortgage payment, Federal Taxes, and this makes viewing information about smaller categories harder since everything is scaled relatively.

🔍 Technology Selection

First things first, I need to get the lay of the land in the JavaScript charting ecosystem. This site is built with React and I've been using React professionally for years, so I'll prefer libraries with good React wrappers. I played around with several, including D3, react-google-charts, and finally settled on ChartJS.

I built a proof of concept with react-google-charts but it didn't have enough customizability for my liking. I really want the maximum amount of control possible, since I plan to extend and customize this component quite a bit in the future. Ideally this is something I will do at the end of every single year, and add a bit more functionality each time.

I started evaluating D3 with the d3-sankey-plugin next, but abandoned it in favor of ChartJS for a couple reasons:

1. Native <canvas> support—D3 by default inserts <svg> elements on the DOM when generating its charts (although d3-canvas is a thing) whereas ChartJS outputs a <canvas>. I'm a fan of <canvas> in general because of its performance advantages, and love having another excuse to build something with it. Also, i'd like to eventually expand this Sankey diagram project to fan out and include every single transaction from each fiscal year—meaning there could be several thousand DOM nodes rendered if we went with <svg>.
2. Out of the box functionality—chartJS has pretty impressive defaults. You get animations and viewport size responsiveness for free, for example.

🏗️ Data Structure Design

Next I need to convert the .csv export to JSON. First, let's define a TypeScript type for the ideal JSON object. Then we can use that plus some LLM prompting to generate a script. We could write it by hand of course, but it's a pretty trivial script and time is of the essence. I can hear my toddler in the hallway outside of my home office; my wife can only keep him at bay for so long!

I want the output to look something like this:

1{
2"Shopping": {
3  "total": 33569.33,
4  "categories": {
5    "Clothing": 10949.08,
6    "Target": 6571.75,
7    "Amazon": 3044.21,
8    "Shops": 11629.46,
9    "Beauty": 1374.83
10  }
11},
12"Car & Transport": {
13  "total": 21203.73,
14  "categories": {
15    "Car": 20114.91,
16    "Transportation": 1088.82
17  }
18},
19"Loans": {
20  "total": 3611.4,
21  "categories": {}
22}
23}

So I'll define these types...

1interface CategoryDetail {
2    [category: string]: number;
3}
4
5interface ParentCategoryDetail {
6    total: number;
7    categories: CategoryDetail;
8}
9
10interface CategoryTotals {
11    [parentCategory: string]: ParentCategoryDetail;
12}

...and this function signature

1async function processExpenses({
2    csvFilePath,
3    startDate,
4    endDate,
5}: ProcessExpensesOptions): Promise<CategoryTotals> {
6    // todo: implement
7}

..and then ask Claude 3.5 Sonnet to do the rest! After a few messages back and forth clarifying the .csv column names with Claude, we get a finished working product. I also updated the script to use the Bun JS runtime and package manager instead of NodeJS and NPM. I've been using Bun for all of my scripting work lately and it's a joy to work with—it's lightning fast and comes with an excellent standard library.

Final Product