When attempting to generate a rectangular treemap in d3.js, I encountered an issue where the resulting shape was not as desired. There were instances of missing data and empty spaces within the rectangular treemap.
Upon investigation, I found that removing .sort() from my d3.hiearchy() almost resolved the issue, but it left an empty space in the top left corner:
https://i.sstatic.net/ocI2H.jpg
let root = d3.hierarchy(data)
.sum(d => d.value)
In another scenario, adding the .sort() back to the d3.hiearchy() caused the first data point for "Wii Sports" to be removed:
https://i.sstatic.net/ZZMgY.jpg https://i.sstatic.net/S4NRR.jpg
let root = d3.hierarchy(data)
.sum(d => d.value)
.sort((a,b) => {return b.value - a.value;});
I need help identifying the underlying issue here. You can view the code on my CodePen
// Your JavaScript functions and rendering logic...// CSS styling for tooltip and body...// Required scripts for D3 and external libraries...