Example of a treemap in D3.
This shows intuitively that the infinite geometric series 1 + 1/2 + 1/4 + 1/8 + ... equals 2.
Built with blockbuilder.org
xxxxxxxxxx
<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