D3 Visualization Projects - Treemap (Movie Sales)

I chose the Movie Sales dataset.

Here’s the current code.

The value for the data-value attribute on the treemap rects is off and I’m also having trouble positioning the tooltip. Any help is appreciated. Thanks in advance

I misunderstood; the problem isn’t the data-value attribute’s value being off, it’s that the tile area is off for some reason. Anyone have any advice for how I could fix this? What should I log in here?

cell.append("rect")
      .attr("class", "tile")
      .attr("height", d => {

        return d.y1 - d.y0;
      })
      .attr("width", d => {
        return d.x1 - d.x0;
      })

to try to see what’s wrong? Or could I figure this out some other way (how?)?

Did I do something wrong in setting up treemap layout? Any help is appreciated.

I did this:

const treemap = d3.treemap()
  .size([svgWidth, svgHeight])
  .round(true)
  .paddingInner(1)
;
treemap(root);

And then this:

cell.append("rect")
  .attr("class", "tile")
  .attr("height", d => {

    return Math.round(d.y1 - d.y0);
  })
  .attr("width", d => {
    return Math.round(d.x1 - d.x0);
  })

And I have an error for the tile area test that says:

the relative data-value property does not match tile area: expected 1334 to be at most 1316
AssertionError: the relative data-value property does not match tile area: expected 1334 to be at most 1316

The test is:

6. The area of each tile should correspond to the data-value amount: tiles with a larger data-value should have a bigger area.

What am I doing wrong here? Why doesn’t this work? Would someone please help me out here? Thanks.

I tried this just now:

.attr("height", d => {
  return ((Math.floor(d.y1 - d.y0) / 2) - 0.5) - 0.25;
})
.attr("width", d => {
  return ((Math.round(Math.floor(d.x1 - d.x0)) / 2) - 0.5) - 0.25;
})

Which resulted in this:

6. The area of each tile should correspond to the data-value amount: tiles with a larger data-value should have a bigger area.
the relative data-value property does not match tile area: expected 332.0625 to be at most 331.6875

Codepen link has been updated.

What am I missing here? What should I do to this to make it work? Any help is appreciated. Thanks.

I just ran your code and passed the test after changing just 3 lines. First your width and height for each rectangle should just be what you had originally.

      .attr("height", d => {

        return d.y1 - d.y0;
      })
      .attr("width", d => {
        return d.x1 - d.x0;
      })

Then on the d3.treemap line just get rid of round(true).
It should look like this

 const treemap = d3.treemap()
      .size([svgWidth, svgHeight]) ;
    treemap(root);

The round(true) messes with the test computing the area and it will be off by a small margin. Hope this helps! if it doesn’t work let me know.

1 Like

This seems to be the right of it. The more rounding and Math.floor that you introduce further distorts the area of your cells.

Just in case anyone else is troubleshooting this, I found that my areas were off as well - caused by the treemap padding being set too high. When I set the padding below 4 it passed.

I got mine to work by doing dividing d.value by d.x1 - d.x0 for the width and by d.y1 - d.y0 for the height, with no padding and no rounding. I already figured at this point that what Lace said may work, but I didn’t go back and try it out.

1 Like