Chrome takes up unproportioned memory in web app [closed]

I have a web app I am developing using Angular 14, and I've had windows task manager open while I was using it.I've noticed the memory that chrome is using is somewhere around 1.5GB (with only my app's tab open).

I've decided to search for the cause, and took a heap snapshot and it was only 70MB.So that really confused me, why would Chrome take up so much memory if the entire JS memory heap is only 70MB?

I've tried to play around with my app and noticed exactly where this happens.On one of the pages in my app there is sort of timeline map where I render many small squares (1000's) representing events. I render the map and the squares with d3.js.When this map grows I can see Chrome's memory exploding all the way to 2GB, while the memory heap is still very low around 70MB.

There is another thing I've noticed while trying to understand the cause of this.In Chrome's Task Manager there is a row for "GPU Process" which is also taking about 700MB, while my app was taking around 600MB.So I found a way to disable the "GPU Process" and that certainly reduced the amount of memory being used by Chrome, but was still very high around 600MB.

I've tried running my app on another machine, and I've tried running my app on Edge instead of Chrome, I still notice the same behavior.

1. Has anyone encountered something like this?
2. Why is this happening?
3. Could this be caused by d3.js?
4. Can I do something to reduce the amount of memory being used by Chrome, or is this out of my reach as a developer and it has to do with how Chrome works?
5. Can and should I disable the "GPU Process" programmatically?