I have to design and implement a visualization dashboard that runs only in the browser using Vue.js, D3 and JS. The dataset, a .json file, has 48 MB. When I parse the file using d3.json(), then the task manager of google chrome shows me that the Javascript code uses around 450 MB of memory. I want to be able to efficiently update the different charts on the visualization dashboard which is possible when I hold the data object in memory.
This is how I currently load the data. I can then access it in the state of the Vuex store.
actions: {
loadData(state) {
d3.json('filename.json').then((data) => {
state.data = data;
})
},
}
Do you have any recommendations/common ways how I can reduce the memory usage. An obvious way would be to re-parse the .json file every time I need to access the data, but this would increase computation time.
(UPDATE)
A colleague of mine found a solution to the problem and I wanted to share it with you:
When the parsed data object gets saved in the state of the Vuex store, Vue makes it reactive, such that Vue components can reactively update if the state of the Vuex store changes.
This can be avoided by
Object.freeze(data);
state.data = data;
which makes the data object non-reactive. The performance increase and ram usage decrease from this is significant.
In my case RAM usage decreased from around 450 MB to 50MB, while loading of the dataset into the state of the Vuex store took roughly 3 secs. instead of around 25 secs.