</script>
<style>
.webtreemap-node {
  position: absolute; overflow: hidden; background: white; border: solid 1px black; 
  -webkit-transition: top    0.3s, left   0.3s, width  0.3s,  height 0.3s;
  -moz-transition: top    0.3s, left   0.3s, width  0.3s,  height 0.3s;
  transition: top    0.3s, left   0.3s, width  0.3s,  height 0.3s;  
}
.webtreemap-node:hover {background: #eee;}
.webtreemap-level0 {border: solid 1px #444;}
.webtreemap-level1 {border: solid 1px #666;}
.webtreemap-level2 {border: solid 1px #888;}
.webtreemap-level3 {border: solid 1px #aaa;}
.webtreemap-level4 {border: solid 1px #ccc;}
.webtreemap-caption {font-family: sans-serif; font-size: 11px; padding: 2px; text-align: center;}
body {font-family: sans-serif; font-size: 0.8em; margin: 2ex 4ex;}
h1 { font-weight: normal;}

#map {width: 100%; height: 600px; position: relative; cursor: pointer; -webkit-user-select: none;}
</style>
</head>
<body>

<h1>DU TreeMap</h1>

<p>This uses 
<a href="http://github.com/martine/webtreemap">webtreemap</a>. </p>

<p>Click on a box to zoom in.  Click on the outermost box to zoom out.</p>

<div id='map'></div>
<script >var kBorderWidth=1,kPadding=4,focused=null;function focus(c){focused=c;for(var e=0,a=c;a.parent;){a=a.parent;e+=1;for(var b=0,d;d=a.children[b];++b)if(d.dom)d.dom.style.zIndex=0}b=a.dom.offsetWidth;a=a.dom.offsetHeight;for(d=c;d.parent;d=d.parent){position(d.dom,-kBorderWidth,-kBorderWidth,b,a);d.dom.style.zIndex=1}layout(c,e,b,a)} function makeDom(c,e){var a=document.createElement("div");a.style.zIndex=1;a.className="webtreemap-node webtreemap-level"+Math.min(e,4);a.onmousedown=function(d){if(d.button==0)focused&&c==focused&&focused.parent?focus(focused.parent):focus(c);d.stopPropagation();return true};var b=document.createElement("div");b.className="webtreemap-caption";b.innerHTML=c.name;a.appendChild(b);return c.dom=a} function position(c,e,a,b,d){b-=kBorderWidth*2;d-=kBorderWidth*2;c.style.left=e+"px";c.style.top=a+"px";c.style.width=Math.max(b,0)+"px";c.style.height=Math.max(d,0)+"px"}function selectSpan(c,e,a){var b=c[a],d=b.data.$area,h=d,g=0,i=0;for(a=a;b=c[a];++a){b=b.data.$area;if(b<d)d=b;if(b>h)h=b;g+=b;var j=Math.max(5*e*e*h/(g*g),1*g*g/(e*e*d));if(i&&j>i){g-=b;break}i=j}return[a,g]} function layout(c,e,a,b){if("children"in c){var d=c.data.$area,h=0,g=0,i=a-1,j=b-2;h+=kPadding;g+=kPadding;i-=kPadding;j-=kPadding;g+=14;d=Math.sqrt(d/((i-h)*(j-g)));a=0;for(var f;f=c.children[a];++a)if(i-h<60||j-g<40){if(f.dom){f.dom.style.zIndex=0;position(f.dom,-2,-2,0,0)}}else{var k;k=(j-g)*d;f=selectSpan(c.children,k,a);for(var m=f[0],n=f[1],p=h,o=g,l=a;l<m;++l){f=c.children[l];if(f.dom)f.dom.style.zIndex=1;else{f.parent=c;f.dom=makeDom(f,e+1);c.dom.appendChild(f.dom)}b=f.data.$area;a=n/k;b= b/a;a/=d;b/=d;a=Math.round(a);b=Math.round(b);position(f.dom,p,o,a,b);"children"in f&&layout(f,e+1,a,b);o+=b}h+=Math.round(n/k/d);a=m-1}}}function appendTreemap(c,e){var a=getComputedStyle(c,null),b=parseInt(a.width);a=parseInt(a.height);makeDom(e,0);c.appendChild(e.dom);position(e.dom,0,0,b,a);layout(e,0,b,a)};</script>
<script>
function init() {
  var map = document.getElementById('map');
  appendTreemap(map, kTree);
}
setTimeout(init,100);// midori fix
</script>
</body>
</html>