D3 Treemap

by shiv_veerashetty

HTML

<script src="http://www.billdwhite.com/wordpress/wp-content/js/modernizr/modernizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<div style="padding: 15px;">
<div id="body"></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900);
html, body {
    font-family: Roboto, Arial;
    margin: 0;
    font-size: 12px;
}

svg {
    overflow: hidden;
}

.tmRect {
    pointer-events: all;
    cursor: pointer;
    stroke: #aaa;
    stroke-width: 1;
    stroke-opacity: 0.75
}
.tmlabel {
    stroke: #000000;
    fill: #000000;
    stroke-width: 0;
    margin: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tmparent .tmlabel {
    font-size: 12px;
    stroke: #111;
    fill: #111;
}
.tmheaderBackground{
    fill: #eee;
}

.tmchild .tmlabel {
    font-size: 11px;
}

.tmcell {
    font-size: 11px;
    cursor: pointer
}

div.protooltip {	
    position: absolute;			
    text-align: center;			
    min-width: 60px;					
    max-width: 240px;					
    min-height: 26px;					
    padding: 8px;				
    font-size: 12px;		
    background: rgb(161,214,227);	
    border: 1px solid rgb(161,214,227);	
    color: #333;	
    border-radius: 4px;			
    pointer-events: none;
    z-index: 10000;			
}
div.protooltip.tmtip{
    background: #FCFFD6;	
    border: 1px solid #BA9790;	
    color: #111;	
    
}

.z-depth-1 {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.z-depth-1-half {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }

.z-depth-2 {
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);...

JavaScript

data1 = {"id":1,"name":"All Sites","children":[{"id":2,"name":"Site-1","children":[{"id":4,"name":"Compute","size":4,"color":0.01,"tooltip":"tag 1 tooltip text"},{"id":5,"name":"Network","size":10,"color":0.8},{"id":6,"name":"Storage","size":6,"color":0.2}]},{"id":3,"name":"Site-2","children":[{"id":7,"name":"Compute","size":20,"color":0.35},{"id":8,"name":"Network","size":14,"color":0.99},{"id":9,"name":"Storage","children":[{"id":10,"name":"Storage St-1","size":3,"color":0.65},{"id":11,"name":"Storage St-2","size":34,"color":0.72},{"id":12,"name":"Storage St-3","size":7,"color":0.23},{"id":13,"name":"Storage St-4","size":17,"color":0.5},{"id":14,"name":"Storage St-5","size":2,"color":0.76}]}]},{"id":15,"name":"Site-3","children":[{"id":16,"name":"Storage","size":20,"color":0.15},{"id":17,"name":"Compute","size":14,"color":0.79},{"id":18,"name":"Network","children":[{"id":19,"name":"Network St-1","size":3,"color":0.15},{"id":20,"name":"Network St-1","size":34,"color":0.82},{"id":21,"name":"Network St-3","size":7,"color":0.49},{"id":22,"name":"Network St-4","size":17,"color":0.5},{"id":23,"name":"Network St-5","size":2,"color":0.26}]}]}]};

function GetLightestFromColor(bgColor) {
    var hsl = d3.hsl(bgColor);
    hsl.l = 0.965;    
    return  hsl.toString();
}

var chartWidth = 550;
var chartHeight = 450;
var xscale = d3.scale.linear().range([0, chartWidth]);
var yscale = d3.scale.linear().range([0, chartHeight]);
var headerHeight = 16;
var transitionDuration = 500;
var root;
var node;

var minColor = "#0C8F8F";
var minMid = GetLightestFromColor(minColor);
var maxColor = "#FFAD08";
var maxMid = GetLightestFromColor(maxColor);
console.log(minMid);

var colorScale = d3.scale.linear().domain([0, 0.49999, 0.5, 1]).range([minColor, minMid, maxMid, maxColor]);

var tmTTTimeout;
function HideTooltip(){
    clearTimeout(tmTTTimeout);
    d3.select(".protooltip")
        .classed("z-depth-1", false)
        .classed("tmtip", false)
        .transition()
       ...