D3 Examples - treemap top

xxxxxxxxxx
 
<!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);
​
var chart = d3.select("#chart");
var cell = chart
    .selectAll(".node")
    .data(nodes.descendants())
    .enter().append("div")
    .attr("class", function(d) { return "node level-" + d.depth; })
    .attr("title", function(d) { return d.data.name ? d.data.name : "null"; })
    .style("left", function(d) { return x(d.x0) + "%"; })
    .style("top", function(d) { return y(d.y0) + "%"; })
    .style("width", function(d) { return x(d.x1 - d.x0) + "%"; })
    .style("height", function(d) { return y(d.y1 - d.y0) + "%"; })
    //.style("background-image", function(d) { return d.value ? imgUrl + d.value : ""; })
    .style("background-color", function(d) { while (d.depth > 1) d = d.parent; return color(d.data.name); })
    .on("mousedown touchstart", function(d) { 
        zoom(d); 
        //zoom(node == d.parent ? root : d.parent);
        //zoom(d.children !== null ? d : root);
    })
    .append("p")
    .attr("class", "label")
    .text(function(d) { return (d.depth <=1 && d.data.name) ? d.data.name : ""; });
​
function zoom(d) {
    console.log('clicked: ' + d.data.name + ', depth: ' + d.depth);
    console.log('cell x0: ' + d.x0 + ', y0: ' + d.y0 + ', x1: ' + d.x1 + ', y1: ' + d.y1);
    
    x.domain([d.x0, d.x1]);
    y.domain([d.y0, d.y1]);
    
    var t = d3.transition()
        .duration(800)
        .ease(d3.easeCubicOut);
    
    chart
        .merge(cell)
        .transition(t)
        .style("left", function(d) { return x(d.x0) + "%"; })
        .style("top", function(d) { return y(d.y0) + "%"; })
        .style("width", function(d) { return x(d.x1 - d.x0) + "%"; })
        .style("height", function(d) { return y(d.y1 - d.y0) + "%"; })
    .text(function(d) {
        console.log("test");
        return (d.depth <=1 && d.data.name) ? d.data.name : ""; });
​
    //node = d;
    //d3.event.stopPropagation();
}
​
</script>
</body>
    