Visualizing my credit card spending with Processing.
I logged into my bank account today to pay for my credit card debit. One function that’s missing from the banking website is the ability to give me a summary of my total spending from a specific date to today. But the site does allow me to download a CSV file to my local computer. So, I figured I could use this opportunity to play with Processing more (I know I could have achieved what I need in 2 mins with Excel ;p).
Below is the raw data sheet I got from my bank.
To make Processing load the CSV file, you need to drag it to the sketch so that the file is added to the data folder of the sketch.
The really nice thing about Processing is that it comes with plenty of functions optimized for data visualization. In this case, the loadTable() function comes in handy. Once the raw CSV file is loaded into a Table in Processing, it’s really easy to get the total number of rows in the data file and the specific data column. Processing provides functions to handle both. Then it’s a simple matter of creating a loop to go through each row and add the amounts together.
If you just want to see the final result, then you can use println() function to print the output to the console window. But if you want to make the program a little more user friendly, you can use the createFont() function in Processing to show the final result to a sketch canvas as you can see below.
After achieved the basic function I need, I thought it would nice to visualize each spending during the period. So, I looked up in Processing library and found giCentre Utilities which provides basic charting functionality. I looked at the barChart example and added a bar chart to my little program.
It has been a fun little exercise at Saturday night. I am hoping this post is useful for anyone else who is interested in Processing or data visualization. Please let me know if you have any questions.