D3.js Treemap Diagram - creating correspondence between data-value and cell area

Curriculum Help
1

Tell us what’s happening:

Hello everyone, I have tried to comb through other people’s solutions, but I still have not figured how I can change my treemap setup so that the tiles with larger values have larger areas. I would really appreciate any insight on this.

Your code so far

Here is the code concerned with setting up the treemap:

  const root = d3
    .hierarchy(data)
    .sum(d => d["value"])
    .sort((a, b) => b["value"] - a["value"])
  
  const map = d3.treemap()
    .size([width, height])
    .padding(2)
    
  map(root)

Here is my full code: codepen

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:120.0) Gecko/20100101 Firefox/120.0

Challenge Information:

Data Visualization Projects - Visualize Data with a Treemap Diagram

2

Hey guys, I found out that it’s a problem with the test itself. It expects the svg dimensions to be 960 by 570, otherwise the test is counted as a fail. The code itself is fine, and does not need any modifications.

3

Thank you! somebody should take this issue in attention I have spent several hours stuck there - is it so hard to put it on the list of stories?