title: How do I fix zoomable-icicle so that is show some graphics?
body: <p>Why doesn't this work. There is no error:</p>
  <p>The example is taking from this site: <a href="https://observablehq.com/@d3/zoomable-icicle" rel="nofollow noreferrer">https://observablehq.com/@d3/zoomable-icicle</a></p>
  <p>All code is here. It's only html and Javascript. What am I overlooking:</p>
  <p>So far it looks like the return of the svg is not working og the color definition is wrong.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Zoomable Icicle&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;Velcome
    &lt;h1 class=&quot;thechart&quot;&gt;&lt;/h1&gt;
    &lt;script src=&quot;https://d3js.org/d3.v6.min.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
      JsonData = {
        &quot;name&quot;: &quot;flare&quot;,
        &quot;children&quot;: [
          {
            &quot;name&quot;: &quot;analytics&quot;,
            &quot;children&quot;: [
              {
                &quot;name&quot;: &quot;cluster&quot;,
                &quot;children&quot;: [
                  {
                    &quot;name&quot;: &quot;AgglomerativeCluster&quot;,
                    &quot;value&quot;: 3938
                  },
                  {
                    &quot;name&quot;: &quot;CommunityStructure&quot;,
                    &quot;value&quot;: 3812
                  },
                  {
                    &quot;name&quot;: &quot;HierarchicalCluster&quot;,
                    &quot;value&quot;: 6714
                  },
                  {
                    &quot;name&quot;: &quot;MergeEdge&quot;,
                    &quot;value&quot;: 743
                  }
                ]
              },
              {
                &quot;name&quot;: &quot;Visualization&quot;,
                &quot;value&quot;: 16540
              }
            ]
          }
        ]
      }
      height = 1200;
      width = 975;
      format = d3.format(&quot;,d&quot;);
      color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, JsonData.children.length + 1));
      partition = data =&gt; {
        const root = d3.hierarchy(data)
          .sum(d =&gt; d.value)
          .sort((a, b) =&gt; b.height - a.height || b.value - a.value);
        return d3.partition()
          .size([height, (root.height + 1) * width / 3])
          (root);
      }
      function chart(data) {
        const root = partition(data);
        let focus = root;
  
        const svg = d3.create(&quot;svg&quot;)
          .attr(&quot;viewBox&quot;, [0, 0, width, height])
          .style(&quot;font&quot;, &quot;10px sans-serif&quot;);
  
        const cell = svg
          .selectAll(&quot;g&quot;)
          .data(root.descendants())
          .join(&quot;g&quot;)
          .attr(&quot;transform&quot;, d =&gt; `translate(${d.y0},${d.x0})`);
  
        const rect = cell.append(&quot;rect&quot;)
          .attr(&quot;width&quot;, d =&gt; d.y1 - d.y0 - 1)
          .attr(&quot;height&quot;, d =&gt; rectHeight(d))
          .attr(&quot;fill-opacity&quot;, 0.6)
          .attr(&quot;fill&quot;, d =&gt; {
            if (!d.depth) return &quot;#ccc&quot;;
            while (d.depth &gt; 1) d = d.parent;
            return color(d.data.name);
          })
          .style(&quot;cursor&quot;, &quot;pointer&quot;)
          .on(&quot;click&quot;, clicked);
  
        const text = cell.append(&quot;text&quot;)
          .style(&quot;user-select&quot;, &quot;none&quot;)
          .attr(&quot;pointer-events&quot;, &quot;none&quot;)
          .attr(&quot;x&quot;, 4)
          .attr(&quot;y&quot;, 13)
          .attr(&quot;fill-opacity&quot;, d =&gt; +labelVisible(d));
  
        text.append(&quot;tspan&quot;)
          .text(d =&gt; d.data.name);
  
        const tspan = text.append(&quot;tspan&quot;)
          .attr(&quot;fill-opacity&quot;, d =&gt; labelVisible(d) * 0.7)
          .text(d =&gt; ` ${format(d.value)}`);
  
        cell.append(&quot;title&quot;)
          .text(d =&gt; `${d.ancestors().map(d =&gt; d.data.name).reverse().join(&quot;/&quot;)}\n${format(d.value)}`);
  
        function clicked(event, p) {
          focus = focus === p ? p = p.parent : p;
  
          root.each(d =&gt; d.target = {
            x0: (d.x0 - p.x0) / (p.x1 - p.x0) * height,
            x1: (d.x1 - p.x0) / (p.x1 - p.x0) * height,
            y0: d.y0 - p.y0,
            y1: d.y1 - p.y0
          });
  
          const t = cell.transition().duration(750)
            .attr(&quot;transform&quot;, d =&gt; `translate(${d.target.y0},${d.target.x0})`);
  
          rect.transition(t).attr(&quot;height&quot;, d =&gt; rectHeight(d.target));
          text.transition(t).attr(&quot;fill-opacity&quot;, d =&gt; +labelVisible(d.target));
          tspan.transition(t).attr(&quot;fill-opacity&quot;, d =&gt; labelVisible(d.target) * 0.7);
        }
  
        function rectHeight(d) {
          return d.x1 - d.x0 - Math.min(1, (d.x1 - d.x0) / 2);
        }
  
        function labelVisible(d) {
          return d.y1 &lt;= width &amp;&amp; d.y0 &gt;= 0 &amp;&amp; d.x1 - d.x0 &gt; 16;
        }
  
        return svg.node();
      }
  
      chart(JsonData);
      console.log(&quot;OK&quot;);
  
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>I don't know what more to write but the engine want me to write some more.</p>