treemap top

<!DOCTYPE html>
<meta charset="utf-8">
<style>
	*, *:before, *:after {
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
}

.feature {
	position: relative;
	width: calc(100% - 50px);
	height: calc(100% - 50px);
	margin: 25px;
	background: #aaa;
	border: 1px solid red;
}

.node {
	position: absolute;
	background: transparent url("") no-repeat 50%/cover;
	border: 1px white solid;
	overflow: hidden;
	opacity: 0.5;
	-webkit-transition: opacity .8s;
	transition: opacity .8s;
}
.node .label {
	display: inline;
	font-family: sans-serif;
	color: rgba(255, 255, 255, 1);
	white-space: nowrap;
	position: absolute;
	padding: 0;
	margin: 0;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	-webkit-transition: -webkit-filter .8s;
	transition: -webkit-filter .8s;
	transition: filter .8s;
	transition: filter .8s, -webkit-filter .8s;
}
.node:hover {
	opacity: 0;
}
.node:hover .label {
	-webkit-filter: blur(10px);
	filter: blur(10px);
}
.node.level-0 {
	z-index: 4;
	font-size: 15vmin;
	display: none;
}
.node.level-1 {
	z-index: 3;
	font-size: 10vmin;
}
.node.level-2 {
	z-index: 2;
	font-size: 5vmin;
}
.node.level-3 {
	z-index: 1;
	font-size: 2.5vmin;
}
</style>

<body>
<div class="feature" id="chart"></div>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var width = 100, // % of the parent element
	height = 100,
	x = d3.scaleLinear().domain([0, width]).range([0, width]),
	y = d3.scaleLinear().domain([0, width]).range([0, height]),
	node, 
	root,
	imgUrl = "",
	blue = d3.hsl(216, 0.92, 0.68),
	
	fader = function(color) { return d3.interpolateRgb(color, "#fff")(0.1); },	
    color = d3.scaleOrdinal(d3.schemeCategory10.map(fader)),
	/*
	color = d3.scaleOrdinal()
		.range([
			d3.rgb(blue).brighter([0.25]), 
			d3.rgb(blue), 
			d3.rgb(blue).darker([0.25])
		]
			.map(function(c) { 
				c = d3.rgb(c); 
				return c; 
			})),
			*/
	treemap = d3.treemap()
    	.size([width, height])
    	.paddingInner(0)
    	.round(true);
var processData = {
 "name": "area",
 "children": [
	{
	"name": "Coop",
	"children": [
	  {"name": "Wohnen", "size": 50},
	  {"name": "Verkauf", "size": 40}
	]
	},
	{
	 "name": "Jens Jetzer",
	 "children": [
	  {"name": "Wohnen", "size": 10}
	 ]
	},
    {
     "name": "Migros",
       "children": [
         {"name": "Wohnen",
			"children": [
				 {"name": "Wohnung a", "size": 50},
				 {"name": "Wohnung b", "size": 40}
			]
		},
		  {"name": "Büro", "size": 30},
		  {"name": "Verkauf", "size": 15}
		]
    }
   ]
  };

node = root = processData;

var nodes = d3.hierarchy(root)
	.sum(function(d) { return d.size; });

treemap(nodes);

//node = d;
	//d3.event.stopPropagation();
}

</script>
</body>

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