Trying to create a nested Treemap with D3JS

I am trying to created a nested treemap with D3JS as in the example but without the Observer: https://observablehq.com/@d3/nested-treemap

With the following Code I always produce an Error at:

.attr("fill", d => color(d.height))

Error: t is not a function.

If i do it without the color I get an error saying height and width are nan. I do not really undestand how to fix this.

The result I get if I run the code without color is far from what the example looks like:

My Result

The data is correct but i seem to not understand something that will help me to get the same result/how to really use D3JS in this way.

Thank you in Advance Sebastian

<!DOCTYPE html>
<meta charset="utf-8">
<title>Cascaded Treemap</title>
<style>

  text {
    font: 10px sans-serif;
  }
  
  tspan:last-child {
    font-size: 9px;
    fill-opacity: 0.8;
  }
  
  .node rect {
    shape-rendering: crispEdges;
  }
  
  .node--hover rect {
    stroke: #000;
  }
  
  </style>
  <svg width="960" height="1060"></svg>
<body>
  <script src="//d3js.org/d3.v4.0.0-alpha.35.min.js"></script>
  <script src="//d3js.org/d3.v4.min.js"></script>

<script>



d3.json("treemap.json", function(error, data) 
{
  
  
  // var width = svg.attr("width");
  // var height = svg.att r("height");
  var format = d3.format(",d");

  var color = d3.scaleSequential([8, 0], d3.interpolateMagma);

  const svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
;

var treemap = 
    data => cascade(
      d3.treemap()
          .size([width, height])
          .paddingOuter(3)
          .paddingTop(19)
          .paddingInner(1)
          .round(true)
      (d3.hierarchy(data)
          .sum(d => d.value)
          .sort((a, b) => b.value - a.value)),
      3 // treemap.paddingOuter
    );

    function cascade(root, offset) {
      const x = new Map;
      const y = new Map;
      return root.eachAfter(d => {
        if (d.children) {
          x.set(d, 1 + d3.max(d.children, c => c.x1 === d.x1 - offset ? x.get(c) : NaN));
          y.set(d, 1 + d3.max(d.children, c => c.y1 === d.y1 - offset ? y.get(c) : NaN));
        } else {
          x.set(d, 0);
          y.set(d, 0);
        }
      }).eachBefore(d => {
        d.x1 -= 2 * offset * x.get(d);
        d.y1 -= 2 * offset * y.get(d);
      });
    }
   
    const root = treemap(data);


    const node = svg
    .selectAll(".node")
    .data(root.descendants())
    .enter().append("g")
      .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
      .attr("class", "node")
      .each(function(d) { d.node = this; });


  node.append("title")
      .text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.size)}`);

  node.append("rect")
      .attr("fill", d => color(d.height))
      .attr("width", d => d.x1 - d.x0)
      .attr("height", d => d.x1 -  d.x0);

  node.append("clipPath")
      .attr("id", function(d) { return "clip-" + d.id; })
    .append("use")
      .attr("xlink:href", function(d) { return "#rect-" + d.id + ""; });

  node.append("text")
      .attr("clip-path", d => d.clipUid)
    .selectAll("tspan")
    .data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(d.size)))
    .enter().append("tspan")
      .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
      .text(d => d);

  node.filter(d => d.children).selectAll("tspan")
      .attr("dx", 3)
      .attr("y", 13);

  node.filter(d => !d.children).selectAll("tspan")
      .attr("x", 3)
      .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`);

});

  




</script>

Trying to create a nested Treemap with D3JS

0 Answers