Treemap to illustrate geometric series

Example of a treemap in D3.

This shows intuitively that the infinite geometric series 1 + 1/2 + 1/4 + 1/8 + ... equals 2.

<!DOCTYPE html>
<head>
  <meta charset='utf-8'>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Roboto');
    body { 
      margin:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
      font-family: Roboto, sans-serif;
    }
    .cell {
    	fill: #1f5aa2;
    }
    .cell:hover {
      fill: #3981d9;
    }
    .label {
    	font-size: 14pt;
      fill: #ccc;
    }
  </style>
</head>

<body>
  <script>
    const height = 480;
    const width = 2*height;
    const svg = d3.select("body").append("svg")
    		.attr("width", width)
    		.attr("height", height);

// make a recursive tree programmatically
    const full = 1000;
    const fraction = 2;
    const nlevels = 17;
    function make_hierarchy(levels, denominator) {
      const name_suffix = denominator == 1 ? '' : '/' + denominator;
      name = '1' + name_suffix;
      if(levels == 1) {
        return [{
          'name': name,
          'size': full/denominator
        }]
      } else {
      	return [{
        	'name': name,
          'size': full/denominator
        }, {
        	'name': name,
          'children': make_hierarchy(levels-1, denominator*fraction)
        }];
      }
    }
    const hierarchical_data = {
        'name': 'top',
        'children': make_hierarchy(nlevels, 1)
    };
    
    const root = d3.hierarchy(hierarchical_data)
        .sum(d => d.size)
        .sort((a, b) => a.height - b.height || a.value - b.value);

const treemap = d3.treemap()
    	.tile(d3.treemapResquarify)
      .size([width, height])
      .round(true)
      .paddingInner(2);

treemap(root);

const cell = svg.selectAll('g')
    	.data(root.leaves()).enter().append('g')
        .attr('transform', d => 'translate(' + d.x0 + ',' + d.y0 + ')');

cell.append('rect')
        .attr('width', d => d.x1 - d.x0)
        .attr('height', d => d.y1 - d.y0)
    		.attr('class', 'cell');

cell.append('title')
      .text(d =>  d.data.name);

cell.append('text')
        .attr('class', 'label')
        .attr('x', 10)
        .attr('y', 30)
      .text((d, i) => i < 7 ? d.data.name: ''); // only show on first levels

</script>
</body>

https://d3js.org/d3.v4.min.js