Advise: Graphs and Information?

I continue to play with SVG and Graphing. Currently I'm playing with exporting OFX¹ files from my bank and finding ways to visualise them to give me understanding of what's going on with money. It's tricky. If you don't mind I want to show some of the things I'm playing with and I'd love advise, feedback, suggestions, pointers. Just about anything really.

Date selecting

I've read a lot on how bad the various date selectors are that come with browsers. I've also played with a few JS date selectors that basically default to various Calendar Month representations. Looking at this I want an easy to edit text field with some buttons for quick changes so I don't type the whole thing or have to fine-mouse-control select part of the date to change.

This model is two side-by-side Text inputs with a pattern for the date (and a placeholder when empty). When the data set is loaded they pre-populate, and you can then restrict the data. Underneath each are arrows - big arrow adjusts year, middle for month, single for day. It's low risk to click a button to see what happens, so playing is simple.

Gauge

A gauge is good for immediate reactions, rather than long term trending. I've got a needle to show current period spend. The red gauge rotates around to show Expenses, needle is Expenses+Extravagance, and the graded line is the fortnight's income. So when the needle's buried, dire straights indeed.

Basic line

Old faithful. Easy to see immediate relations, maybe harder the further they are apart. Great for time data with infinite left/right as required. But... I'm not getting much value out of this. I can see peaks and troughs and it's all jaggedy. I don't even think having a trend line would help overly much. Maybe with more context, but what would be the context?

Multiline peaks

So I break the single line into categories² of expenditure, colourise them, and chart $ per day. And I get something like this. I don't know how this means anything to me. Except there's a big point in the middle I'd like to look at. Perhaps that's the value of this sort of chart, seeing outliers really quick? This chart would benefit from a number of always-visible annotations of discoveries.

Pie chart

This one helped. Using the categories thing from the multi-peak but putting in a pie chart so relative amounts were more visible. Tiger striped for visibility. The segments can be hovered over to see what they are. Unknown starts off pretty big, but narrowing it down helps figure out where money is going.

Tag cloud/ picture graph

An idea from my son is to use emoji to represent the different types of income/ expenditure and then have different sizes or numbers of emoji to show relative values. Nice at-a-glance view.

Related bar graphs

This is my latest one. Summing categories by week, making a bar chart for that week, moving on to the next week. It feels like it's giving me details on how week expenditures work more than the Line graph. Maybe this means I need to background the line graph to show weeks or months or otherwise add more context?

Thoughts

Please give me your thoughts, I'm just throwing things at a wall to see what compiles. So far I'm finding what graph types work better for what data/ situation - gauges are great for at a glance-reaction; line graphs are better for long-trend analysis and the like. Pies are for relative value checking, but bar-charts work nicely for related values over time or otherwise more than a single access. And I do feel like the pie charts were visualising the results a bit skewed, either my numbers or the 'segment' tapering makes it look different.

As an aside, I'm using LocalStorage in my browser when playing with this; as I don't want actual figures anywhere near my webservers. LocalStorage and localhost works fine for me. But it does mean learning two things at once. Tragedy.